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