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]-->
http://flot/jquery.js
http://flot/jquery.flot.js
http://flot/jquery.flot.crosshair.js
http://flot/jquery.flot.selection.js
http://flot/jquery.flot.navigate.js

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 = ranges.xaxis.to;
    plot = $.plot(placeholder, series, options);
  });
 });

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

plot-screenshot

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

Ricardo Olsen in-2c-14px, MEng. :: https://dscsys.com

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s