Reading Journal
This topic is important because it allows us to style our webpages in ways that would not be possible otherwise. It also allows us choose from different charts or tables in order to convey our data to the end user. Since the <canvas> tag is native to HTML, we have less to worry about in terms of browser compatability.
Reading
JavaScript Canvas
1. What does the <canvas> allow a developer to achieve?
- It allows us to create 2d graphics or animations directly in the browser. It’s also able to achieve a more responsive design by adapting to the end user’s screen size. Since this is an HTML element, it also allows for quicker load times and simpler, cleaner code.
2. What is the importance of the closing </canvas> tag?
- The closing tag must be respected in that it tells the browser the fallback content if the browser doesn’t support the
<canvas> element. If the browser tag isn’t supported, then whatever content is between the opening and closing <canvas> element is what will be displayed.
3. Explain what the getContext() method does.
- The
getContext() method is used within the <canvas> element to access and allow renderization on the HTML document through JavaScript. Within the getContext method you can also specify attributes if needed.
Chart.js Documentation
1. What is Chart.js and how can it be brought into your project?
- Chart.js is a charting tool used in JavaScript. It allows the use of different types of charts, even being able to mix chart types into the same element. It might be able to be used to create a calendar or when displaying fundraisers goals vs amount currently raised.
2. List 3 different Chart types you can create using Chart.js.
- Chart.js can display many different chart types. Three different chart types available are bar charts, scatter plot charts, and line charts.
Easily Create Stunning Animated Charts with Chart.js
1. What are some advantages to displaying data via a chart over a table?
- Charts are generally simpler for a viewer to grasp the concept trying to be conveyed. They are also more effective when trying to convey large amounts of data, trends, or comparisons.
2. How could Chart.js aid your previously created applications visually?
- It could help render the table created in Salmon-Cookies to be more easily readable. The table has a large amount of data and it takes some time in order to understand what is trying to be conveyed. A bubble chart could convey total sales per store for a quick reference and comparison. A bar chart could be used for total hourly sales across each store. Either of these charts would aid in readability for the end user.
Things I want to know more about.
I want to learn how to implement these various charts into webpages in meaningful and informational ways. I’d love to see examples of the various charts and their suggested use cases.