Embedded Files
Two series of data on one graph
Two series of data on one graph
In the example below we create two arrays so that two different lines are displayed on the graph.
The example below replicates a science experiment, measuring water temperature each minute.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
</head>
<style>
#layout {
width: 400px;
height: 400px;
}
</style>
<body>
<div id="layout">
<canvas id="myChart" width="400" height="400"></canvas>
</div>
</body>
</html>
<script>
var count = [0, 1, 2, 3, 4];
var test1 = [2, 12, 5, 3, 8];
var test2 =[1,56,23,22,67];
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line', //pie,line
//start of data objects
data:
//Data set 1
{
labels: count,
datasets: [{
label: 'Temp - Test 1',
data: test1,
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)'
],
borderWidth: 1
},
//Data set 2
{
label: 'Temp - Test 2',
data: test2,
backgroundColor: [
'rgba(105, 200, 132, 1)'
],
borderColor: [
'rgba(105, 200, 132, 1)'
],
borderWidth: 1
}
]},
//end data set
options: {
responsive: true,
maintainAspectRatio: true,
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Temperature'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Minutes'
}
}]
}
}
});
</script>
Report abuse