Thursday, August 30, 2012

Simple dynamically updating line chart generation using jqPlot

jqPlot is a nice plotting plugin for the jQuery javascript framework. While i was working i just had to create a simple example to see how the library works. So i created this dynamically updating chart which plots random data in 5s intervals. The orientation of the graph can also be flipped. This was achieved from a simple rotation of the div element containing the chart using CSS rules, and rotating the axis labels correspondingly.

This is just a small code, but there was no example to see how this feature works. If any of you need to see how to implement a dynamically updating, vertical/horizontal chart using jqPlot you can have a look at this.

View the next step of this tutorial: Tracking mouse position on your vertical, annotatable, jqPlot line chart


  1. Thanks for this help!

  2. It's my pleasure to know that someone made use of this work. =)

  3. I was wondering if you could show how to add cross hairs to the cursor on your chart where when the mouse hovers over the canvas, it shows a horizontal and vertical line based around where the location of the mouse is at. I have got it to work with static data, but when I try dynamic data getting refreshed, it causes the crosshairs to disappear and I must move my mouse around in order for them the re appear again. Thank you! =)

  4. Good tips!
    Do you have data renderer sample using external file where the x-axis is date format? Already follow the sample but always got unresponsive script.