Embedded Files
Graph.js is an external library we can use to draw charts including bar, line and pie. It has a range of properties that can be edited to display data in a meaningful way.
Getting Started - https://www.chartjs.org/docs/latest/
Insert the following code at top of HTML to download chart.js into the browser's memory
New code:
<script src="
https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js
Watch these videos ..
Watch these videos ..
Static Example Chart - Use this template to get started.
Static Example Chart - Use this template to get started.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Practice Exercise 1</title>
<!-- below are the links to Bulma and Chart.js -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.1/css/bulma.min.css"
integrity="sha512-dF4b2QV/0kq+qlwefqCyb+edbWZ63ihXhE4A2Pju3u4QyaeFzMChqincJsKYwghbclpLE92jPb9yaz/LQ8aNlg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="
https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js
"></script>
</head>
<style>
#chartArea{
width:50%;
}
</style>
<body>
<section class="section">
<div class="container">
<!-- start content -->
<h1 class="title">
Basic Graph Display
</h1>
<!-- create a div for the chart display called chartArea. This div can then be sized to restrict chart width with css-->
<div id="chartArea">
<!-- create a canvas element for the chart called basicChart. this is where the chart will go -->
<canvas id="basicChart"></canvas>
</div>
<!-- end content -->
</div>
</section>
<!-- below is the script for the chart -->
<script src="script.js"></script>
</body>
</html>
const chart1 = document.getElementById("basicChart"); //find and reference the canvas identifer in the HTML space
//new chart object
new Chart(chart1, {
type: 'bar', //type of chart could be bar, line, pie etc.
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], //x axis labels as an array
datasets: [{
label: '# of Votes', //data set label
data: [12, 19, 3, 5, 2, 3], //y values as an array that match the labels array by index position
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
Report abuse