Flot Charts
Bar Chart

A bar chart or bar graph is a chart with rectangular bars with lengths proportional to the values that they represent.

Bar Chart

A bar chart or bar graph is a chart with rectangular bars with lengths proportional to the values that they represent.

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

A bar chart or bar graph is a chart with rectangular bars with lengths proportional to the values that they represent.

Line Chart

The stacked charts are used when data sets have to be broken down into their constituents.

Javascript Code

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

A line graph is a type of chart which displays information as a series of data points connected by straight line segments.

Javascript Code

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

Area charts are used to represent cumulated totals using numbers or percentages (stacked area charts in this case) over time.

Javascript Code

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.

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.

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: '#677489'},
{ label: "Series 2", data: [[1,30]], color: '#CAB1D2'},
{ 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
}
});