Monday, August 15, 2011

Hello, World!

What's the smallest HTML/Javascript snippet required to make a Dygraph? First, you need a div element to host your graph:

<div id="hello-world"></div>

And then you create the graph. A dygraph requires two parameters:
  • The document element created for the graph
  • A description of the data to be graphed
Additional options may be specified in a third parameter (though it's not required for the demo.)

There are several documented data formats; for this demo we're going to use multi-line text:

<script>
new Dygraph(
    document.getElementById("hello-world"),
    "Date,Hellos,Worlds\n" +
    "2011/10/01,250,280\n" +
    "2011/10/05,260,295\n" +
    "2011/10/09,400,240\n" +
    "2011/10/13,225,325");
</script>

Et voilĂ !