Why this matters: This information matters because Chart.js and the canvas
element allow developers to display information and data in more detailed visualizations.
Source: https://www.javascripttutorial.net/web-apis/javascript-canvas/
1. What does the <canvas>
allow a developer to acheive?
It is an HTML 5 element that allows you to draw 2D graphics using JavaScript.
2. What is the importance of the closing </canvas>
tag?
The closing tag encloses the fallback content that displays if a browser doesn’t support the <canvas>
element.
3. Explain what the getContext()
method does.
It returns a render context object by taking one argument (the type of context). For example, if you use 2d
inside of getContext()
, you will get a 2D rendering context object via drawing shapes, text, images, and other objects.
Source: http://www.chartjs.org/docs/
1. What is Chart.js and how it can be brought into your project?
Chart.js is an open-source, MIT licensed, community maintained JavaScript librar/plugin used for data visualization. It utilizes HTML 5’s canvas element to draw the graph onto the page.
You can use Chart.js directly or leverege well-maintained wrapper packages that allow for a more native integratin with your framework of choice.
2. List 3 different Chart types you can create using Chart.js.
Area Chart, Bar Chart, and Bubble Chart are 3 examples.
Source; https://www.webdesignerdepot.com/2013/11/easily-create-stunning-animated-charts-with-chart-js/
1. What are some advantages to displaying data via a chart over a table?
They’re better for displaying data visually and they aren’t ever forced to be used as a layout tool.
2. How could Chart.js aid your previously created applications visually?
It could enable me to add more detailed graphs and charts to display information and data. In the example in the reading, the author uses a line chart to display a product’s number of buyers over time, a pie chart showing which countries the product’s customers are from, and a bar chart to show profit over a period of time.
Nothing at the moment!