<html>
<head>
<script type="text/javascript" src="moment.js"></script>
<script type="text/javascript" src="chartjs-plugin-zoom.js"></script>
<script type="text/javascript" src="Chart.js"></script>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="trainchart.css">
</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 * 0.95, lastClose * 1.05);
var close = randomNumber(open * 0.95, open * 1.05);
return {
t: date.valueOf(),
y: close
};
}
function makeBar(date, value) {
return {
t: date.valueOf(),
y: parseFloat(value)
};
}
$.ajax({
url: 'train_data.csv',
dataType: 'text',
}).done(successFunction);
function successFunction(data) {
console.log("parsing csv data");
var allRows = data.split(/\r?\n|\r/);
for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
timestamp=allRows[singleRow].split(',')[0];
duration=allRows[singleRow].split(',')[1];
var date = new Date(timestamp*1000);
console.log("timestamp:",date," duration: ",duration);
var b=makeBar(date,duration);
console.log(b);
labeldiv=0;
if (singleRow==0) {
var data= [makeBar(date,0)];
var labels = [date];
}
else {
if (date!=0 && duration>0)
{
if (duration<300)
{
data.push(makeBar(date,duration));
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: 'train time',
data: data,
type: 'bar',
pointRadius: 0,
fill: false,
lineTension: 0,
borderWidth: 1,
backgroundColor: "#3e95cd",
}]
},
options: {
tooltips: {
callbacks: {
title: function(tooltipItem, chartData) {
// You return what you want here
console.log(tooltipItem[0].xLabel);
console.log(chartData);
return tooltipItem[0].xLabel;
}
}
},
pan: {
// Boolean to enable panning
enabled: true,
// Panning directions. Remove the appropriate direction to disable
// Eg. 'y' would only allow panning in the y direction
mode: 'xy',
rangeMin: {
// Format of min pan range depends on scale type
x: null,
y: null
},
rangeMax: {
// Format of max pan range depends on scale type
x: null,
y: null
}
},
// Container for zoom options
zoom: {
// Boolean to enable zooming
enabled: true,
// Zooming directions. Remove the appropriate direction to disable
// Eg. 'y' would only allow zooming in the y direction
mode: 'xy',
},
scales: {
xAxes: [{
type: 'time',
distribution: 'linear',
barThickness: 2,
displayFormats: {
quarter: 'MMM YYYY'
},
tooltipFormat: {quarter: 'MMM YYYY'},
ticks: {
source: 'labels'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'train time [seconds]'
}
}]
}
}
};
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();
});
}
var dateFormat = 'MMMM DD YYYY';
//var date = moment('April 01 2017', dateFormat);
unix_timestamp=1535648150.7723472;
var date = new Date(unix_timestamp*1000);
console.log(date)
/* var data = [randomBar(date, 30)];
console.log(randomBar(date,30));
var labels = [date];
while (data.length < 60) {
//date = date.clone().add(1, 'd');
data.push(randomBar(date, data[data.length - 1].y));
labels.push(date);
//date+=10000;
}
*/
</script>
</body>
</html>