chart.js
Version:
Simple HTML5 charts using the canvas element.
105 lines (96 loc) • 2.32 kB
HTML
<html>
<head>
<title>Line Chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="../../../dist/Chart.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width:1000px">
<canvas id="chart1"></canvas>
<div>
<br>
<br>
Chart Type:
<select id="type">
<option value="line">Line</option>
<option value="bar">Bar</option>
</select>
<button id="update">update</button>
<script>
function randomNumber(min, max) {
return Math.random() * (max - min) + min;
}
function randomBar(date, lastClose) {
var open = randomNumber(lastClose * .95, lastClose * 1.05);
var close = randomNumber(open * .95, open * 1.05);
var high = randomNumber(Math.max(open, close), Math.max(open, close) * 1.1);
var low = randomNumber(Math.min(open, close) * .9, Math.min(open, close));
return {
t: date.valueOf(),
y: close
};
}
var dateFormat = 'MMMM DD YYYY';
var date = moment('April 01 2017', dateFormat);
var data = [randomBar(date, 30)];
var labels = [date];
while (data.length < 60) {
date = date.clone().add(1, 'd');
if (date.isoWeekday() <= 5) {
data.push(randomBar(date, data[data.length - 1].y));
labels.push(date);
}
}
var ctx = document.getElementById("chart1").getContext("2d");
ctx.canvas.width = 1000;
ctx.canvas.height = 300;
var cfg = {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: "CHRT - Chart.js Corporation",
data: data,
type: 'line',
pointRadius: 0,
fill: false,
lineTension: 0,
borderWidth: 2
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
distribution: 'series',
ticks: {
source: 'labels'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Closing price ($)'
}
}]
}
}
};
var chart = new Chart(ctx, cfg);
document.getElementById('update').addEventListener('click', function() {
var type = document.getElementById('type').value;
chart.config.data.datasets[0].type = type;
chart.update();
});
</script>
</body>
</html>