Day 28: PokeDex Day 3

Lesson 1: PokeDex 9

The eagle-eyed amongst you will have spotted this line in the HTML I gave you.

1<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

This pulls in a third party library called ChartJS - Click the link and take a quick look at it, then come back.

Pretty cool right?

It's a library that helps us make charts, be them bar charts, line charts, pie charts etc.

We are going to plot each Pokemon's stats on a chart at the bottom of the modal. Each Pokemon has 6 stats:

1. Health Points (HP)
2. Attack
3. Defense
4. Special Attack
5. Special Defense
6. Speed

With a value from 1 to 255. We are going to show them on a bar chart.

Let's go ahead and just get placeholder chart up and running.

Firstly we need to save a reference to the chart we create so add this near the top just after let pokemonArray = [];

1let currentChart;

Please add this function to your JavaScript:

1const renderChart = () => {
2  const chartCanvas = document.getElementById("statsChart");
3
4  currentChart = new Chart(chartCanvas, {
5    type: "bar",
6    data: {
7      labels: ["HP", "Attack", "Defense", "Special A", "Special D", "Speed"],
8      datasets: [
9        {
10          label: "Value",
11          data: [59, 63, 80, 65, 80, 58],
12          borderWidth: 1,
13        },
14      ],
15    },
16    options: {
17      plugins: {
18        legend: {
19          display: true,
20        },
21      },
22      scales: {
23        y: {
24          beginAtZero: true,
25          max: 255,
26        },
27      },
28    },
29  });
30};

This gets a reference to the chart just like you are used to and stores it in chartCanvas.

We then call the Chart constructor (remember those from Day 12? I told you they weren't used that often but they do come up) which creates an instance of Chart.

The Chart constructor 2 arguments, the DOM element to render the chart and a big object with all the chart data an information.

That second object is pretty easy to understand if you take a minute to look at it. The basic structure is:

1{
2    type: "bar",
3    data: {
4      ...
5    },
6    options: {
7      ...
8    }
9  }

type is set to bar for bar chart.

data has a labels property which will be the names of the vertical bars for our bar chart and then an array of data sets.

options has a whole host of options, the thing we care the most about here though is setting the y-axis scale to a maximum value of 255 and starting it at 0.

We need to call renderChart, add a call to it in showModal right after modalImage.src = foundPokemon.sprites.front_default;

1renderChart();

And because we use the same DOM element to render charts for different Pokemon each time, we open the modal we need to destroy the chart when we dismiss the modal.

So add this line to dismissModal inside the if statement:

1currentChart.destroy();

Go ahead and click any Pokemon to see this chart in action 😊