reading-notes

           Welcome to Read: 12

Read: 12 - “Docs for the HTML <canvas> Element & Chart.js”

In this Read: 12, I will talk only about:

• Chart.
  
  

Chart
What is the Chart?
JCharts are far better for displaying data visually than tables and have the added benefit that no one is ever going to press-gang them into use as a layout tool. They’re easier to look at and convey data quickly, but they’re not always easy to create.
A great way to get started with charts is with Chart.js, a JavaScript plugin that uses HTML5’s canvas element to draw the graph onto the page. It’s a well documented plugin that makes using all kinds of bar charts, line charts, pie charts and more, incredibly easy.

• Setting up
  

  
  
  

• Drawing a line chart
  

  
  
  
  
  

• Drawing a pie chart
  

  
  
  
  
  

For more information please see the reference [1].

The <canvas> element
At first sight a <canvas> looks like the <img> element, with the only clear difference being that it doesn’t have the src and alt attributes. Indeed, the <canvas> element has only two attributes, width and height. These are both optional and can also be set using DOM properties. When no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high. The element can be sized arbitrarily by CSS, but during rendering the image is scaled to fit its layout size: if the CSS sizing doesn’t respect the ratio of the initial canvas, it will appear distorted.

• Fallback content
  
  • The <canvas> element differs from an <img> tag in that, like for <video>, <audio>, or <picture> elements, it is easy to define some fallback content, to be displayed in older browsers not supporting it, like versions of Internet Explorer earlier than version 9 or textual browsers. You should always provide fallback content to be displayed by those browsers.
    Providing fallback content is very straightforward: just insert the alternate content inside the <canvas> element. Browsers that don’t support <canvas> will ignore the container and render the fallback content inside it. Browsers that do support <canvas> will ignore the content inside the container, and just render the canvas normally.
    
• Required </canvas> tag
  
  • As a consequence of the way fallback is provided, unlike the <img> element, the <canvas> element requires the closing tag (</canvas>). If this tag is not present, the rest of the document would be considered the fallback content and wouldn’t be displayed.
    If fallback content is not needed, a simple <canvas id="foo" ...></canvas> is fully compatible with all browsers that support canvas at all.
    

For more information please see the references [2].

Drawing shapes with canvas

• The grid
  

  
  
  

• Drawing rectangles
  

  
  
  

• Rectangular shape example
  

  
  
  

For more information please see the references [3].

Read	Title	ToGo
Read: 01	Introductory HTML and JavaScript
Read: 02	HTML Text, CSS Introduction, and Basic JavaScript Instructions
Read: 03	HTML Lists, CSS Boxes, JS Control Flow
Read: 04	HTML Links, CSS Layout, JS Functions
Read: 05	HTML Images; CSS Color & Text
Read: 06	JS Object Literals; The DOM
Read: 07	HTML Tables; JS Constructor Functions
Read: 08	More CSS Layout
Read: 09	Forms and Events
Read: 10	JS Debugging
Read: 11	Assorted Topics
Read: 12	Docs for the HTML canvas Element & Chart.js
Read: 13	Local Storage
Read: 14a	CSS Transforms, Transitions, and Animations
Read: 14b	What Google Learned About Teams