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);