Hey Geeks today we are going to see how to implement Bar chart and Pie chart using Chart.js. Bar Chart and Pie chart are very useful for showing visual measurements and comparisons between varied values and huge amount of data. Due to this quick analysis is possible saving a lot of time and efforts when done manually. So lets get started and see how to acheive this and become a novice to ninja.
For implementing Bar chart and Pie chart, we are going to use latest version of Chart.js. You can download it and use it in your project.
Now lets take an example for comparisons of number of sales between months. We will see the comparison of sales in Bar and Pie chart.
Here in the code given for Bar chart, we have added canvas element for bar chart in html. As you can see in JS, the type is ‘bar’. So if you set the type to ‘pie’, we will get the pie chart for same data. Don’t forget to include chart.js in the view file or html page otherwise the canvas will be taken as undefined.
We have included the code :
context.canvas.width = 500;
context.canvas.height = 200;
It sets the height and width of the chart. If you do not add these lines then charts will take the whole space on the view to display. And obviously you don’t want such big size charts.
1. Using charts makes data easy to visualize.
2. Statistical data is easy to understand using charts instead of raw data.
3. Helps to analyse huge data
Latest posts by Amit Kulat (see all)
- Customization in Bar chart Horizontal Bar chart - November 26, 2017
- Implementing Bar chart and Pie chart using Chart.js - November 19, 2017
- SQL Constraint Interview Questions in Sql – Explained with Examples. - November 12, 2017