ChartJS
In this tutorial we will learn to draw line graph using ChartJS and some static data.
Using ChartJS 2.x Download
Note! You can get the code of this tutorial from my GitHub repository.
We will create a line chart for two teams namely, TeamA and TeamB and their score for 5 matches - match1, match2, ... match5.
We will start with the following project structure.
Now inside the css folder create a default.css file. This will contain the default stylesheet.
default.css
Inside the js folder create line.js file. In this file we will be writing the code to create line graphs.
line.js
And inside the project folder create a line.html file. This is the line graph page.
line.html
Now the project structure will look like the following.
Kindly ignore other files shown in the above image. They were created when I saved this project in my GitHub repository.
Copy the HTML structure from the index.html file and make sure you have the jQuery and ChartJS javascript files included.
Now in the head include the default.css file that we created and saved in the css folder.
head
<link type="text/css" rel="stylesheet" href="css/default.css" />
Inside the body create a div and give it a class chart-container. And inside this div create a canvas and give it an id line-chartcanvas.
body
chart-container
line-chartcanvas
<div class="chart-container"> <canvas id="line-chartcanvas"></canvas> </div>
And lastly before closing of the body tag include the line.js javascript file that we created inside the js folder.
<script src="js/line.js"></script>
So, now our line.html file will look like the following.
<!DOCTYPE html> <html> <head> <title>ChartJS - Line</title> <link type="text/css" rel="stylesheet" href="css/default.css" /> </head> <body> <div class="chart-container"> <canvas id="line-chartcanvas"></canvas> </div> <!-- javascript --> <script src="js/jquery.min.js"></script> <script src="js/Chart.min.js"></script> <script src="js/line.js"></script> </body> </html>
Time to write some css that will style the line.html page. Open default.css file and write the following style code.
.chart-container { width: 80%; height: 480px; margin: 0 auto; }
In the above code we are targeting class .chart-container and setting its width, height and margin. Feel free to define your own style. I will always encourage you to experiment with the code and try it yourself.
.chart-container
Now its time to create the line graph.
First we will get the canvas using its id line-chartcanvas by writing the following code.
//get the line chart canvas var ctx = $("#line-chartcanvas");
Now we will define options for the chart. For this we will create an options object variable and set its responsive, title and legend properties.
options
To make the graph responsive we will set responsive to true.
responsive
To create title for the line graph we will set the following for the title data object.
title
true
top
Line Graph
You can check the ChartJS documentation and set some other properties as well. But for this tutorial we will stick to the above mentioned properties.
And lastly, to create legend for the line graph we set the legend property.
legend
bottom
So, the options will look like the following.
//options var options = { responsive: true, title: { display: true, position: "top", text: "Line Graph", fontSize: 18, fontColor: "#111" }, legend: { display: true, position: "bottom", labels: { fontColor: "#333", fontSize: 16 } } };
Now its time to create a data variable that will hold the score of the two teams - TeamA and TeamB for the 5 matches.
data
Each object element of the datasets contains the following properties.
datasets
false
We create a variable chart and instantiate the Chart class. We pass ctx which holds the canvas and a data object.
ctx
The data object contains the type property set to line, data property set to data variable and the options property set to options.
line
$(function(){ //get the line chart canvas var ctx = $("#line-chartcanvas"); //line chart data var data = { labels: ["match1", "match2", "match3", "match4", "match5"], datasets: [ { label: "TeamA Score", data: [10, 50, 25, 70, 40], backgroundColor: "blue", borderColor: "lightblue", fill: false, lineTension: 0, radius: 5 }, { label: "TeamB Score", data: [20, 35, 40, 60, 50], backgroundColor: "green", borderColor: "lightgreen", fill: false, lineTension: 0, radius: 5 } ] }; //options var options = { responsive: true, title: { display: true, position: "top", text: "Line Graph", fontSize: 18, fontColor: "#111" }, legend: { display: true, position: "bottom", labels: { fontColor: "#333", fontSize: 16 } } }; //create Chart class object var chart = new Chart(ctx, { type: "line", data: data, options: options }); });
If we want to limit the minimum and maximum value for the y-axis then we can add the scales property to the options and set the yAxes property.
scales
yAxes
In the following example we are setting the minimum value for the y-axis to -10 and maximum value to 80 and we are also defining the stepSize of 10.
-10
80
stepSize
Click here for the complete code from my GitHub repository.
var options = { scales: { yAxes: [{ ticks: { max: 80, min: -10, stepSize: 10 } }] }, };