dygraphs demo

Very basic demonstration of how to use the dygraphs charting library.

by cubicalmonkey

HTML

<script type="text/javascript"
  src="http://dygraphs.com/dygraph-combined.js"></script>
<div id="demodiv"></div>

JavaScript

function data() {
  var r =  [[
      251,
      0
    ],
    [
      252,
      0
    ],
    [
      253,
      0
    ],
    [
      254,
      0
    ],
    [
      255,
      0
    ],
    [
      256,
      0
    ],
    [
      257,
      0
    ]];
  return r;
}

// To construct a dygraph, pass in a div, the data and options.
// legend: 'always' makes the legend show up, even when the mouse isn't over the chart.
g = new Dygraph(document.getElementById("demodiv"), data, {
  title: 'Stacked chart w/ Total',
  stackedGraph: true,
  axes: {
    x: {
      valueFormatter: function(val, opts, series_name, dygraph) {
        for (var i = 0; i < dygraph.numRows(); i++) {
          if (dygraph.getValue(i, 0) != val) continue;
          var total = 0;
          for (var j = 1; j < dygraph.numColumns(); j++) {
            total += dygraph.getValue(i, j);
          }
          return Dygraph.dateString_(val) + ' (total: ' + total.toFixed(2) + ')';
        }
      }

    }
  }
});