OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 |
| 3 <html> |
| 4 <head> |
| 5 <meta charset="utf-8"> |
| 6 <title>Charted — Interactive demo</title> |
| 7 <link rel="stylesheet" href="demo_charts.css"> |
| 8 <link rel="stylesheet" href="packages/charted/charts/themes/quantum_theme.cs
s"> |
| 9 <style> |
| 10 body { |
| 11 padding: 0; |
| 12 margin: 0; |
| 13 } |
| 14 .controls { |
| 15 padding: 30px; |
| 16 border-right: 1px solid #d3d3d3; |
| 17 background-color: #eee; |
| 18 display: flex; |
| 19 flex-direction: column; |
| 20 justify-content: space-between; |
| 21 overflow: auto; |
| 22 min-width: 250px; |
| 23 max-width: 250px; |
| 24 position: fixed; |
| 25 height: 100%; |
| 26 } |
| 27 .control-category { |
| 28 padding: 10px 0; |
| 29 border-bottom: 1px solid #ccc; |
| 30 } |
| 31 .control-category:last-child { |
| 32 border-bottom: 0; |
| 33 } |
| 34 button, select { |
| 35 margin-bottom: 10px; |
| 36 } |
| 37 .chart-wrapper { |
| 38 min-width: 600px; |
| 39 max-width: 1000px; |
| 40 margin-left: 325px; |
| 41 } |
| 42 </style> |
| 43 </head> |
| 44 <body> |
| 45 <div class="controls"> |
| 46 <div class="controls-inner"> |
| 47 <h1 class="title">Charted — Interactive demo</h1> |
| 48 <div class="control-category"> |
| 49 <h2>Series</h2> |
| 50 <select id="select-series"></select> |
| 51 <button id="add-series">+</button> |
| 52 <button id="remove-series">-</button> |
| 53 |
| 54 <h2>Series renderer</h2> |
| 55 <select id="select-renderer"></select> |
| 56 |
| 57 <h2>Columns in series</h2> |
| 58 <div id="column-buttons"></div> |
| 59 </div> |
| 60 <div class="control-category"> |
| 61 <h2>Data rows</h2> |
| 62 <button id="add-row">Add row</button> |
| 63 <button id="remove-row">Remove last row</button> |
| 64 </div> |
| 65 <div class="control-category"> |
| 66 <h2>Internationalization</h2> |
| 67 <div> |
| 68 <input type="checkbox" id="rtl-use-script"/> |
| 69 <label for="rtl-use-script">Use RTL script</label> |
| 70 </div> |
| 71 <div> |
| 72 <input type="checkbox" id="rtl-use-layout"/> |
| 73 <label for="rtl-use-layout">Use RTL Layout</label> |
| 74 </div> |
| 75 <div> |
| 76 <input type="checkbox" id="rtl-switch-axes" disabled/> |
| 77 <label for="rtl-switch-axes">Switch axis direction for RTL</label> |
| 78 </div> |
| 79 </div> |
| 80 </div> |
| 81 </div> |
| 82 <div class="chart-wrapper"> |
| 83 <div class="chart-title-wrapper"> |
| 84 <div class="chart-title">Interactive chart demo</div> |
| 85 <div class="chart-subtitle">Use the left panel to customize chart</div> |
| 86 </div> |
| 87 <div class="chart-host-wrapper"> |
| 88 <div class="chart-host" dir="ltr"></div> |
| 89 <div class="chart-legend-host"></div> |
| 90 </div> |
| 91 </div> |
| 92 <script type="application/dart" src="demo_interactive.dart"></script> |
| 93 <script src="packages/browser/dart.js"></script> |
| 94 </body> |
| 95 </html> |
OLD | NEW |