dd9788fa73
I was having trouble tracking the growth of corona virus cases in the UK. Thankfully someone is publishing some daily COVID data as JSON. I downloaded that data manually and plotted it using the chart.js library as a programming exercise with Mimi. Now I'm attempting to deploy to https://wpcarro.dev/covid-uk. TODO(wpcarro): Prefer the live API data instead my soon-to-be-stale downloaded.
46 lines
1.1 KiB
HTML
46 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Covid UK</title>
|
|
</head>
|
|
<body>
|
|
<canvas id="myChart" width="400" height="400"></canvas>
|
|
<script src="./node_modules/chart.js/dist/Chart.bundle.min.js"></script>
|
|
<script>
|
|
var timeseries =
|
|
fetch('./timeseries.json')
|
|
.then(res => res.json())
|
|
.then(createChart);
|
|
|
|
function createChart(data) {
|
|
var uk = data["United Kingdom"];
|
|
var data = uk.map(x => x["confirmed"])
|
|
var labels = uk.map(x => x["date"])
|
|
|
|
var ctx = document.getElementById('myChart').getContext('2d');
|
|
var myChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: 'Number of confirmed COVID-19 cases in the U.K.',
|
|
data: data,
|
|
backgroundColor: 'rgba(255, 0, 100, 0.2)',
|
|
borderWidth: 3
|
|
}]
|
|
},
|
|
options: {
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
beginAtZero: true
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|