Javascript - Visualizing data using chart.js

Visualising data in javascript can be done in a lot of different ways. You can do it just using html, you can use one out of a lot of library, you can draw on a canvas like we did with p5. In some ways data does not need to be visualised, what if some data was connected to sound fx.

In these lectures we will focus mainly on creating graphs using chart.js. Chart.js is a javascript library for creating graphs and it has been selected for these reasons

It sits in the sweetspot between looking pretty and not being to complicated
It is used and recommended by a lot of developers
It covers most basic graph usecases

Another really big and popular datavis library is D3. It is not covered in these lectures, but feel free to try it out!

Learning objectives

Visualising using Chart.js
Get json data into javascript

Teacher instruction

Work in pairs first 20 minutes. Afterwards you decide yourself
Today will be a lot of you exploring the chart.js api and documentation
- This is an essential web developer skill
No code hackathon
Groups for tværfaglig
Reload page

Flipped classroom video

Getting Started With Chart.js

Getting started with graph.js

Setup html

Let's first setup the html so we are ready to use chart.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <link rel="stylesheet" href="main.css"/>
    <title>chart.js datavis</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
</head>
<body>

<main>
    <div>
        <canvas id="chart"></canvas>
    </div>
</main>
<script src="main.js"></script>
</body>
</html>

There are two important things we need to do:

Import the chart.js library. That is done here <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"> It works exactly like when we import our main.js file, the only difference is that the directory of the file is in the cloud. If you want to see the code you can go to https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js. The code is minified which means it has been changed so the file takes up less space. But the javascript enables us to create the graphs
Create a canvas html tag for the graphs to go into. Chart.js uses canvas to draw the graphs. The canvas html object we have worked with when using P5. It is used to draw shapes onto. Wrap the canvas in div tags to make it responsive <canvas id="chart"></canvas>

Setup the javascript

const ctx = document.querySelector('#chart').getContext('2d');
const chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            data: [12, 19, 3, 5, 2, 3],
        }]
    }
});

On the first line we select the canvas using document.querySelector and get the context for the canvas so we can draw on it.

Now we create a new instance of a class called Chart (this is a class we get from importing the chart.min.jsin the head). You dont need to understand classes and instances but if you are interested watch this video. When creating a new Chart, we need to give it two arguments:

The context from the canvas so we can draw on the canvas
An object that will decide everything about how the graph will be shown

The object has 4 top level keys

type: Decides the type of the graph
data: Decides the data to use
options: Used for things like interaction, legends and a lot more
plugins: Can contain plugins

Events

To trigger an event when a click occurs use the following code

options: {
  onClick: (e) => {
    console.log(e)
  },
}

More things

In the documentation it is documented how to do lots of things in chart.js. These are things like

Labels
Legends
Scales
Color
Background

It does not make sense for me to document everything here since the documentation is pretty good.

👉 https://www.chartjs.org/docs/latest/ 👈

There is also a chart.js youtube channel

👉 https://www.youtube.com/c/ChartJS-tutorials 👈

📝 Exercises

Recreate the following graphs. This is an exercise in googling and reading documentation! Help each other in the class aswell!

Make sure you are reading documentation for version 3!!!

📝 Exercise 1 - level 1

📝 Exercise 2 - level 1

📝 Exercise 3 - level 1

📝 Exercise 4 - level 1

📝 Exercise 5 - level 2

📝 Exercise 6 - level 2

📝 Exercise 7

Take one of the visualisations you have created from the data visualisation course and recreate it using chart.js!

📝 Exercise 8 - level 3

When clicking a point it should alert the size and price of the house. This is quite tricky. Lots of googling here!

PreviousJavascript Recap NextJavascript - Visualising data using tones, maps, html and canvas

Last updated 3 years ago

hashtagLearning objectives

hashtagTeacher instruction

hashtagFlipped classroom video

hashtagGetting started with graph.js

hashtagSetup html

hashtagSetup the javascript

hashtagEvents

hashtagMore things

hashtag📝 Exercises

hashtag📝 Exercise 1 - level 1

hashtag📝 Exercise 2 - level 1

hashtag📝 Exercise 3 - level 1

hashtag📝 Exercise 4 - level 1

hashtag📝 Exercise 5 - level 2

hashtag📝 Exercise 6 - level 2

hashtag📝 Exercise 7

hashtag📝 Exercise 8 - level 3