dygraphs demo

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

by cubicalmonkey

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/dygraph/1.0.1/dygraph-combined.js"></script>
<br>
<div id="demodiv"></div>

JavaScript

var data = [
  [1,-47.9145746192318,-46],
  [2,-45.8060409660828,-44],
  [3, -55.3785211618733,-45],
  [4,-47.9145746192318,-75],
  [5, -57.3631959629225,-60],
  [6,-61.8939747059521,-44],
  [7,-72.1840642563181,-43],
  [8,-99.9787073863908,-80],
  [9, -61.3765992710809,-33],
  [10,-68.477758250113,-43],
  [11,-66.3774698274485,-66],
  [12,-51.6181394896313,-45],
  [13,-59.7854410528032,-33],
  [14,-51.8939747059521,-49],
  [15,-47.9145746192318,-47],
  [16,-40.7545411828838,-42],
  [17,-51.0075998355315,-50],
  [18,0,0],
  [19,-49.3278661471965,-48],
  [20,-39.7854410528032,-37],
  [21,-47.9145746192318,-46],
  [22,-49.7854410528032,-48],
  [23,-43.7648411395236,-42],
  [24,-49.4468583801935,-48]
];


// 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, {
  //new Dygraph("tabGraph",FRED.pre_eqData.coef,{
  labels: ["Cable Modem Tap", "A", "B"],
  Title: "Cable Modem Pre-Equalization",
  colors: ["#3d106e", "#00bd49"],
  xlabel: "Cable Modem Taps",
  ylabel: " Amplitude  ( dBc )",
  axisLineColor: '#342480',
  legend: 'always',
  animatedZooms: false,
  plotter: barChartPlotter,
  valueRange: [0, -90],
  dateWindow: [0, 25],
    series: {
            "A": {
              plotter: barChartPlotter
            },
            "B": {
              plotter: barChartPlotter
            }
    },
  underlayCallback: function(canvas, area, g) {
    var coords = g.toDomCoords(8, -73);

    // splitX and splitY are the coordinates on the canvas for (2006-11-19, 2.25).
    var splitX = coords[0];
    var splitY = coords[1];

    // The drawing area doesn't start at (0, 0), it starts at (area.x, area.y).
    // That's why we subtract them from splitX and splitY. This gives us the
    // actual distance from the upper-left hand corder of the graph itself.
    var leftSideWidth = splitX - area.x;
    var rightSideWidth =...