Skip to content

Instantly share code, notes, and snippets.

@sundlee

sundlee/line chart.js example

Created August 19, 2020 07:57
Show Gist options
  • Save sundlee/6ccece35c210788aa55dff04572cb9e6 to your computer and use it in GitHub Desktop.
Save sundlee/6ccece35c210788aa55dff04572cb9e6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
line chart.js example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Line Chart - example 2</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
</head>
<body>
<div style="width:600px;">
<canvas id="canvas"></canvas>
</div>
<script>
var chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(231,233,237)'
};
// var randomScalingFactor = function() {
// return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
// }
// var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var config = {
type: 'line',
data: {
labels: [
'21:18',
'21:21',
'21:24',
'21:27',
'21:30',
'21:33',
'21:36',
'21:39',
'21:42',
'21:45',
'21:48',
'21:51',
'21:54',
'21:57',
'22:00',
'22:03',
'22:06',
'22:09',
'22:12',
'22:15',
'22:18',
],
datasets: [{
label: "Max",
backgroundColor: chartColors.red,
borderColor: chartColors.red,
data: [
218553,
225036,
219136,
208857,
208311,
217752,
217374,
219004,
222951,
205847,
209999,
220000,
213161,
219075,
218976,
217450,
210103,
218799,
229614,
89213,
20578
],
fill: false,
}, {
label: "Mean",
fill: false,
backgroundColor: chartColors.blue,
borderColor: chartColors.blue,
data: [
198423,
194891.6667,
195383,
195666.1667,
195328.8333,
194413.1667,
193935.6667,
188126.1667,
194357,
191473.8333,
197894.3333,
192809.6667,
191066.1667,
194425.6667,
195712.6667,
193960.3333,
193550.5,
200437,
182289.5,
25700.5,
19018
],
}, {
label: "Min",
fill: false,
backgroundColor: chartColors.green,
borderColor: chartColors.green,
data: [
178293,
169318,
171764,
176490,
169320,
171797,
164117,
166467,
166559,
177929,
176641,
169532,
169405,
173262,
172692,
171283,
179508,
184561,
106994,
7170,
16857,
],
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Concurrent users (#)'
},
tooltips: {
mode: 'label',
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
// scaleLabel: {
// display: true,
// labelString: 'Time'
// }
}],
yAxes: [{
display: true,
// scaleLabel: {
// display: true,
// labelString: 'Value'
// }
}]
}
}
};
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment