reading-notes

Chart.js, Canvas

JavaScript Canvas

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

It allows a developer to create a ‘canvas’ to draw on using JavaScript.

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

Anything inside the beginning and closing canvas tags are ‘fallback content’ that will only display to the user if the browser doesn’t suppport the <canvas> element.

1. Explain what the getContext() method does.

The getContext() method grabs the metaphorical ‘paintbrush and palette’ for drawing on a 2D plane on the canvas element.

Chart.js Documentation

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

Chart.js is a tool we can use to draw charts and graphs on the <canvas> element of and HTML document. We can bring it into a project by downloading a copy Chart.js, creating a <canvas> in the HTML file, and then importing the .js file to the HTML doc.

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

   1. Line chart
   2. Pie chart
   3. Bar chart

Easilly Create Stunning Animated Charts with Chart.js

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

Charts have the advantage of being easier to read and can display data visually in ways that are impossible in a table.

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

On the Salmon Cookies lab, I could’ve made bar charts to visually display sales across every branch, which would’ve provided a visual scale to make comparisons much simpler.

Bookmark and Review:

Drawing Shapes with Canvas

Applying Style and Colors

Drawing Text - Canvas API

Things I want to know more about

• Are line, bar, and pie charts the only kinds of charts we can make in Chart.js?

This site is open source. Improve this page.