| Index: packages/charted/examples/charts/demo_interactive.html
|
| diff --git a/packages/charted/examples/charts/demo_interactive.html b/packages/charted/examples/charts/demo_interactive.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..f84401075154d327342cd5e2c46131514d60a863
|
| --- /dev/null
|
| +++ b/packages/charted/examples/charts/demo_interactive.html
|
| @@ -0,0 +1,95 @@
|
| +<!DOCTYPE html>
|
| +
|
| +<html>
|
| + <head>
|
| + <meta charset="utf-8">
|
| + <title>Charted — Interactive demo</title>
|
| + <link rel="stylesheet" href="demo_charts.css">
|
| + <link rel="stylesheet" href="packages/charted/charts/themes/quantum_theme.css">
|
| + <style>
|
| + body {
|
| + padding: 0;
|
| + margin: 0;
|
| + }
|
| + .controls {
|
| + padding: 30px;
|
| + border-right: 1px solid #d3d3d3;
|
| + background-color: #eee;
|
| + display: flex;
|
| + flex-direction: column;
|
| + justify-content: space-between;
|
| + overflow: auto;
|
| + min-width: 250px;
|
| + max-width: 250px;
|
| + position: fixed;
|
| + height: 100%;
|
| + }
|
| + .control-category {
|
| + padding: 10px 0;
|
| + border-bottom: 1px solid #ccc;
|
| + }
|
| + .control-category:last-child {
|
| + border-bottom: 0;
|
| + }
|
| + button, select {
|
| + margin-bottom: 10px;
|
| + }
|
| + .chart-wrapper {
|
| + min-width: 600px;
|
| + max-width: 1000px;
|
| + margin-left: 325px;
|
| + }
|
| + </style>
|
| + </head>
|
| + <body>
|
| + <div class="controls">
|
| + <div class="controls-inner">
|
| + <h1 class="title">Charted — Interactive demo</h1>
|
| + <div class="control-category">
|
| + <h2>Series</h2>
|
| + <select id="select-series"></select>
|
| + <button id="add-series">+</button>
|
| + <button id="remove-series">-</button>
|
| +
|
| + <h2>Series renderer</h2>
|
| + <select id="select-renderer"></select>
|
| +
|
| + <h2>Columns in series</h2>
|
| + <div id="column-buttons"></div>
|
| + </div>
|
| + <div class="control-category">
|
| + <h2>Data rows</h2>
|
| + <button id="add-row">Add row</button>
|
| + <button id="remove-row">Remove last row</button>
|
| + </div>
|
| + <div class="control-category">
|
| + <h2>Internationalization</h2>
|
| + <div>
|
| + <input type="checkbox" id="rtl-use-script"/>
|
| + <label for="rtl-use-script">Use RTL script</label>
|
| + </div>
|
| + <div>
|
| + <input type="checkbox" id="rtl-use-layout"/>
|
| + <label for="rtl-use-layout">Use RTL Layout</label>
|
| + </div>
|
| + <div>
|
| + <input type="checkbox" id="rtl-switch-axes" disabled/>
|
| + <label for="rtl-switch-axes">Switch axis direction for RTL</label>
|
| + </div>
|
| + </div>
|
| + </div>
|
| + </div>
|
| + <div class="chart-wrapper">
|
| + <div class="chart-title-wrapper">
|
| + <div class="chart-title">Interactive chart demo</div>
|
| + <div class="chart-subtitle">Use the left panel to customize chart</div>
|
| + </div>
|
| + <div class="chart-host-wrapper">
|
| + <div class="chart-host" dir="ltr"></div>
|
| + <div class="chart-legend-host"></div>
|
| + </div>
|
| + </div>
|
| + <script type="application/dart" src="demo_interactive.dart"></script>
|
| + <script src="packages/browser/dart.js"></script>
|
| + </body>
|
| +</html>
|
|
|