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?
Related
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
$(function () {
Highcharts.setOptions({
global : { useUTC : false
}
});
$('#container').highcharts({
title: {
text: 'coefficient 10 days',
x: -20
},
subtitle: {
text: 'Company',
x: -20
},
xAxis: {
categories: [<?php echo join($data, ',')?>],
type: 'datetime'
},
yAxis: {
title: {
text: 'Коэффициент'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '', enabled: false
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0
},
series: [
{
name: 'value',
data: [<?php echo join($koef, ',')?>]
}, {
name: 'norm',
data: [<?php echo join($norm, ',')?>], color: '#FF0000'
}
]
});
});
When format in php as 'Ymd', date is correct but as number, like '20151210' this not readable for users. When i try format (in php code) 'd.m.Y' java say script1007 error. On api.highcharts.com nothing in the description specified what to do. Probably i need set in javascript something about datetime setting.
I am using dual-axis highcharts. In the y-axis the values are too big to read. I wold like to convert them to shortcuts like 1K for 1000 and 1.0L for 100000 and 1.0M for 1000000 and 35.8M for 35869982 and 3.5M for 3550977.
This is my FIDDLE
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Temperature and Rainfall in Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['MAR-2014', 'APR-2014', 'MAY-2014', 'JUN-2014',
'JUL-2014', 'AUG-2014', 'SEP-2014', 'OCT-2014', 'NOV-2014', 'DEC-2014'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'VOLUME',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'REVENUE',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Revenue',
type: 'column',
yAxis: 1,
data: [35869982, 26090976, 26595718, 33914250, 25999278, 36579864, 35843674, 28008920, 27718356, 29014230],
tooltip: {
valueSuffix: ' '
}
}, {
name: 'volume',
type: 'spline',
data: [3379865, 2373769, 2401815, 3222316, 2459713, 5864469, 5139453, 3341922, 3229963, 3550977],
tooltip: {
valueSuffix: ''
}
}]
});
});
Here I have rounded up where I want to make changes in the below figure
You need to make a use of formatter:
formatter: function(){
return this.value/1000000 + "M";
}
Fiddle
To utilize the built in "shortening" functionality you can just remove your yAxis.label.format. You have currently set it to {value}, which is the default, but manually setting it seems to prevent the metric prefixes from being applied.
Look at this JSFiddle example, where all I've changed is removing the following line from both of your y-axis labels:
format: '{value}'
With this automatic shortening the following metric prefixes may be applied:
[ "k" , "M" , "G" , "T" , "P" , "E"]
You can set your own values with the lang.numericSymbols option (API).
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.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Will setInterval cause browsers to hang?
i implement Highstock JS v1.1.4 chart for represent data
chart code :
chart = new Highcharts.StockChart({
chart: {
renderTo: 'highchartviewpanel',
events:{
load:function(){
setIntervalForhighchartdata();
}
}
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
},{
count: 5,
type: 'minute',
text: '5M'
},
{
count: 15,
type: 'minute',
text: '15M'
}],
selected:0,
inputEnabled: false
},
navigator: {
height: 40,
xAxis: {
valueDecimals: 1
}
},
title: {
text: 'payment analysis',
floating: true,
align: 'right',
x: -20,
top: 20
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
second : '%H:%M:%S',
minute : '%H:%M',
hour: '%H',
day : '%b,%d',
week : 'b,%d',
month : '%Y,%b',
year : '%Y'
},
valueDecimals: 0
},
yAxis: [
{
title: {
text: 'item1'
},
height: 50,
lineWidth: 2
}, {
title: {
text: 'item2'
},
top: 90,
height: 50,
offset: 0,
lineWidth: 2
},{
title: {
text: 'item3'
},
top: 150,
height: 50,
offset: 0,
lineWidth: 2
}],
series: [{
name: 'item1',
data: item1data,
color:'blue'
},
{
name: 'item2',
yAxis: 1,
data: item2data,
color:'black'
},{
name: 'item3',
yAxis: 2,
data: item3data,
color:'red'
}]
});
}
setIntervalForhighchartdata() is function which update graph every 10 sec and my data value is base on time interval xdata is datetime and ydata is data point of 1,2,3 ....
its hang browser some time when graph update
The function your calling probably doesn't complete itself before you call it again.I assume you're using setInterval(). If so, I'd suggest using it combined with setTimeout().
For more info check out this thread - Will setInterval cause browsers to hang?