Chart.js and Canvas
Chart.js
- setting up by download chart.js
- drawing a line chart:
new Chart(name).Line(data); - drawing a pie chart:
new Chart(name).Pie(data, options); - drawing a bar chart:
new Chart(name).Bar(data);
Canvas
the canvas element creates a fixed-size drawing surface that exposes one or more rendering contexts, which are used to create and manipulate the content shown.
- drawing rectangles:
- draws a filled rectangle:
fillRect(x, y, widty, height) - draws a rectanglar outline:
strokeRect(x, y, width, height) - clears the specified rectangular area:
clearRect(x, y, width, height)
- draws a filled rectangle: