Chart.js and Canvas

Index

Home
JavaScript Canvas
Chart.js Documentation
Easily Create Stunning Animated Charts with Chart.js

JavaScript Canvas

1. What does the <canvas> allow a developer to acheive?
   • 2D Charts and graphs.
2. What is the importance of the closing </canvas> tag?
   • Any content between the opening and closing tags is fallback content that will display only if the browser doesn’t support the <canvas> element.
3. Explain what the getContext() method does.
   • The <canvas> element features the getContext() method that returns a render context object.
     The getContext() takes one argument which is the type of context. For example, you use the 2d to get a 2D rendering context object, which is an instance of the CanvasRenderingContext2D interface.
     The 2D rendering context allows you to draw shapes, text, images, and other objects.
     The following example shows how to select the canvas element using the querySelector() method and access the drawing context by calling its getContext() method:

   let canvas = document.querySelector('#canvas');
   let ctx = main.getContext('2d');
   

Chart.js Documentation

1. What is Chart.js and how it can be brought into your project?
   • Chart.js is a free JavaScript Library used to make HTML-based charts. You can get the latest version of Chart.js from npm , the GitHub releases, or use a Chart.js CDN. Detailed installation instructions can be found on the installation page.
2. List 3 different Chart types you can create using Chart.js.
   • Area Chart
   • Bar Chart
   • Bubble Chart
   • Doughnut and Pie Charts
   • Line Chart
   • Mixed Chart Types
   • Polar Area Chart
   • Radar Chart
   • Scatter Chart

Easily Create Stunning Animated Charts with Chart.js

1. What are some advantages to displaying data via a chart over a table?
   • Charts are far better for displaying data visually than tables and have the added benefit that no one is ever going to press-gang them into use as a layout tool. They’re easier to look at and convey data quickly.
2. How could Chart.js aid your previously created applications visually?
   • When creating the tables for sales data in the cookie-stand project, charts could have greatly imporoved the understanding of the data. The totals were easy to derive but the comparisons between the different stores were nearly impossible to make without first studying the information. Charts could make that understanding come quick as a whip.

Back to Top