All charts utilize the Chart.js library.
To use, insert <script src="/assets/js/chart.min.js"></script> at the end of your footer, after jQuery.
To create a chart, we need to instantiate the Chart class. To do this, we need to pass in the 2d context of where we want to draw the chart. Here's an example:
<canvas id="my-chart-1" width="400" height="400"></canvas>We need to get the context of our canvas with jQuery. To do this, get the DOM node out of the jQuery collection, and call the getContext('2d') method on that.
// Get context with jQuery - using jQuery's .get() method.
var ctx = $( '#my-chart-1' ).get(0).getContext('2d');
// This will get the first returned node in the jQuery collection.
var myNewChart = new Chart(ctx);
After we've instantiated the Chart class on the canvas we want to draw on, Chart.js will handle the scaling for retina displays.
With the Chart class set up, we can go on to create one of the charts Chart.js has available. In the example below, we would be drawing a Polar area chart.
new Chart(ctx).PolarArea(data, options);We call a method of the name of the chart we want to create. We pass in the data for that chart type, and the options for that chart as parameters. Chart.js will merge the global defaults with chart type specific defaults, then merge any options passed in as a second argument after data.
To create a responsive chart, you will first need to add Chart.defaults.global.responsive = true; before you create your chart.
Next you will need to wrap the <canvas> in a <div> to ensure it doesn't overflow the container.
Finally, you should remove the width and height attributes
A line chart is a way of plotting data points on a line. Often, it is used to show trend data, and the comparison of two data sets.
<div class="canvas-wrapper">
<canvas id="line-chart"></canvas>
</div> <!-- .canvas-wrapper -->
Chart.defaults.global.responsive = true;
var lineData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
var lineChartctx = $( '#line-chart' ).get(0).getContext('2d');
var lineChart = new Chart( lineChartctx ).Line( lineData );
A bar chart is sometimes used to show trend data, and the comparison of multiple data sets side by side.
<div class="canvas-wrapper">
<canvas id="bar-chart"></canvas>
</div> <!-- .canvas-wrapper -->
Chart.defaults.global.responsive = true;
var barData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
var barChartctx = $( '#bar-chart' ).get(0).getContext('2d');
var barChart = new Chart( barChartctx ).Bar( barData );
A radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets.
<div class="canvas-wrapper">
<canvas id="radar-chart"></canvas>
</div> <!-- .canvas-wrapper -->
Chart.defaults.global.responsive = true;
var radarData = {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 96, 27, 100]
}
]
};
var radarChartctx = $( '#radar-chart' ).get(0).getContext('2d');
var radarChart = new Chart( radarChartctx ).Radar( radarData );
Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.
This type of chart is often useful when we want to show a comparison data similar to a pie chart, but also show a scale of values for context.
<div class="canvas-wrapper">
<canvas id="polar-chart"></canvas>
</div> <!-- .canvas-wrapper -->
Chart.defaults.global.responsive = true;
var polarData = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}
];
var polarChartctx = $( '#polar-chart' ).get(0).getContext('2d');
var polarChart = new Chart( polarChartctx ).PolarArea( polarData );
Pie and doughnut charts are probably the most commonly used chart there are. They are divided into segments, the arc of each segment shows a the proportional value of each piece of data.
They are excellent at showing the relational proportions between data.
Pie and doughnut charts in are effectively the same class in Chart.js, but have one different default value - their percentageInnerCutout. This equates what percentage of the inner should be cut out. This defaults to 0 for pie charts, and 50 for doughnuts.
They are also registered under two aliases in the Chart core. Other than their different default value, and different alias, they are exactly the same.
<div class="row">
<div class="col-md-6">
<div class="canvas-wrapper">
<canvas id="pie-chart"></canvas>
</div> <!-- .canvas-wrapper -->
</div> <!-- .col-md-6 -->
<div class="col-md-6">
<div class="canvas-wrapper">
<canvas id="donut-chart"></canvas>
</div> <!-- .canvas-wrapper -->
</div> <!-- .col-md-6 -->
</div> <!-- .row -->
Chart.defaults.global.responsive = true;
var pieData = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
];
var pieChartctx = $( '#pie-chart' ).get(0).getContext('2d');
var pieChart = new Chart( pieChartctx ).Pie( pieData );
var donutChartctx = $( '#donut-chart' ).get(0).getContext('2d');
var donutChart = new Chart( donutChartctx ).Doughnut( pieData );