Creating our first chart

Before we integrate with our server, let's create a chart with dummy data to see how it works.

Chart.js works on the HTML canvas. The canvas element was included in the HTML5 standard, and it makes use of the GPU to render pictures and visual elements at an accelerated pace. This ultimately leads to a better experience when viewing the resultant charts, even with considerable amounts of data.

Let's start by placing our canvas elements in our dashboard. This is how our updated index.html file will look:

    <!DOCTYPE html>    <html lang="en">    <head>      <title></title>      <meta charset="UTF-8">      <meta name="viewport" content="width=device-width,     initial-scale=1">      <!--The stylesheet is added here. We haven't made it yet, so don't ...

Get Full Stack Web Development with Raspberry Pi 3 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.