We Keep Coding

Displaying time series data in a highchart

I am trying to use this chart to display my data - https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/spline-irregular-time
My data looks like this on the backend -
My chart looks like this
Notice the date on the x-axis is wrong and the date on the label always says 1 Jan for all datapoints. How do I fix this such that the date on the label and x-axis is correct. Here is my JS code
var credit = '<?php echo (isset($credit))?$credit:0; ?>'
Highcharts.chart('transactionId', {
chart: {
type: 'spline'
},
title: {
text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
plotOptions: {
series: {
marker: {
enabled: true
}
}
},
colors: ['#6CF', '#39F', '#06C', '#036', '#000'],
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
series: [{
name: "Winter 2016-2017",
data: JSON.parse(credit)
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
plotOptions: {
series: {
marker: {
radius: 2.5
}
}
}
}
}]
}
});

The problem is the date format 2020-12-13. Passing a date string directly doesn't work. You have to convert to Date.UTC(year, month, day) format.
So your credit array should look like this when passing to chart config.
credit = [
[Date.UTC(2020, 12, 13), 5000],
[Date.UTC(2020, 12, 19), 50000],
...
]

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 not showing on mobile

I have a issue with my charts working in highcharts.
All my charts are displaying correctly on desktop , in Chrome/FF/IE/Safari
But when i'm on mobile, any of them are showing.
I have nothing on my log so I would like to know how can i fix them,
There is the link for the charts :
http://www.chahinecapital.com/fonds/
You can go on the sub heading Digital Star Europe , and click the button for ACTIFS as exemple.
There is also my loadEurope.js , where i initialize the charts
jQuery(document).ready(function($) {
Highcharts.setOptions({
lang: {
months: [
'Janvier', 'Février', 'Mars', 'Avril',
'Mai', 'Juin', 'Juillet', 'Août',
'Septembre', 'Octobre', 'Novembre', 'Décembre'
],
weekdays: [
'Dimanche', 'Lundi', 'Mardi', 'Mercredi',
'Jeudi', 'Vendredi', 'Samedi'
],
shortMonths: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil',
'Aout', 'Sept', 'Oct', 'Nov', 'Déc'
]
}
});
$.get('http://www.chahinecapital.com/wp-content/themes/consulting-child/data/fonds/DigitalStarsEurope/volatilityFR.csv', function(data) {
$('#EuropeVolatility').highcharts({
yAxis: [{
labels: {
format: '{value} %',
},
title: {
text: ' ',
}
}],
data: {
csv: data,
},
series: [{
color: '#682666',
}, {
color: '#ed8322',
},{
color: '#B7ADA5',
}],
xAxis: {
tickPixelInterval: 50,
},
title:{
text:null
}
});
});
$("#EuropeAllocPaysBtn").click(function() {
$.get("http://www.chahinecapital.com/wp-content/themes/consulting-child/data/fonds/DigitalStarsEurope/countryFR.csv", function(csv) {
$('#EuropeAllocPays').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: false
},
showInLegend: true
}
},
data: {
csv: csv
},
title:{
text:null
}
});
});
});
$("#EuropeAllocSecteursBtn").click(function() {
$.get("http://www.chahinecapital.com/wp-content/themes/consulting-child/data/fonds/DigitalStarsEurope/secteursFR.csv", function(csv) {
$('#EuropeAllocSecteurs').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: false
},
showInLegend: true
}
},
data: {
csv: csv
},
title:{
text:null
}
});
});
});
$("#EuropeActifsBtn").click(function() {
$.get("http://www.chahinecapital.com/wp-content/themes/consulting-child/data/fonds/DigitalStarsEurope/assetsFR.csv", function(csv) {
$('#EuropeActifs').highcharts({
yAxis: [{
gridLineWidth: 0,
labels: {
format: '{value:,.0f}',
},
title: {
text: 'Nombre de parts',
},
opposite: true
},
{
labels: {
format: '{value}',
formatter: function(){
return this.value/100000 + "M";
}
},
title: {
text: 'Actifs en \u20AC ',
}
}],
data: {
csv: csv
},
series: [{
yAxis:1,
color: '#682666',
}, {
yAxis:0,
color: '#ed8322',
}],
title:{
text:null
}
});
});
});
$("#EuropePerformancesPeriodeBtn").click(function() {
$.get("http://www.chahinecapital.com/wp-content/themes/consulting-child/data/fonds/DigitalStarsEurope/performancesFR.csv", function(csv) {
$('#EuropePerformancesPeriode').highcharts({
yAxis: [{
labels: {
format: '{value} %',
},
title: {
text: ' ',
}
}],
xAxis:{
tickInterval:1,
},
chart: {
type: 'column'
},
data: {
csv: csv
},
series: [{
color: '#682666',
}, {
color: '#ed8322',
},{
color: '#B7ADA5',
}],
title:{
text:null
}
});
});
});
});
Thanks a lot for your help
Jordan

I went through this exact same problem with another library, so I will put an answer here, maybe it will help someone.
Just to be clear, my problem was with AM4CHARTS library.
All charts working fine in Desktop, even when I was setting chrome and firefox to mobile mode, but not showing in Mobile.
The issue in my case was, for some reason, the browser cache.
I did clean the cache for the last 24 hours at chrome in android, and the charts went back.
Hope this helps anyone who might step into this.

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.

Highcharts variation (%) between yaxis values in tooltip

I have a really simple spline chart and I'm trying to show on each tooltip the variation between the selected point and the previous point's value, measured in percentage variation. Basically this is the tooltip format I want to show
I've been looking for a solution but the only thing I came up with was this.
Hope it helps.
This are my chart options:
GeneralChartOptions = {
chart: {
renderTo: 'dummycontainer',
type: 'spline',
zoomType: 'x',
spacingRight: 20
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%b \'%y',
year: '%b'
}
},
yAxis: {
title: {
text: ''
},
plotLines: []
},
tooltip: {
xDateFormat: '%m-%Y',
shared: true,
crosshairs: true,
},
exporting: {
enabled: false
},
labels: {
formatter: function() {
return Highcharts.numberFormat(this.value, 2,".",",");
}
},
series: []
}
Thanks for the help, I really appreciate it.

How about look how they do and then try ?
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
plotOptions: {
series: {
compare: 'percent'
}
}
demo