Commit | Line | Data |
---|---|---|
e88a95b4 | 1 | /*global Gallery,Dygraph,data */ |
3381d8fa RK |
2 | Gallery.register( |
3 | 'styled-chart-labels', | |
4 | { | |
5 | name: 'CSS label styling', | |
6 | title: 'Each chart label is styled independently with CSS', | |
7 | setup: function(parent) { | |
605b6119 | 8 | parent.innerHTML = [ |
93a5bb4c | 9 | "<style>.dygraph-legend { text-align: right; background: none; }</style>", |
605b6119 RK |
10 | "<p class='infotext'>This chart's labels are styled</p>", |
11 | "<div class='chart' id='div_g' style='width:600px; height:300px;'></div>", | |
12 | "<p class='infotext'>This version of the chart uses the default styles:</p>", | |
13 | "<div class='chart' id='div_g2' style='width:600px; height:300px;'></div>"].join("\n"); | |
3381d8fa RK |
14 | }, |
15 | run: function() { | |
e88a95b4 | 16 | new Dygraph( |
3381d8fa RK |
17 | document.getElementById("div_g"), |
18 | data, { | |
19 | rollPeriod: 7, | |
20 | legend: 'always', | |
21 | title: 'High and Low Temperatures', | |
22 | titleHeight: 32, | |
23 | ylabel: 'Temperature (F)', | |
24 | xlabel: 'Date (Ticks indicate the start of the indicated time period)', | |
3381d8fa RK |
25 | strokeWidth: 1.5 |
26 | } | |
27 | ); | |
28 | ||
e88a95b4 | 29 | new Dygraph( |
3381d8fa RK |
30 | document.getElementById("div_g2"), |
31 | data, { | |
32 | rollPeriod: 30, | |
33 | legend: 'always', | |
34 | title: 'High and Low Temperatures (30-day average)', | |
35 | ylabel: 'Temperature (F)', | |
36 | xlabel: 'Date (Ticks indicate the start of the indicated time period)', | |
3381d8fa RK |
37 | strokeWidth: 1.5 |
38 | } | |
39 | ); | |
40 | } | |
41 | }); |