Bar Chart

Below is the basic bar chart example.

Javascript Code

$.plot("#flotBar1", [{  data: [[0, 3], [2, 8], [4, 5], [6, 13],[8,5], [10,7],[12,4], [14,6]]}], {  series: {    bars: {      show: true,      lineWidth: 0,      fillColor: '#4E6577'    }  },  grid: {    borderWidth: 1,    borderColor: '#D9D9D9'  },  yaxis: {    tickColor: '#d9d9d9',    font: {      color: '#666',      size: 10    }  },  xaxis: {    tickColor: '#d9d9d9',    font: {      color: '#666',      size: 10    }  }});

Line Chart

Below is the basic line chart example.

Javascript Code

series: {  bars: { show: false },  lines: {    show: true,    lineWidth: 1  },  shadowSize: 0}

Area Chart

Below is the basic area chart example.

series: {  lines: {    show: true,    lineWidth: 0,    fill: 0.8 //making the area chart  },  shadowSize: 0}

series: {  lines: { show: false },  splines: { // this making the smooth line    show: true,    lineWidth: 0,    fill: 0.8 //making the area chart  },  shadowSize: 0}

Real Time Updates

You can update a chart periodically to get a real-time effect by using a timer to insert the new data in the plot and redraw it.

Javascript Code

var plot = $.plot('#flotRealtime', data, option);var updateInterval = 1000;function update_plot() {  plot.setData([getRandomData()]);  plot.draw();  setTimeout(update_plot, updateInterval);}update_plot();

Pie Chart

Labels can be hidden if the slice is less than a given percentage of the pie.

Javascript Code

var piedata = [  { label: "Series 1", data: [[1,10]], color: '#9A3267'},  { label: "Series 2", data: [[1,30]], color: '#ED4151'},  { label: "Series 3", data: [[1,90]], color: '#F89D44'},  { label: "Series 4", data: [[1,70]], color: '#85C441'},  { label: "Series 5", data: [[1,80]], color: '#36B3E3'}];$.plot('#flotPie1', piedata, {  series: {    pie: {      show: true,      radius: 1,      label: {        show: true,        radius: 2/3,        formatter: labelFormatter,        threshold: 0.1      }    }  },  grid: {    hoverable: true,    clickable: true  }});