Displaying time series data in a highchart - javascript

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],
...
]

Related

HighCharts getJson - Unable to display

Json Returned by my Server
{
"data": [{
"name": "name",
"data": ["[Date.UTC(2017, 01, 25), 89]",
"[Date.UTC(2017, 01, 26), 99]",
"[Date.UTC(2017, 02, 02), 106]",
"[Date.UTC(2017, 02, 04), 102]",
"[Date.UTC(2017, 02, 07), 110]",
"[Date.UTC(2017, 10, 31), 155]"]
}]
}
The code i'm using is from just data is generated by me (Above)
https://www.highcharts.com/demo/spline-irregular-time
My Javascript Code
Please Remove one T from bit ly
$.getJSON('http://bitt.ly/2zpoZqT', function (csv) {
console.log(csv['data']);
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Keyword Tracking'
},
subtitle: {
text: 'Top 20 Keywords'
},
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: {
spline: {
marker: {
enabled: true
}
}
},
series: csv['data']
});
});
Just add the good attributes series to your object json return in the success call $.getJSON as you did. But this case create a attribute series as the script need and affect the value of data to series and delete data are you are done.
$.getJSON('http://bitt.ly/2zpoZqT', function (csv) {
console.log(csv['data']);
csv.series = csv.data;//new attribute series affected to data
delete csv.data; //delete data to have the good object
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Keyword Tracking'
},
subtitle: {
text: 'Top 20 Keywords'
},
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: {
spline: {
marker: {
enabled: true
}
}
},
series: csv['data']
});
});

Javascript Highcharts spline chart with date values on X-axis click event returns incorrect date value

I have a spline chart which displays values (y-axis) and dates (x-axis).
The data for the chart is as follows:
{
name: 'items',
data: [
[ 1476021600000, 200 ],
....
]
}
The date value that is sent to the chart is '1476021600000' which is Sun, 09 Oct 2016 14:00:00 GMT.
I have a click event on the chart to return the date value that is in the data javascript object.
What is returned on click is a different value '1476020807554' which is Sun, 09 Oct 2016 13:46:47.554 GMT.
The code for the chart is as follows:
$('#items-per-hour-chart').highcharts({
chart: {
type: 'spline',
backgroundColor:'transparent',
events: {
click: function(event) {
console.log(
event.xAxis[0].value // returns incorrect value
);
}
}
},
title: {
text: 'Trending Words by Hour'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Temperature'
},
labels: {
formatter: function () {
return this.value;
}
}
},
tooltip: {
crosshairs: true,
shared: true
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
series: items_per_hour_data
});
It seems to me that HighCharts is modifying the value and I can't seem to figure out how to retrieve the correct value (the exact value that I pass to the chart).
Thanks in advance!

HighChart not showing correct month from MYSQL query

My chart is not showing the correct month. I know that javascript 0 means January. How can I do increment the month directly in the query? Or should I do additional function in the highcharts?
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'RCM Dashboard Philippines'
},
xAxis: {
type: 'datetime',
tickInterval: 30 * 24 * 3600 * 1000,
dateTimeLabelFormats: { // don't display the dummy year
day: '%b %e',
year: '%Y'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Number of Usage (m)'
},
min: 0
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y} Visit</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'line',
name: 'RCM Dashboard Philippines',
data: [
<?php
$sql=mysql_query("SELECT DATE_FORMAT(date_accessed,'%Y,%m,%d') as dates, COUNT(date_accessed) as counts
FROM anreference WHERE date_accessed between '2015-01-01' AND '2015-06-03' group by date(date_accessed) order by date(date_accessed) limit 1000;");
while($res=mysql_fetch_array($sql)) {
?>
[Date.UTC(<?php echo $res['dates']; ?>), <?php echo $res['counts']; ?>],
<?php
}
?>
]
}]
});
});
Already got some workaround with this. I used MySQL query DATE_SUB to subtract the date by one month in order to compensate with the javascript value of 0 as January.
SELECT DATE_FORMAT(DATE_SUB(date_accessed,INTERVAL 1 MONTH), '%Y,%m,%d') as dates, COUNT(date_accessed) as counts
FROM anreference WHERE date_accessed between '2015-01-01' AND '2015-06-03' group by date(date_accessed) order by date(date_accessed) limit 1000;

breaking json for stacked highcharts

I am passing a Json to highcharts
json: {"0":[{"name":"normal","data":["1647","270905","412080","13609","17062","20889","16","765097","13424","14","2044","630686","104019","3097","733","1462"]},{"name":"rft","data":[1300177,4599692,957739,4177103,3436151,3752121,1978772,1850918,2538336,521542,2951953,4108915,1516107,3329831,661657,3447965]}]}
and used this code to breakdown and passing to highcharts:
series: [{
data: (function() {
var chart_data =[];
$.each(obj[0], function (index, value) {
var arra=[];
// alert(value['name'])
arra['name']=value['name'];
arra['data']=[];
//alert(value['data'].length);
$.each(value['data'],function(ind,val){
arra['data'].push(parseInt(val));
});
//console.log(arra);
chart_data.push(arra);
});
return chart_data ;
})()
}]
but not working....
var arra=[];
// alert(value['name'])
arra['name']=value['name'];
This code shows you are treating an array (only number indices) as an object (string index). Try using:
var arra={};
// alert(value['name'])
arra['name']=value['name'];
First construct your JSON Data to exclude the keys "0" and "1" if that will be possible. Once done you can plot your graph as can be seen on this JSFiddle
var obj=[{"name":"normal","data":["1647","270905","412080","13609","17062","20889","16","765097","13424","14","2044","630686","104019","3097","733","1462"]},{"name":"rft","data":[1300177,4599692,957739,4177103,3436151,3752121,1978772,1850918,2538336,521542,2951953,4108915,1516107,3329831,661657,3447965]}];
$(function () {
$('#container').highcharts({
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'
},
series: (function(){
return obj;
})()
});
});
But if your JSON Data must be as it is currently, then you can change series to:
series: (function(){
return obj[0];
})()

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.

Categories