JS Canvas and Chart.js

My reading notes for Code Fellows


JS Canvas and Chart.js

JavaScript Canvas

What does the <canvas> allow a developer to acheive? Canvas allows one to draw 2d graphics.

What is the importance of the closing </canvas> tag? The closing tag allows anything between the opening and closing tag to serve as fallback content for systems that don’t support canvas.

Explain what the getContext() method does. The getContext() method takes one argument, which is the type of context, and returns a rendered context object.

Chart.js Documentation:

What is Chart.js and how it can be brought into your project? Chart.js allows one to use javascript to create charts. All that’s required is the script included in your page along with a single <canvas> node to render the chart.

List 3 different Chart types you can create using Chart.js. There are lots of chart types including, but not limited to:

  • Area Chart
  • Bar Chart
  • Bubble Chart
  • Pie Chart
  • Line Chart
  • Scatter Chart

Easily Create Stunning Animated Charts with Chart.js

What are some advantages to displaying data via a chart over a table? Humans are mainly visual, and charts are an excellent way to convey the value and meaning of information to an audience. Charts are great ways to add proof to an argument by using data to back up one’s point. They are also a great way to see important data in relation to other data, which allows one to hear the proverbial signal through the noise.

How could Chart.js aid your previously created applications visually? Chart.js could improve the layout, colors, fonts, and perfromance of the table I have created. For instance, considering this week’s current project is looking for informationon how each Product was receive as a percentages of the whole, using Chart.js to make a pie chart of the number of views, or a bar chart representing a percentage of views to selections made, can help one better understand the impact each product had on its audience.