COVID-19 : Build Basic Chart with HTML5 and ChartJS

If you want to put up a chart in your website showing countries or states including information about the infected, death and recovered patients you can use chart.js.

This tutorial will show you basic introduction of the ChartJS and practically using it to create a basic interactive chart.

Introduction To ChartJS: It's a flexible and simple javascript charting for developers and designers. You can create bar charts, pie charts, doughnut, polar area char etc. All the chart create with chart.js are interactive. You get out of the box stunning transitions when changing data, updating colours and adding datasets.

Animate with ChartJS

If you want to go into more depth of this tool visit : https://www.chartjs.org

For this tutorial we will get our data from TheGuardian website. This data represents the total deaths due to the COVID-19 pandemic in different states of The United States.

I am using visual studio code as a code editor and a live server to run the file. It’s very simple and easy chart so we will only need one html file.

Create your html file in your favourite code editor.

Import Chart.js :

Get the script from https://www.chartjs.org/docs/latest/ :

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>

Add this to you body:

Here we are creating a div called container and a canvas with myChart as id.

<div class="container">
<canvas id="myChart"></canvas>
</div>
<script>
let myChart = document.getElementById('myChart').getContext('2d')
let masspopChart = new Chart(myChart,{
type:'bar', //bar,horizontal,pie,line,polar area 
data:{
labels:['Washington','New Jersey','Louisiana','Michigan','California','Georgia','Illinois','Florida','Massachusetts','Colorado',
'Pennsylvania','Texas','Connecticut','Indiana','Ohio','Virginia','Wisconsin','Arizona','Oklahoma','South Carolina',
'Nevada','Mississippi','Missouri'], //names of the states
datasets:[{
label:'Death', //name of the data
//The Data in array corresponds to each states
data:[
965,
198,
161,
151,
132,
124,
80,
66,
56,
48,
47,
41,
37,
34,
32,
29,
20,
18,
17,
16,
16,
15,
14,
13
],
backgroundColor:'red' //background colour of the chart
}]
}
})
</script>

You can add multiple labels and different datas for different labels inside dataset to compare.