Code 201: Class 201 - Reading 12 Docs for the HTML Element and Chart

Read: Chart.js API Article

Chart.js a javascript plugin

Uses HTML5’s canva element to draw the graph onto the page

Setup

Download Chart.js
Copy Chart.min.js into target directory

Create new html page with following

<head>
  <meta charset="tf-8" />
  <title> Chart.js demo</title>
  <script src="Chart.min.js"></script>
  </head>

Provide an html element to hold a line chart
- <canvas id="lineChartId" width="600" height="400"></canvas>

Add script to retrieve the context of the canvas

<script>
  var example = document.getElementById('lineChartId'). getContext('2d');
  new Chart(example).Line(exampleData);
</script>

Provide the data

var exampleData = {
  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]
    }
  ]
}
  

Can also draw bar charts and pie charts with similar setup

Read: Chart.js Docs

Download link: https://www.chartjs.org/docs/latest/

Read: Basic Usage

Default size will be 300px x 150px, but can be set by CSS (need to match ratio 2:1)
Default background is transparent
Placing fall back text or an image between the <canvas>Fallback text</canvas> tags will give the user a placeholder info if their browser doesn’t support chart.js

Read: Drawing Shapes with Canvas

The Grid
- Top left corner of the canvas element is 0,0 locate items Xpx over and Ypx down
- Drawing rectangles
  - fillRect(x, y, width, height) Draws a filled rectangle
  - strokeRect(x, y, width, height) Draws a rectangular outline
  - clearRect(x, y, width, height) Clears the specified area, making it fully transparent
  - X,Y indicates the top left corner of the rectangle
- Drawing Paths
  - beginPath() Creates a new path
  - Path methods, set different paths for objects
  - ClosePath() Adds a straight line to the path, going to the start of the current sub-path
  - stroke() Draws a solid shape by filling the path’s content area
  - moveTo(X, Y) Moves the pen to coordinates specified by x and y
  - `lineTo(X, Y) Draws a line from current location to specified location
  - arc(x, y, radius, startAngle, endAngle, anticlockwise) Draws an arc which is centered at (X,Y) with radius r. Default direction is clockwise
  - arcTo(x1, y1, x2, y2, radius) Draws and arc with the given control points and radius, connected to the previous point by a straight line
  - Example of drawing a triangle:
```
function draw() {
  var canvas = document.getElementByID('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75,50);
    ctx.moveTo(100, 75);
    ctx.moveTo(100,25);
    ctx.fill();
  }
}
```

Read: Applying Styles and Colors

Colors

fillStyle = color sets the style used when filling shapes
strokeStyle = color sst the style for shapes’ outlines
Default color is black = #000000
globalAlpha Sets the default transparency value for colors in the canvas element

Line Styles

lineWidth = value sets the width of lines drawn in the futuer
lineCap = type sets the appearance of th ends of lines
lineJoin = type sets the appearance of the corners where lines meet
miterLimit = value establishes a limit on the miter when two lines join at a sharp angle
getLineDash() returns the current line dash pattern array containing an even number of non-negative numbers
setLineDash(segments) sets the current line dash pattern
lineDashOffset = value specifies where to start a dash array on a line

Gradients

createLinearGradient(x1,y1,x2,y2) creates a linear gradient from start point to end point
createRadialGradient(x1, y1, r1, x2, y2, r2) creates a radial gradient, parameters represent two circles one with its center at first coordinates and radius of r1 and other with center at second coordinates and radius of r2
gradient.addColorStop(position, color) Position is number between 0 and 1 defining relative position of each color, may have multiple color stops

Read: Drawing Text

Text

fillText(text, x, y[, maxWidth]) fills a given text at the given position optionally it a max width draw
strokeText(text, x, y[, maxWidth]) strokes a given text at the given position and optionally with a maximum width draw

Return to reading-notes Deployed Site

Return to reading-notes Mark Down