2017-09-10 10:54:12 +02:00
<!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 >
2019-01-06 15:56:58 +01:00
< script src = "../../../dist/Chart.min.js" > < / script >
2017-09-10 10:54:12 +02:00
< 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" >
2019-05-15 14:23:09 +02:00
< p > This example demonstrates a time series scale by drawing a financial line chart using just the core library. For more specific functionality for financial charts, please see < a href = "https://github.com/chartjs/chartjs-chart-financial" > chartjs-chart-financial< / a > < / p >
2017-09-10 10:54:12 +02:00
< canvas id = "chart1" > < / canvas >
2018-02-03 13:28:54 +01:00
< / div >
2017-09-10 10:54:12 +02:00
< br >
< br >
Chart Type:
< select id = "type" >
< option value = "line" > Line< / option >
< option value = "bar" > Bar< / option >
< / select >
2019-03-28 07:56:37 +01:00
< select id = "unit" >
< option value = "second" > Second< / option >
< option value = "minute" > Minute< / option >
< option value = "hour" > Hour< / option >
< option value = "day" selected > Day< / option >
< option value = "month" > Month< / option >
< option value = "year" > Year< / option >
< / select >
2017-09-10 10:54:12 +02:00
< button id = "update" > update< / button >
< script >
2019-03-28 07:56:37 +01:00
function generateData() {
2019-05-15 14:23:09 +02:00
var unit = document.getElementById('unit').value;
function unitLessThanDay() {
return unit === 'second' || unit === 'minute' || unit === 'hour';
}
function beforeNineThirty(date) {
return date.hour() < 9 | | ( date . hour ( ) = = = 9 & & date . minute ( ) < 30 ) ;
}
// Returns true if outside 9:30am-4pm on a weekday
function outsideMarketHours(date) {
if (date.isoWeekday() > 5) {
return true;
}
if (unitLessThanDay() & & (beforeNineThirty(date) || date.hour() > 16)) {
return true;
}
return false;
}
2019-03-28 07:56:37 +01:00
function randomNumber(min, max) {
return Math.random() * (max - min) + min;
}
2017-09-10 10:54:12 +02:00
2019-03-28 07:56:37 +01:00
function randomBar(date, lastClose) {
var open = randomNumber(lastClose * 0.95, lastClose * 1.05).toFixed(2);
var close = randomNumber(open * 0.95, open * 1.05).toFixed(2);
return {
t: date.valueOf(),
y: close
};
}
2017-09-10 10:54:12 +02:00
2019-03-28 07:56:37 +01:00
var date = moment('Jan 01 1990', 'MMM DD YYYY');
var now = moment();
2019-04-01 17:30:58 +02:00
var data = [];
2019-05-15 14:23:09 +02:00
var lessThanDay = unitLessThanDay();
2019-10-19 22:13:04 +02:00
for (; data.length < 600 & & date . isBefore ( now ) ; date = date.clone().add(1, unit ) . startOf ( unit ) ) {
2019-05-15 14:23:09 +02:00
if (outsideMarketHours(date)) {
if (!lessThanDay || !beforeNineThirty(date)) {
date = date.clone().add(date.isoWeekday() >= 5 ? 8 - date.isoWeekday() : 1, 'day');
}
if (lessThanDay) {
date = date.hour(9).minute(30).second(0);
}
2019-03-28 07:56:37 +01:00
}
2019-05-15 14:23:09 +02:00
data.push(randomBar(date, data.length > 0 ? data[data.length - 1].y : 30));
2017-09-10 10:54:12 +02:00
}
2019-03-28 07:56:37 +01:00
return data;
2017-09-10 10:54:12 +02:00
}
2018-02-03 13:28:54 +01:00
var ctx = document.getElementById('chart1').getContext('2d');
2017-09-10 10:54:12 +02:00
ctx.canvas.width = 1000;
ctx.canvas.height = 300;
2018-08-08 18:44:53 +02:00
var color = Chart.helpers.color;
2017-09-10 10:54:12 +02:00
var cfg = {
data: {
datasets: [{
2018-02-03 13:28:54 +01:00
label: 'CHRT - Chart.js Corporation',
2018-08-08 18:44:53 +02:00
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
borderColor: window.chartColors.red,
2019-03-28 07:56:37 +01:00
data: generateData(),
2017-09-10 10:54:12 +02:00
type: 'line',
pointRadius: 0,
fill: false,
lineTension: 0,
borderWidth: 2
}]
},
options: {
2019-10-19 22:13:04 +02:00
animation: {
duration: 0
},
2017-09-10 10:54:12 +02:00
scales: {
xAxes: [{
type: 'time',
distribution: 'series',
2019-10-25 18:17:41 +02:00
offset: true,
2017-09-10 10:54:12 +02:00
ticks: {
2019-10-19 22:13:04 +02:00
major: {
enabled: true,
fontStyle: 'bold'
},
2019-03-03 15:00:24 +01:00
source: 'data',
2019-10-19 22:13:04 +02:00
autoSkip: true,
autoSkipPadding: 75,
maxRotation: 0,
sampleSize: 100
},
2019-10-31 23:45:13 +01:00
afterBuildTicks: function(scale) {
2019-10-19 22:13:04 +02:00
var majorUnit = scale._majorUnit;
2019-10-31 23:45:13 +01:00
var ticks = scale.ticks;
2019-10-19 22:13:04 +02:00
var firstTick = ticks[0];
var i, ilen, val, tick, currMajor, lastMajor;
val = moment(ticks[0].value);
if ((majorUnit === 'minute' & & val.second() === 0)
|| (majorUnit === 'hour' & & val.minute() === 0)
|| (majorUnit === 'day' & & val.hour() === 9)
|| (majorUnit === 'month' & & val.date() < = 3 & & val.isoWeekday() === 1)
|| (majorUnit === 'year' & & val.month() === 0)) {
firstTick.major = true;
} else {
firstTick.major = false;
}
lastMajor = val.get(majorUnit);
for (i = 1, ilen = ticks.length; i < ilen ; i + + ) {
tick = ticks[i];
val = moment(tick.value);
currMajor = val.get(majorUnit);
tick.major = currMajor !== lastMajor;
lastMajor = currMajor;
}
2017-09-10 10:54:12 +02:00
}
}],
yAxes: [{
2019-10-25 18:17:41 +02:00
gridLines: {
drawBorder: false
},
2017-09-10 10:54:12 +02:00
scaleLabel: {
display: true,
labelString: 'Closing price ($)'
}
}]
2019-03-03 15:00:24 +01:00
},
tooltips: {
intersect: false,
mode: 'index',
callbacks: {
label: function(tooltipItem, myData) {
var label = myData.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += parseFloat(tooltipItem.value).toFixed(2);
return label;
}
}
2017-09-10 10:54:12 +02:00
}
}
};
2019-03-03 15:00:24 +01:00
2017-09-10 10:54:12 +02:00
var chart = new Chart(ctx, cfg);
document.getElementById('update').addEventListener('click', function() {
var type = document.getElementById('type').value;
2019-03-28 07:56:37 +01:00
var dataset = chart.config.data.datasets[0];
dataset.type = type;
dataset.data = generateData();
2017-09-10 10:54:12 +02:00
chart.update();
});
< / script >
< / body >
< / html >