Oct 032012
 
Article Javascript

flot is a javascript library available from http://www.flotcharts.org/ that implements all required functionality to generate nice interactive graphs.

This post is a brief tutorial on how to make use of this library to plot data in a web page.

The first step it to download the library from the link above. We got version 0.7 (flot-0.7.tar.gz). The downloaded file has to be decompressed and placed in our web server to be accessible using the url “/js/flot-0.7”.

Next, we use a text editor to create a file named ‘graph.html’ with the following HTML code:

Opening the file in a browser, we should get the following resulting graph:

As we can see, Flot takes care of scaling the axis to fit the values in the points, and assumes reasonable defaults to plot the legends in both axis, the color of the line, etc.

 Drawing time series

Drawing a graph to display the evolution in time of a data series is equally easy with flot. We just need to:

  • Specify that the x axis is a time axis.
  • In the data series, the time must be specified as milliseconds since 1-Jan-1970 (If data to be plotted are for times earlier than this date, they will be specified as negative numbers).

Continuing with our sample code, if we replace lines13,14 with the following data:

Will obtain the following graph:

We have just replaced the graph data with an array of [time, value] points, and specified that the x axis is a time axis using the option:

xaxis: { mode: “time” }

Besides, we have specified min and max values in the y axis.

As we have seen, the flot library is really easy to use. It also has many other possibilities that we will soon review in coming posts.

 Posted by at 6:04 pm

  5 Responses to “How to generate interactive graphs in javascript using flot”

  1. I have made a graph using flot .
    Now I want to name the X and Y axis of it .
    Is there any method in flot library by which we can name the X and Y axis of the graph .

    Struggling of this problem..
    please help
    Thanks in advance ..

    Regards
    Manish

    • Hi Manish,
      You can have a look at the HTML source of the flot example page on adding annotations to a graph:
      http://www.flotcharts.org/flot/examples/annotating/index.html

      But if you just want to give a title to the axis, you might simply put the graph inside an old-fashioned table like this:

      Where the “Rotate-90” style to rotate the Y-axis title 90 degrees is:

      You will need to play with the left and top position and width values, to fit your title to the graph.

      Hope this helps.

  2. Can you please tell me is this possible to give Y axis minimum negative value in negative. I given it as -2500 but still it is taking as 0. Can you please explain me the problem. Thanks in advance

    • Hi Kalaiyarasan,

      There should be no problem in setting a negative number as the minimum value of the Y axis. Just specify it in the options array passed to flot() as:

      var options = { yaxis: { min: -2500 } };

      I would advise you to review your code looking for a syntax error, or even better, look for javascript errors using firebug or a similar tool.

 Leave a Reply

(required)

(required)