Flot Example

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking. The plugin works with Internet Explorer 6+, Firefox 2.x+, Safari 3.0+, Opera 9.5+ and Konqueror 4.x+ with the HTML canvas tag (the excanvas Javascript emulation helper is used for IE < 9).

HTML

<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<h1>Flot Examples</h1> 
    <div id="placeholder" style="width:600px;height:300px;"></div>

JavaScript

var fdat = [
    {
      "color": "#6ECFF6",
      "data": [[0,114]]
    },
    {
      "color": "#7BCDC8",
      "data": [[1,96]]
    },
    {
      "color": "#FDC68A",
      "data": [[2,94]]
    }
  ]
    
   var data = [{
     label: "d1", data:fdat, bars: {show: true}},
     {label: "d2",data:fdat, lines: {show: true}, points:{show:true}
   }];

   var opts = {xaxis: {ticks:[[0,"Text 1"], [1,"Text 2"], [2,"Text 3"]]}};
   $.plot($("#placeholder"),data,opts);