Bar Chart

Below is the basic bar chart example.

Javascript Code

new Chart(document.getElementById('flotBar1'), {
  type: 'bar',
  data: {
    labels: ['0', '2', '4', '6', '8', '10', '12', '14'],
    datasets: [{
      data: [3, 8, 5, 13, 5, 7, 4, 6],
      backgroundColor: '#4E6577'
    }]
  }
});

Line Chart

Below is the basic line chart example.

Javascript Code

datasets: [{
  data: newCust,
  fill: false,
  tension: 0 // set to e.g. 0.4 for a smooth (spline) curve
}]

Area Chart

Below is the basic area chart example.

datasets: [{
  data: newCust,
  fill: true, // making the area chart
  backgroundColor: 'rgba(189,157,199,.6)',
  tension: 0
}]

datasets: [{
  data: newCust,
  fill: true, // making the area chart
  backgroundColor: 'rgba(189,157,199,.6)',
  tension: 0.4 // this makes the smooth line
}]

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 chart = new Chart(ctx, { type: 'line', data: data, options: { animation: false } });
var updateInterval = 1000;

setInterval(function () {
  stepRandomWalk(data.datasets[0].data);
  chart.update();
}, updateInterval);

Pie Chart

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

Javascript Code

var pieData = {
  labels: ['Series 1', 'Series 2', 'Series 3', 'Series 4', 'Series 5'],
  datasets: [{
    data: [10, 30, 90, 70, 80],
    backgroundColor: ['#9A3267', '#ED4151', '#F89D44', '#85C441', '#36B3E3']
  }]
};

new Chart(document.getElementById('flotPie1'), {
  type: 'pie', // use 'doughnut' for a donut chart
  data: pieData
});