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