OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <meta charset="utf-8"> |
| 5 <title>Charted — Demo of chart state</title> |
| 6 <link rel="stylesheet" href="../demo_charts.css"> |
| 7 <style> |
| 8 .chart-host-wrapper { |
| 9 width: 500px !important; |
| 10 } |
| 11 .chart-host { |
| 12 width: 100% !important; |
| 13 } |
| 14 .charts-bar { |
| 15 display: flex; |
| 16 flex-direction: row; |
| 17 } |
| 18 </style> |
| 19 </head> |
| 20 <body> |
| 21 <div> |
| 22 <div class="charts-bar"> |
| 23 <div class="chart-wrapper" id="simple-bar-chart"> |
| 24 <div class="chart-title-wrapper"> |
| 25 <div class="chart-title">Simple bar chart</div> |
| 26 </div> |
| 27 <div class="chart-host-wrapper"> |
| 28 <div class="chart-host" dir="ltr"></div> |
| 29 </div> |
| 30 </div> |
| 31 |
| 32 <div class="chart-wrapper" id="horizontal-bar-chart"> |
| 33 <div class="chart-title-wrapper"> |
| 34 <div class="chart-title">Chart sharing the same state object</di
v> |
| 35 </div> |
| 36 <div class="chart-host-wrapper"> |
| 37 <div class="chart-host" dir="ltr"></div> |
| 38 </div> |
| 39 </div> |
| 40 </div> |
| 41 <div style="width: 50%; margin: 0 auto; padding: 50px; line-height: 2em;"> |
| 42 <p>Multiple charts can share the same ChartState object. When they do, |
| 43 any changes to state on one chart is indicated in the other chart too. |
| 44 Try hovering on a bar in one of the charts above!</p> |
| 45 |
| 46 <p>ChartState supports <a href="#" id="hover">hovering</a> and |
| 47 <a href="#" id="highlight">highlighting</a> a value and |
| 48 <a href="#" id="select">selecting</a> and |
| 49 <a href="#" id="preview">previewing</a> a series (actually a column)</p> |
| 50 |
| 51 <p>Try hovering on blue text in above paragraph. ChartState can be |
| 52 updated from scripts outside the chart too!</p> |
| 53 </div> |
| 54 </div> |
| 55 <script type="application/dart" src="demo_chartstate.dart"></script> |
| 56 <script src="packages/browser/dart.js"></script> |
| 57 </body> |
| 58 </html> |
OLD | NEW |