dygraphs demo

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

by kaliatech

HTML

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

<div id="demodiv2" style="height:150px;margin-top:20px"></div>

<div id="demodiv3" style="height:150px;margin-top:20px"></div>

JavaScript

function data() {
  var r = "a,b\n2008-12-01,0.9\n2008-12-02,0.3\n2008-12-03,0.7\n"
  return r;
}

g = new Dygraph(document.getElementById("demodiv"), data(), {
   title: 'Example for changing x-axis label granularity 1',
   axes: {
    x: {
        pixelsPerLabel: 50
      }

    }    
});


g2 = new Dygraph(document.getElementById("demodiv2"), data(), {
   title: 'Example for changing x-axis label granularity 2',
   axes: {
    x: {
        pixelsPerLabel: 250
      }

    }    
});


g3 = new Dygraph(document.getElementById("demodiv3"), data(), {
  title: 'Example for changing x-axis label granularity 3',
  axes: {
    x: {
        ticker: function(a, b, pixels, opts, dygraph, vals) {
          var chosen = Dygraph.pickDateTickGranularity(a, b, pixels, opts);
          //Force to DAILY if built-in calculation returned SIX_HOURLY
          //if(chosen==Dygraph.SIX_HOURLY) chosen=Dygraph.DAILY;
          //or
          //Force to DAILY always
          chosen = Dygraph.DAILY;
          if (chosen >= 0) {
            return Dygraph.getDateAxis(a, b, chosen, opts, dygraph);
          } else {
            return [];
          }
        }        
      }

    }
});