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>
<script src="http://people.mozilla.com/~mcote/flot-axislabels/example/jquery.flot.axislabels.js"></script>
<div id="placeholder" style="width:600px;height:300px;"></div>

JavaScript

$(document).ready(function () {

  var data = [
    { data: [[1, 3], [2, 8], [3, 5], [7, 13]], bars: { show: true }, xaxis: 1,
      yaxis: 1, color: "rgb(255, 0, 0)" },
    { data: [[3, 3], [6, 8], [8, 5], [12, 13]], xaxis: 1, yaxis: 2, color: "rgb(0, 255, 0)" },
    { data: [[5, 12], [7, 12], null, [7, 2.5], [12, 2.5]], xaxis: 1, yaxis: 3, color: "rgb(0, 0, 255)" },
    { data: [[2, 3], [7, 8], [9, 5], [10, 13], [11,12]], xaxis: 1, yaxis: 4, color: "rgb(0, 255, 255)" }
  ];

  $.plot($("#placeholder"),
         data,
         {
           xaxes: [
             { position: 'bottom', axisLabel: 'Date' }
           ],
           yaxes: [
             { position: 'left', axisLabel: 'Hourly Rain (mm)',
              axisLabelPadding: 10 },
             { position: 'right', axisLabel: 'Temperature (C)',
               axisLabelPadding: 10},
             { position: 'right', axisLabel: 'Relative Humidity (%)',
               axisLabelPadding: 10},
             { position: 'right',axisLabel: 'Pressure (hPa)',
               axisLabelPadding: 10}
           ],
           grid: { hoverable: true, show: true }
         }
  );
  
  $('.yaxisLabel').css('color','red');
  $('.y2axisLabel').css('color','orange');
  $('.y3axisLabel').css('color','green');
  $('.y4axisLabel').css('color','purple');
  
});