Practice: kiosk dashboard

Two canvases.

Two canvases. Enable Chart.js under Libraries, wait until it is checked, then paste the whole editor.

Goal

Run every block and confirm the chart is visible.

document.body.innerHTML = '<canvas id="a" width="400" height="220"></canvas><canvas id="b" width="400" height="220"></canvas>';
new Chart(document.getElementById("a"), { type: "bar", data: { labels: ["Nairobi", "Mombasa", "Kisumu", "Nakuru", "Eldoret"], datasets: [{ label: "units", data: [21, 15, 15, 18, 12] }] }, options: { responsive: false } });
new Chart(document.getElementById("b"), { type: "line", data: { labels: ["Jan", "Feb", "Mar", "Apr"], datasets: [{ label: "Nairobi mm", data: [48, 55, 92, 150] }] }, options: { responsive: false } });
console.log("dashboard");
document.body.innerHTML = '<canvas id="c" width="420" height="260"></canvas>';
new Chart(document.getElementById("c"), {
  type: "bar",
  data: { labels: ["Nairobi", "Mombasa", "Kisumu", "Nakuru", "Eldoret"], datasets: [{ label: "units", data: [21, 15, 15, 18, 12], backgroundColor: "#1d4f7a" }] },
  options: { responsive: false }
});
console.log("bar again");
document.body.innerHTML = '<canvas id="c" width="420" height="260"></canvas>';
new Chart(document.getElementById("c"), {
  type: "line",
  data: { labels: ["Jan", "Feb", "Mar", "Apr"], datasets: [{ label: "Nairobi", data: [48, 55, 92, 150] }] },
  options: { responsive: false }
});
console.log("line");
console.log('practice');