This is important because…
adding charts is a good tool to use and incorporate into the the structure of a website to enage the users attention and break up blocks of text and raw data when present.
Knowing how to add charts is equally important, becasue then we are given the knowledge to modify and customize charts as needed.
<canvas> is a feature of HTML5 that allows one to draw 2D graphics through the use of JavaScript.
<canvas width="300" height="300" id="canvas">fallback content</canvas>
It requires two attribute, width and height, which are accessible / able to be modified through DOM properties like other elements.
const canvas = document.querySelector('#canvas');
const width = canvas.width; // 300
const height = canvas.height; // 300
//
canvas.width = 400;
canvas.height = 400;
Although rare to find a browser that does not offer support for the <canvas> element; if used on a browser that does not, any content within the element tags will be considered fallback content and will display to the user (see earlier example).
<canvas> is blank until used to access context to draw/display on file; done through the getContext() method.
First the element/id must be selected, then we pass one argument to access the ‘drawing content’ style of choice through getContext().
let canvas = document.querySelector('#canvas');
// why not `getElementById()`??
let ctx = main.getContext('2d');
// is the variable/property meant to be main or canvas??
// is this meant to be refrencing the `main` element on the page? if so, why select the `#canvas` id?
Think x and y axis; bottom right of a 4 quadrant, positive and negative chart.
Top left is (0, 0). Normally the y value, as it grows, would get ‘smaller’ in negative terms, but since there is no negative; the value defaults to positive integer.
<canvas> allow a developer to achieve?
</canvas> tag?
<canvas> element, content within element is fallback content that will display, most modern browsers support element; needed to avoid rendering/layout issues.getContext() method does.
The most popular of the charting libraries hosted on Github and available through npm (JavaScript package manager; subsidiary of GitHub, central to JavaScript community).
Incorporating a chart through Chart.js is as easy as can be thanks to sets of frequently used chart types, plug-ins, and various other customization settings and options being easily available and accessible.
Includes a strong, actively developed and maintained community backbone with plenty of documentation to learn plenty about anything.
Chart.js works well and adapts to large datasets, reduces toll taken on DOM tree when rendering canvas, in comparison to other methods like SVG rendering.
script element on top of page, can be downloaded.Superior method to visually display data over raw datasets, regardless of table stylings done. Much easier and faster at representing data trends visually.
Chart.js simplifies the creation process. A method of linking to working fileset is through direct download and then linking in <head> element through <script> element.
<canvas> element is added to html file with id, width, height attributes so Chart.js knows where chart will generate.
<canvas id="lineChart" width="600" height="400"></canvas>
(from here, reading includes JS through <script> tags within html, but can also / should also be done through external JS file.)
A variable is created that will contain the linked id, as well as the context for what kind of chart will be created (2D, Line).
var lineChart = document.getElementById('lineChart').getContext('2d');
new Chart(lineChart).Line(buyerData);
We continue with creating/plugging in the data. This example will use an object containing labels and the dataset. This object’s placement will go above our previous variable.
var lineData = {
labels : ["January","February","March","April","May","June"],
datasets : [
{
fillColor : "rgba(172,194,132,0.4)",
strokeColor : "#ACC26D",
pointColor : "#fff",
pointStrokeColor : "#9DB86D",
data : [203,156,99,251,305,247]
}
]
}
Similar steps are taken for a pie chart; only swapping in
new Chart(countries).Pie(pieData, pieOptions); rather than .Line and the dataset definition as well as the options for the chart,
var pieData = [
{
value: 20,
color:"#878BB6"
},
{
value : 40,
color : "#4ACAB4"
},
{
value : 10,
color : "#FF8153"
},
{
value : 30,
color : "#FFEA88"
}
];
var pieOptions = {
segmentShowStroke : false, // remove stroke from segments
animateScale : true // animate scale of pie so it zooms out from nothing
}
As for a bar chart; similarities are shared with a line chart. Although, again we define .Bar in
var income = document.getElementById("income").getContext("2d");
new Chart(income).Bar(barData);.
The data set definitions is largely the same,
var barData = {
labels : ["January","February","March","April","May","June"],
datasets : [
{
fillColor : "#48A497",
strokeColor : "#48A4D1",
data : [456,479,324,569,702,600]
},
{
fillColor : "rgba(73,188,170,0.4)",
strokeColor : "rgba(72,174,209,0.4)",
data : [364,504,605,400,345,320]
}
]
}
Plenty more examples and options to choose and learn from founf in the documentation.