Link: http://dygraphs.com/
dygraphs is an open source JavaScript library that produces produces interactive, zoomable charts of time series like the one to the left. It is designed to display dense data sets and enable users to explore and interpret them.
It is completely compatible with the Google Visualization API, meaning it can use any data that is specified in a GViz compatible manner.
Some of the features of dygraphs:
- Plots time series without using an external server or Flash
- Works in Internet Explorer (using excanvas)
- Lightweight (69kb) and responsive
- Displays values on mouseover, making interaction easily discoverable
- Supports error bands around data series
- Interactive zoom
- Displays Annotations on the chart
- Adjustable averaging period
- Can intelligently chart fractions
- Customizable click-through actions
- Compatible with the Google Visualization API
- Intelligent defaults make it easy to use
The examples on their page make it look very simple to use, but very effective. Since it only does one type of chart, apparently, it can be that easy. To create a graph, it's as simple as creating a new instance of the Dygraph object in JavaScript, and give it the DOM element to overwrite, plus a CSV file. This is an entire self-contained example with the CSV file simply typed as the second argument:
<html><head><script type="text/javascript"src="dygraph-combined.js"></script></head><body><div id="graphdiv"></div><script type="text/javascript">g = new Dygraph(// containing divdocument.getElementById("graphdiv"),// CSV or path to a CSV file."Date,Temperature\n" +"2008-05-07,75\n" +"2008-05-08,70\n" +"2008-05-09,80\n");</script></body></html>
It's just that simple. This will replace the element with id "graphdiv" with a graph with 3 points. Bigger data sets can be used, obviously. On the chart, you get mouseover capabilities that display data at a given point. You also get zoom functionality by clicking and dragging to highlight a smaller area inside the graph. Double-click to return to the default zoom.
The Dygraph object takes some options as well, that effect the behavior of the graph. You can add error bars to the graph, or provide callbacks for mouse events. The options are explained here: http://dygraphs.com/options.html
0 comments:
Post a Comment