My goal is to pull chart data from a database and to also pull annotation data from a database.
The CSV chart data looks like this:
<code>Timestamp,Flow,Temperature
2024-05-08 1:00:00,10,20
2024-05-08 2:00:00,12,15
2024-05-08 2:30:00,,16
2024-05-08 3:00:00,9,18
2024-05-08 4:00:00,7,19
</code>
<code>Timestamp,Flow,Temperature
2024-05-08 1:00:00,10,20
2024-05-08 2:00:00,12,15
2024-05-08 2:30:00,,16
2024-05-08 3:00:00,9,18
2024-05-08 4:00:00,7,19
</code>
Timestamp,Flow,Temperature
2024-05-08 1:00:00,10,20
2024-05-08 2:00:00,12,15
2024-05-08 2:30:00,,16
2024-05-08 3:00:00,9,18
2024-05-08 4:00:00,7,19
My highchart example below correctly pulls and loads it from a csv file. The chart appears as I would expect. The xAxis is of each data point on the chart is type “datetime” so it properly displays the time of the data point.
However, when trying to add an annotation to any given point, the xAxis appears to be using a Unix timestamp created from the CSV file but in GMT format. If I locally create a new javascript date object for the same time as a data point on the chart and use .getTime() to get a Unix formatted value, it will return a value for the datetime but in my Local timezone. In my case, the Unix timestamp is off by -5 hours This value cannot be used to add the annotation to the chart because there are no data points on the xAxis on the chart for that time.
Is there a setting in HighCharts to build the xAxis values using the local time instead of GMT time? Is there a work around?
[“`
<code><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Highcharts Example</title>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/highcharts11.js"></script>
<script src="js/data11.js"></script>
<script src="js/exporting11.js"></script>
<script src="js/accessibility11.js"></script>
<script src="js/annotations11.js"></script>
<script src="js/export-data11.js"></script>
</head>
<body>
<div id="container" style="height: 400px; min-width: 380px"></div>
<script type="text/javascript">
$(function () {
$.ajaxSetup({ cache: false });
});
//Build the chart
var thisChart = Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Live Data (CSV)'
},
subtitle: {
text: 'Data input from a remote CSV file'
},
xAxis: {
type: 'datetime',
title: { text: 'x axis title'}
},
plotOptions: {
series: { connectNulls: true ,
point: {
events: {
click: function () {
alert("this.series.name = " + this.series.name + "nthis.x = " + this.x + "nthis.y = " + this.y);
} //click
} //events
} //point
}// series
},
data: {
csvURL: 'http://localhost/tundra/zdata.csv',
enablePolling: false
} //data
}); //thisChart
// Try to add an annotation at 2:00:00
//var date = new Date("2024-05-08 2:00:00 ");
var date = new Date("2024-05-07 21:00:00 ");
alert(date.getTime()); //1715151600000
var a2 = {
labels: [{
point: {
//x: 1715133600000, // this works but it is GMT time
x: date.getTime(),
//1715151600000 --> GMT minus 5 hours
y: 15,
yAxis: 0,
xAxis:0
},
text: 'basic annotation'
}],
labelOptions: {
borderRadius: 5,
backgroundColor: 'rgba(252, 255, 197, 0.7)',
borderWidth: 1,
borderColor: '#AAA'
},
}
thisChart.addAnnotation(a2);
//alert('done');
</script>
</body>
</html>
</code>
<code><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Highcharts Example</title>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/highcharts11.js"></script>
<script src="js/data11.js"></script>
<script src="js/exporting11.js"></script>
<script src="js/accessibility11.js"></script>
<script src="js/annotations11.js"></script>
<script src="js/export-data11.js"></script>
</head>
<body>
<div id="container" style="height: 400px; min-width: 380px"></div>
<script type="text/javascript">
$(function () {
$.ajaxSetup({ cache: false });
});
//Build the chart
var thisChart = Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Live Data (CSV)'
},
subtitle: {
text: 'Data input from a remote CSV file'
},
xAxis: {
type: 'datetime',
title: { text: 'x axis title'}
},
plotOptions: {
series: { connectNulls: true ,
point: {
events: {
click: function () {
alert("this.series.name = " + this.series.name + "nthis.x = " + this.x + "nthis.y = " + this.y);
} //click
} //events
} //point
}// series
},
data: {
csvURL: 'http://localhost/tundra/zdata.csv',
enablePolling: false
} //data
}); //thisChart
// Try to add an annotation at 2:00:00
//var date = new Date("2024-05-08 2:00:00 ");
var date = new Date("2024-05-07 21:00:00 ");
alert(date.getTime()); //1715151600000
var a2 = {
labels: [{
point: {
//x: 1715133600000, // this works but it is GMT time
x: date.getTime(),
//1715151600000 --> GMT minus 5 hours
y: 15,
yAxis: 0,
xAxis:0
},
text: 'basic annotation'
}],
labelOptions: {
borderRadius: 5,
backgroundColor: 'rgba(252, 255, 197, 0.7)',
borderWidth: 1,
borderColor: '#AAA'
},
}
thisChart.addAnnotation(a2);
//alert('done');
</script>
</body>
</html>
</code>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Highcharts Example</title>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/highcharts11.js"></script>
<script src="js/data11.js"></script>
<script src="js/exporting11.js"></script>
<script src="js/accessibility11.js"></script>
<script src="js/annotations11.js"></script>
<script src="js/export-data11.js"></script>
</head>
<body>
<div id="container" style="height: 400px; min-width: 380px"></div>
<script type="text/javascript">
$(function () {
$.ajaxSetup({ cache: false });
});
//Build the chart
var thisChart = Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Live Data (CSV)'
},
subtitle: {
text: 'Data input from a remote CSV file'
},
xAxis: {
type: 'datetime',
title: { text: 'x axis title'}
},
plotOptions: {
series: { connectNulls: true ,
point: {
events: {
click: function () {
alert("this.series.name = " + this.series.name + "nthis.x = " + this.x + "nthis.y = " + this.y);
} //click
} //events
} //point
}// series
},
data: {
csvURL: 'http://localhost/tundra/zdata.csv',
enablePolling: false
} //data
}); //thisChart
// Try to add an annotation at 2:00:00
//var date = new Date("2024-05-08 2:00:00 ");
var date = new Date("2024-05-07 21:00:00 ");
alert(date.getTime()); //1715151600000
var a2 = {
labels: [{
point: {
//x: 1715133600000, // this works but it is GMT time
x: date.getTime(),
//1715151600000 --> GMT minus 5 hours
y: 15,
yAxis: 0,
xAxis:0
},
text: 'basic annotation'
}],
labelOptions: {
borderRadius: 5,
backgroundColor: 'rgba(252, 255, 197, 0.7)',
borderWidth: 1,
borderColor: '#AAA'
},
}
thisChart.addAnnotation(a2);
//alert('done');
</script>
</body>
</html>
<code>
</code>
<code>
</code>