gallery/color-cycle.js

   1 /*global Gallery,Dygraph,data */
   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
  21       ];
  22       var chart = new Dygraph(document.getElementById("blah"),
  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   });