We Keep Coding

dynamic update data from csv (highchart)

I really don't get it working.
the page loads but not the data.
I did try other things but i can't get it going
Trying to use a csv file with highstocks, but there seems to be an issue I am able to use csv files in highstocks using the csv fine, but it does not dynamically update the csv data, Can anyone please advise what I'm doing wrong?
here is what i have :
the csv is like this :
2018-02-25 16:26:48;21.7;33
$.ajax({
url: '/data/woonkamer/woonkamer2019.csv',
success: function (csv) {
Highcharts.chart('container', {
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
var series = this.series[1];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, false);
}, 1000);
}
}
},
data: {
csv: csv.replace(/\n\n/g, '\n')
},
title: {
text: 'Daily Temperature And humidity'
},
subtitle: {
text: 'Malosa'
},
xAxis: {
type: "datetime",
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %B',
week: '%e. %b',
month: '%b \'%y',
year: '%Y'
},
tickInterval: 3600 * 1000
},
yAxis: [{ // left y axis
title: {
text: 'Temp + Humid',
},
labels: {
align: 'temp',
x: 3,
y: 16,
format: '',
},
showFirstLabel: false
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: "humid "
},
labels: {
align: 'right',
x: -3,
y: 16,
format: '{value:.,0f}'
},
showFirstLabel: false
}],
legend: {
align: 'left',
verticalAlign: 'top',
borderWidth: 0
},
tooltip: {
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function (e) {
hs.htmlExpand(null, {
pageOrigin: {
x: e.pageX || e.clientX,
y: e.pageY || e.clientY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A-%e%b-%Y at %H:%M', this.x) + '<br/> ' +
'</b><br/>'+ this.series.name +': '+ this.y + this.series.tooltipOptions.valueSuffix +'',
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: [{
name: 'Temperature',
data:[],
tooltip: {
valueSuffix: 'c'
}
},
{
name: 'Humidity',
data:[],
tooltip: {
valueSuffix: ' %'
}
}]
});
}
});
Check screenshot here
csv file local updated :
2018-03-01 09:25:34;22.1;29
2018-03-01 09:25:35;22.1;29
2018-03-01 09:25:36;22.1;29
2018-03-01 09:25:37;22.1;29
2018-03-01 09:25:38;22.1;29
2018-03-01 09:25:39;22.1;29
2018-03-01 09:25:40;22.1;29
2018-03-01 09:25:41;22.1;29
2018-03-01 09:25:42;22.1;29
2018-03-01 09:25:43;22.1;29
So i hope someone can help me with this so i can change it to all the charts:D

HighChart tooltips different with yaxis dateformat

I've a problem using highchart.
in yaxis dateformat it doesn't problem , but in tooltip dateformat, it is give me different for 1 hour.
JS :
var options = {
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Report Due Date vs Surat Jalan',
x: -20 //center
},
subtitle: {
text: 'PT BKA',
x: -20
},
xAxis: {
categories: [],
title: {
text: 'So No'
},
labels :{
rotation: -45
}
},
yAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%d/%m/%Y %H:%M:%S' },
labels :{
formatter:function() {return Highcharts.dateFormat('%d/%m/%Y %H:%M:%S',this.value);}
},
title: {
text: 'Date'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b><br><b>' + this.series.name +'</b> : ' +
Highcharts.dateFormat('%d/%m/%Y %H:%M:%S',this.y);
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: []
};
JSON data form PHP :
1: {name: "SODate", data: [1457910000000]}
data: [1457910000000]
name: "SODate"
2: {name: "DeliverDate1", data: [1457996400000]}
data: [1457996400000]
name: "DeliverDate1"
3: {name: "DeliverDate2", data: [1458169200000]}
data: [1458169200000]
name: "DeliverDate2"
4: {name: "DeliverDate3", data: [1458255600000]}
data: [1458255600000]
name: "DeliverDate3"
ToolTip :
SODate : 1 457 910 000 000
DeliverDate1 : 1 457 996 400 000
but when using formatter like first script , it's showing different 1 hour different
SODate in yaxis : 14/03/2016 00:00:00
SODate in Tooltip : 13/03/2016 23:00:00
I am already using
Highcharts.setOptions({
global: { useUTC: false }
});
but it just make more big different.
Why this can happen?
UPDATE 15 March 2016 :
After using global: { timezoneOffset: 7 * 60, useUTC: false }
its not make different, because yaxis is not problem.
After using global: { timezoneOffset: -60, useUTC: true}
it works, but it is right?

Graphing Time of Day x-axis highcart

I am trying to make a heat map highcart. I am graphing all purchases in a certain amount of time. I have an array of data point arrays[[timestamp,purchase amount],[timestamp,purchase amount]]. I want my graph to have a y-axis that shows the amount of the purchase and an x-axis that shows the time of day the purchase was made (all are between 8am - 6pm). It is not relevant what date a purchase is made, only the time. I have had to cheat and make the x-axis time linear and make the time a float like 10.55 (10:55). This is obviously not a good solution as it leaves gaps (.6-.99) in the graph. Any attempt I've done other than linear give me an x-axis showing a few minutes from midnight. Here is my current code with poor work around.
function scatterChartTimeMapper(timestamp){
var ourDate = new Date(timestamp*1000);
var hour = (ourDate.getHours()+1).toString();
var mins = ourDate.getMinutes();
if(mins<10)
mins = "0" + mins;
if(mins%10===0)
mins = mins.toString();
var time = hour + "." + mins;
return parseFloat(time);
}
for(i=0;i<data.length;i++)
{
var timePoint = scatterChartTimeMapper(parseFloat(data[i].trim()));
var segmentArray = [timePoint,parseFloat(data[i+1].trim())];
newArray.push(segmentArray);
i++;
}
My JSON for the graph is:
data :
{
chart: {
type: 'scatter',
backgroundColor : 'transparent',
zoomType: 'xy'
},
title: {
text: bundle.action_fields_full.chart_title
},
subtitle: {
text: bundle.action_fields_full.sub_title
},
xAxis: {
title: {
enabled: true,
text: 'Time Of Day'
},
type : 'linear',
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Tranaction Amount'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 55,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: 'Time {point.x} , €{point.y} '
}
}
},
series: [{
name: 'Transactions',
color: 'rgba(223, 83, 83, .5)',
data: newArray
}]
} };

Highcharts: X axis, MySQL datetime

I cannot get highcharts to recognize my timestamps, they are in javascript date format.
Tried many different approaches, but cannot get it to work when both the data and time array's are seperate.
Fiddle: http://jsfiddle.net/SjL6F/
$(function () {
Highcharts.setOptions({
lang: {
thousandsSep: ''
}
});
$('#container').highcharts({
title: {
text: 'Temperature - Last 24 hours',
},
credits: {
enabled: false
},
subtitle: {
text: "Test Site",
x: -20
},
xAxis: {
type: 'datetime',
labels: {
enabled: true
},
categories: time,
tickInterval: 3600 * 1000,
dateTimeLabelFormats: {
day: '%e of %b'
}
},
yAxis: [{
title: {
text: 'Temperature (\u00b0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}],
tooltip: {
shared: true
},
series: [{
name: 'Temperature',
data: temp,
type: 'line',
tooltip: {
valueSuffix: ' C'
},
marker: {
enabled: false
}
}]
});
});
Highcharts just shows the raw javascript date value.

You are setting categories, which isn't datetime type for xAxis. Remove them, then concat time and temp arrays.
For example:
var concatenatedData = [];
$.each(time, function(i, e){
concatenatedData.push([parseInt(e), temp[i]]);
});
Demo:
http://jsfiddle.net/SjL6F/1/
Note: I have added parseInt, because Highcharts requires timestamps to be numbers, not strings.

Highchart tick interval

I cannot seem to figure out how to set my tick interval correctly.
Need to have an hourly tick on the X axis.
The data is minute based.
Javascript:
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline'
},
title: {
text: 'Temperature Today'
},
xAxis: {
type: "datetime",
categories: time,
dateTimeLabelFormats: {
day: '%h'
},
minTickInterval: 24 * 36000000 * 1000,
},
yAxis: {
title: {
text: 'Temperature'
},
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null
},
tooltip: {
formatter: function() {
return ''+
Highcharts.dateFormat('%e. %b %Y, %H:00', this.x) +': '+ this.y;
}
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 5,
lineWidth: 1
}
}
},
}
},
series: [{
name: 'Asen',
data: temp
}]
,
navigation: {
menuItemStyle: {
fontSize: '6px'
}
}
});
});
});
Data arrays:
temp = [-4.39,-4.39,-4.33,-4.33,-4.33,-4.33,-4.33]
time = [1359910725000,1359910786000,1359910848000,1359910908000,1359910968000,1359911028000,1359911089000,1359911150000]

First of all, remove the 'categories' property on xAxis, this has no meaning on a datetime axis. Note that datetime axes are based on milliseconds, so an interval of one hour is expressed as 3600 * 1000. See API highcharts, tickInterval
use this config for the xAxis.
xAxis: {
type: "datetime",
dateTimeLabelFormats: {
day: '%H'
},
tickInterval: 3600 * 1000
},
See here for a working demo on JS Bin.

You should use tickInterval with value: 3600 * 1000