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           "<p class='infotext'>This chart's labels are styled</p>",
  10           "<div class='chart' id='div_g' style='width:600px; height:300px;'></div>",
  11           "<p class='infotext'>This version of the chart uses the default styles:</p>",
  12           "<div class='chart' id='div_g2' style='width:600px; height:300px;'></div>"].join("\n");
  13     },
  14     run: function() {
  15       new Dygraph(
  16             document.getElementById("div_g"),
  17             data, {
  18               rollPeriod: 7,
  19               legend: 'always',
  20               title: 'High and Low Temperatures',
  21               titleHeight: 32,
  22               ylabel: 'Temperature (F)',
  23               xlabel: 'Date (Ticks indicate the start of the indicated time period)',
  24               labelsDivStyles: {
  25                 'text-align': 'right',
  26                 'background': 'none'
  27               },
  28               strokeWidth: 1.5
  29             }
  30           );
  31
  32       new Dygraph(
  33             document.getElementById("div_g2"),
  34             data, {
  35               rollPeriod: 30,
  36               legend: 'always',
  37               title: 'High and Low Temperatures (30-day average)',
  38               ylabel: 'Temperature (F)',
  39               xlabel: 'Date (Ticks indicate the start of the indicated time period)',
  40               labelsDivStyles: {
  41                 'text-align': 'right',
  42                 'background': 'none'
  43               },
  44               strokeWidth: 1.5
  45             }
  46           );
  47     }
  48   });