| <!doctype html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta content="IE=edge" http-equiv="X-UA-Compatible">
|
| <meta content="width=device-width, initial-scale=1" name="viewport">
|
| <title>Standalones 05</title>
|
| <link href="https://playground.anychart.com/docs/samples/Standalones_05/iframe" rel="canonical">
|
| <meta content="Dashboard,Graphics,Line Chart,Table Layout" name="keywords">
|
| <meta content="AnyChart - JavaScript Charts designed to be embedded and integrated" name="description">
|
| |
| |
| |
|
|
| <link href="_deps/cdn.anychart.com/releases/8.14.1/css/anychart-ui.min_qe95e7e741b.css" rel="stylesheet" type="text/css">
|
| <style>html, body, #container {
|
| width: 100%;
|
| height: 100%;
|
| margin: 0;
|
| padding: 0;
|
| }</style>
|
| </head>
|
| <body>
|
| <div id="container"></div>
|
| <script src="_deps/cdn.anychart.com/releases/8.14.1/js/anychart-base.min_qe95e7e741b.js"></script>
|
| <script src="_deps/cdn.anychart.com/releases/8.14.1/js/anychart-table.min_qe95e7e741b.js"></script>
|
| <script src="_deps/cdn.anychart.com/releases/8.14.1/js/anychart-exports.min_qe95e7e741b.js"></script>
|
| <script src="_deps/cdn.anychart.com/releases/8.14.1/js/anychart-ui.min_qe95e7e741b.js"></script>
|
| <script type="text/javascript">anychart.onDocumentReady(function () {
|
|
|
| stage = anychart.graphics.create("container", "100%", "100%");
|
|
|
|
|
| var chart = anychart.line();
|
|
|
| data = [
|
| ["Winter", 1.1, 1, 2, 1.8, 0.1, 0.5, 1.4],
|
| ["Spring", 1.6, 2, 1.5, 1.9, 0.2, 1.1, 1.4],
|
| ["Summer", 1.4, 1.9, 0.5, 0.9, 0.3, 1.8, 1.2],
|
| ["Fall", 1.9, 1.3, 1.1, 0.3, 0.4, 1.7, 0.9]
|
| ];
|
|
|
| chart.data(data);
|
|
|
|
|
| title = anychart.standalones.title();
|
| title.text("This is the title");
|
|
|
|
|
| chart.padding().top(50);
|
|
|
|
|
| table = anychart.standalones.table();
|
| table.rowsCount(8);
|
| table.colsCount(5);
|
| table.zIndex(100000000);
|
| table.bounds("65%", "35%", "30%", "60%");
|
| table.fontSize(9);
|
| table.contents([
|
| ["", "Winter", "Spring", "Summer", "Fall"],
|
| ["Store 1", 1.1, 1.6, 1.4, 1.9],
|
| ["Store 2", 1, 2, 1.9, 1.3],
|
| ["Store 3", 2, 1.5, 0.5, 1.1],
|
| ["Store 4", 1.8, 1.9, 0.9, 0.3],
|
| ["Store 5", 0.1, 0.2, 0.3, 0.4],
|
| ["Store 6", 0.5, 1.1, 1.8, 1.7],
|
| ["Store 7", 1.4, 1.4, 1.2, 0.9]
|
| ]);
|
|
|
|
|
| table.hAlign("center");
|
| table.vAlign("middle");
|
|
|
|
|
| chart.width("65%");
|
|
|
|
|
| label = anychart.standalones.label();
|
| label.text("This is the label");
|
|
|
|
|
| label.container(stage);
|
| label.draw();
|
|
|
|
|
| table.container(stage);
|
| table.draw();
|
|
|
|
|
| chart.container(stage);
|
| chart.draw();
|
|
|
|
|
| title.container(stage);
|
| title.draw();
|
| });</script>
|
| </body>
|
| </html> |
