Commit | Line | Data |
---|---|---|
e88a95b4 | 1 | /*global Gallery,Dygraph,data */ |
c1f22b5a RK |
2 | Gallery.register( |
3 | 'color-cycle', | |
4 | { | |
5 | name: "Color cycle", | |
6 | title: 'Different color cycles', | |
7 | setup: function(parent) { | |
8 | parent.innerHTML = | |
9 | "<div id='blah'></div>" + | |
10 | "<p><b>Colors: </b>" + | |
11 | "<button id='0'> first set</button>" + | |
12 | "<button id='1'> second set</button>" + | |
13 | "<button id='2'> undefined</button>" + | |
14 | "</p>"; | |
15 | }, | |
16 | run: function() { | |
17 | var colorSets = [ | |
18 | ['#284785', '#EE1111', '#8AE234'], | |
19 | ['#444444', '#888888', '#DDDDDD'], | |
20 | null | |
e1e80cce | 21 | ]; |
e88a95b4 | 22 | var chart = new Dygraph(document.getElementById("blah"), |
c1f22b5a RK |
23 | "X,a,b,c\n" + |
24 | "10,12345,23456,34567\n" + | |
25 | "11,12345,20123,31345\n", | |
26 | { | |
27 | width: 640, | |
28 | height: 480, | |
29 | colors: colorSets[0] | |
30 | }); | |
31 | ||
32 | function change(event) { | |
33 | chart.updateOptions({colors: colorSets[event.target.id]}); | |
34 | } | |
35 | document.getElementById("0").onclick = change; | |
36 | document.getElementById("1").onclick = change; | |
37 | document.getElementById("2").onclick = change; | |
38 | } | |
39 | }); |