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

by Shuaib Khan

HTML

<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<script src="http://people.iola.dk/olau/flot/jquery.flot.pie.js"></script>
<h1>Flot Examples</h1> 
 
    <div id="placeholder"></div>

CSS

#placeholder{
  width:600px;
  height:300px;
  transition:all linear 0.2s;
  -webkit-transition:all linear 0.2s
}

JavaScript

var data = [
	 		{ label: "Series1",  data: 10},
			{ label: "Series2",  data: 30},
			{ label: "Series3",  data: 90},
			{ label: "Series4",  data: 70},
			{ label: "Series5",  data: 80},
			{ label: "Series6",  data: 110}
		]; 
var options = { series: {
        pie: {
            show: true,
            radius: 1,
            label: {
                show: true,
                radius: 1,
                background: {
                    opacity: 0.8
                }
            }
        }
    },
    legend: {
        show: false
    }}
$.plot('#placeholder', data, options);

 $(window).resize(function(){
  $.plot('#placeholder', data, options)
})