gallery/styled-chart-labels.js

   1 /*global Gallery,Dygraph,data */
   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) {
   8       parent.innerHTML = [
   9           "<style>.dygraph-legend { text-align: right; background: none; }</style>",
  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");
  14     },
  15     run: function() {
  16       new Dygraph(
  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)',
  25               strokeWidth: 1.5
  26             }
  27           );
  28
  29       new Dygraph(
  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)',
  37               strokeWidth: 1.5
  38             }
  39           );
  40     }
  41   });