reading-notes

My reading journal for Code Fellows.


Project maintained by mattlarkin8 Hosted on GitHub Pages — Theme by mattgraham

Chart.js and Canvas

Charts

Chart.js is a JavaScript plugin that works with HTML Canvas to create charts on the webpage. This is a very useful tool because charts are much better options for conveying data than lists or tables. To use chart.js, you have to download the plugin and store it in your working directory, then import the script for it to your html page.

Once you’ve got the tool set up, you can use it to create line charts, pie charts, and bar charts using commands like .Line(), .Pie(), and .Bar(). The ability to create these different charts will help you display and convey data to users much better and with a nicer appearance too.

Canvas

The <canvas> element has only the height and width attributes, which can also be set using DOM manipulation. It creates a fixed-size drawing surface which can be used to display various different content depending on what you render on it. As we talked about above, you could use it to draw charts, but it is not limited to just that.

If we want to draw something on the canvas, we need to first get DOM access to it using getContext(). This command only has one parameter to specify, which is the type of context such as ‘2d’. Once you are in the DOM and have the context, you are able to go ahead with drawing on the canvas.

Things I want to know more about

Chart.js seems like it will be a really neat tool to use. I think it will be great to ba able to use charts to display data instead of being stuck with lists or tables. I’m looking forward to seeing some examples and getting some practice using it.