mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-07 04:39:06 +02:00
105 lines
2.3 KiB
HTML
105 lines
2.3 KiB
HTML
|
<!doctype 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>
|