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

Side by Side Diff: packages/charted/examples/charts/demo_interactive.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
3 <html>
4 <head>
5 <meta charset="utf-8">
6 <title>Charted &mdash; 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 &mdash; 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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698