Using “Flot” to display historical data plots in the web browser.

There are many graphical libraries capable of plotting charts for the Web. Flot is a nice alternative, it’s a lightweight javascript library that is easy to use, and draw beautiful interactive charts with good performance.

Let’s see how to create a chart plot of daily historical data for a measure with zoom and pan.

First include the required libraries in the <head> section of the HTML page. Something like:

<link rel="stylesheet" href="flot/ui/themes/base/jquery.ui.all.css">
<!--[if IE]>http://flot/excanvas.js<![endif]-->

Then you need to put a

in the section of the HTML code that will contain the chart:

Then after the placeholder div,  create a <script> section with the javascript code for the plot. Possibly you will use PHP to retrieve data from a historical database and build the javascript code as below. It’s also possible to load data separately from the web page with AJAX calls.

var series = []; // a data series
series.push( { label: '', data: [] } );
series[0].label = '06/02/2014-Point description';
// daily data for each minute as a time series with milliseconds resolution [time, value].
series[0].data.push( [0, 6057.00] );
series[0].data.push( [60000, 6046.00] );
series[0].data.push( [120000, 6051.00] );
series[0].data.push( [180000, 6050.00] );
series[0].data.push( [86220000, 6091.00] );
series[0].data.push( [86280000, 6087.00] );
series[0].data.push( [86340000, 6069.00] );
// chart options
var options = {
  legend: { show: true, container: $("#overviewLegend") },
  crosshair: { mode: "x" },
  lines: { show: true },
  points: { show: false },
  grid: { hoverable: true, autoHighlight: false },
  xaxis: { 
    min: 0, 
    max: 23.599*1000*60*60, 
    mode: "time", 
    timeFormat: "%H:%M:%S" 
  yaxis: { },
  zoom: {
    interactive: true
  pan: {
    interactive: true
// a jQuery function called when the web page is fully loaded:
$(function () {

  // do the plot
  plot = $.plot( $("#placeholder"),  series,  options );
  // zooms by selection
  placeholder.bind("plotselected", function (event, ranges) {
    options.xaxis.min = ranges.xaxis.from;
    options.xaxis.max =;
    plot = $.plot(placeholder, series, options);

Then it’s done, the chart will look like this:


The zoom is accomplished using the mouse wheel and the pan by dragging the mouse.

Ricardo Olsen in-2c-14px, MEng. ::


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s