reading-notes

Chart.js, Canvas

JS: Canvas

• What does the <canvas> allow a developer to acheive?

Allows a developer to draw 2D graphics using JavaScript.

• What is the importance of the closing </canvas> tag?

The closing tag is required because whatever is put inside of the <canvas> tag will be displayed as fallback content if the browser doesn’t support the <canvas> element.

• Explain what the getContext() method does.

The getContext() method returns a rendered context object drawn in the <canvas>. It takes one argument such as '2D' which will return a 2D redering context object.

Chart.js

• What is Chart.js and how it can be brought into your project?

Chart.js is a charting library for JavaScript. It provides built in chart-types, plugins and customization options that can be rendered on the HTML <canvas> element. It can be brought to a project using npm install, cdnjs or jsDelivr.

• List 3 different Chart types you can create using Chart.js.

Area Charts, Bar Charts and Pie Charts.

Animated Charts with Chart.js

• What are some advantages to displaying data via a chart over a table?

Charts are visually better for displaying data because they are easier to read and convey data much more efficiently than in a table.

• How could Chart.js aid your previously created applications visually?

I could use Chart.js in my salmon cookies application to make the sales data much more easier to read by creating a bar chart.

References

JavaScript Canvas

Chart.js

Easily Create Stunning Animated Charts with Chart.js

Things I want to know more about

• Using Chart.js in my project

• What kind of content can be drawn with the <canvas> element