Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(495)

Side by Side Diff: packages/charted/examples/charts/components/demo_chartstate.html

Issue 1400473008: Roll Observatory packages and add a roll script (Closed) Base URL: git@github.com:dart-lang/observatory_pub_packages.git@master
Patch Set: Created 5 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Charted &mdash; 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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698