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