Sunday, August 28, 2011

Tool: Timeplot

Timeplot is an open source DHTML and javascript based widget for plotting time series data and overlay time-based events over them. Simply hovering over the data poionts will reveal the respective data value. Timplot was originally developed by Stefano Mazzocchi as part of the SIMILE Project at MIT.


Timeplot can be used by first incorporating the timeplot api into the script tag of the html document.

Then we create a div element in the html code w/ a specific id that will be used as the container of the plot.

By calling Timeplot.create() and passing in our div id as the argument, we can construct an empty timeplot graph.

Lastly we can add data into the graph by loading in a csv file. Beyond this point, further improvements/enhancements can be made to the graph. Some fine tuning includes plotting ranges, enabling grid, adding time axis, changing plot color and adding plot value during hover event. By using the same geometry, we can also overlay another timeplot ontop of our original graph.