gallery/styled-chart-labels.js

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