Skip to content

Latest commit

 

History

History
32 lines (17 loc) · 1.68 KB

class-12.md

File metadata and controls

32 lines (17 loc) · 1.68 KB

Readings: Chart.js, Canvas

link to artcle, "EASILY CREATE STUNNING ANIMATED CHARTS WITH CHART.JS"

  • The first thing we need to do is download Chart.js. Copy the Chart.min.js out of the unzipped folder and into the directory you’ll be working in. Then create a new html page and import the script:

  • setup

  • To draw a line chart, the first thing we need to do is create a canvas element in our HTML in which Chart.js can draw our chart. So add this to the body of our HTML page:

  • line chart

  • Next, we need to write a script that will retrieve the context of the canvas, so add this to the foot of your body element:

  • Write Script

  • Inside the same script tags we need to create our data, in this instance it’s an object that contains labels for the base of our chart and datasets to describe the values on the chart. Add this immediately above the line that begins ‘var buyers=’:

  • Create Data

Basic Usage

Drawing Shapes with Canvas

Applying styles with Canvas

Drawing Text

Things I want to know more about

  • I want to put what I've read on my pages. It seems prettty difficult, but I'm ready to give it a shot.