Chart.js charts (Linear thermometer chart, Back-to-back Horizontal Chart & Super Pie Chart)
Posted on Tuesday, December 1st, 2020
Client | Applicate |
Professor(s) | Melissa Sienkiewicz, |
Program | Computer Programmer |
Students | Nazia Sultana (040931556) Dong Chen (040908655) Dishita Trivedi (040934875) Ramandeep Ramandeep (040955866) Yves Ferland (040950362) |
Project Description:
In our project, we created 3 chart.js charts which are the linear thermometer chart, back-to-back horizontal chart, super pie chart extending the current chart.js charts and using JavaScript, Node.js and HTML5 Canvases. Applicate who is our client wanted us to implement new charts which do not exist as chart.js chart. Also, the super pie chart exists in version 1 in chart.js but which is really old now so we were told to upgrade it to version 3. We decided to develop two new charts which are the linear thermometer and the back-to-back horizontal chart and upgrade the super pie chart. We implemented the linear thermometer chart in chart.js version 3 by extending the existing chart.js bar chart which shows the temperature. The back-to-back horizontal chart is created extending the horizontal bar chart which can display values on both sides of Y axes. In a super pie chart, each slice is divided into more slices to display data effectively. Super pie chart has been upgraded to version 3. Datasets can be enabled/disabled for all three charts.
Working on this project was a great experience and learning opportunity for us as we could learn about chart.js charts. We could successfully apply HTML5 Canvas, JavaScript and Node.js in our project successfully.
Although Applicate is the client of the project, the final product will be open-source and anyone can use them as chart.js charts are available under the MIT license. These chart.js charts are customizable, easy to use and can be added to any project with minimal effort i.e. it is easy to integrate into existing code. These charts are responsive, include legend, hover pop-ups and offer great performance for data visualization. When using these charts, the users can customize the colors as per their choice.
Short Description:
We created 3 chart.js charts which are the linear thermometer chart, back-to-back horizontal chart and super pie chart extending the current chart.js charts and using JavaScript, Node.js and HTML5 Canvases.
Gallery
Funded By