Highcharts: dateTime in milliseconds is not recognized - javascript

I have a highcharts graph consisting of 3 different plot lines. Y axis is a number format, X axis is a dateTime. The plots are being displayed properly but the labels on X show '00:00:00' and the tooltip shows the 1-st of January 1970.
Here's my code for initialising the chart:
Co2Chart = new Highcharts.Chart({
chart: {
renderTo: 'co2-graph',
type: 'spline',
animation: Highcharts.svg,
marginRight: 10,
events: {
load: function () {
updateData();
setInterval(updateData, 5000);
}
}
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
labels: {
formatter: function () {
return Highcharts.dateFormat('%H:%M:%S', this.value);
}
}
},
yAxis: {
title: {
text: 'CO2, ppm'
},
plotLines: [{
value: 0,
width: 1
},{
value: 1,
width: 1
},{
value: 2,
width: 1
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: true
},
plotOptions: {
spline: {
marker: {
enabled: false
}
}
},
exporting: {
enabled: false
},
series: [{
name: 'Master',
data: []
},
{
name: 'Slave 1',
data: []
},
{
name: 'Slave 2',
data: []
}]
});
This one pushes data:
for(var i = 0; i < array.length; i++){
var time = Date.parse(array[i]["dateTime"]);
Co2Chart.series[0].addPoint(array[i]["masterCo2"], time);
Co2Chart.series[1].addPoint(array[i]["slave1Co2"], time);
Co2Chart.series[2].addPoint(array[i]["slave2Co2"], time);
}
DateTime string that is passed to the Date.parse looks like this 2016-03-28 22:47:49. And in milliseconds – 1459198069000
Any ideas why it's not showing?


The problem is how you use addPoint method:
Co2Chart.series[0].addPoint(array[i]["masterCo2"], time);
Should be:
Co2Chart.series[0].addPoint([time, array[i]["masterCo2"]]);
Or:
Co2Chart.series[0].addPoint({
y: array[i]["masterCo2"],
x: time
});

Related

Highchart x-axis show label after specific days no matter what is in the x-axis categories

This is my code for highchart:
Highcharts.setOptions({
time: {
useUTC: false
}
});
$('#container-chart').highcharts({
chart: {
type: 'line',
alignTicks: false,
},
title: {
text: "Title 1",
},
tooltip: {
formatter: function() {
return Highcharts.dateFormat('%b %e, %Y',new Date(this.x))+ '<br/>' + this.y;
}
},
xAxis: {
categories: [1391122800000,1393542000000,1396216800000,1398808800000,1401487200000,1404079200000,1406757600000,1409436000000,1412028000000,1414710000000,1417302000000,1419980400000,1422658800000,1425078000000,1427752800000,1430344800000,1433023200000,1435615200000,1438293600000,1440972000000,1443564000000,1446246000000,1448838000000,1451516400000,1454194800000,1456700400000,1459375200000,1461967200000,1464645600000,1467237600000,1469916000000,1472594400000,1475186400000,1477868400000,1480460400000,1483138800000,1485817200000,1488236400000,1490911200000,1493503200000,1496181600000,1498773600000,1501452000000,1504130400000,1506722400000,1509404400000,1511996400000,1514674800000,1517353200000,1519772400000,1522447200000,1525039200000,1527717600000,1530309600000,1532988000000,1535666400000,1538258400000,1540940400000],
// tickInterval: (24 * 3600 * 1000 * 173),
labels: {
formatter: function () {
return Highcharts.dateFormat("%b %y", this.value);
},
}
},
yAxis: {
title: { text: ''
},
},
legend: {
enable: true,
},
plotOptions: {
series: {
marker: {
enabled: false
},
dataLabels: {
enabled: false,
allowOverlap: true,
},
lineWidth: 2,
states: {
hover: {
lineWidth: 3
}
},
threshold: null
}
},
series: [{
data: [0.57,0.41,0.51,0.35,0.16,0.16,0.05,0.19,0.27,0.57,0.45,0.59,0.49,0.77,0.56,0.25,0.3,0.28,0.27,0.33,0.45,0.62,0.62,0.46,0.46,0.45,0.68,0.18,0.22,0.28,0.29,0.41,0.34,0.59,0.67,0.69,0.65,0.57,0.73,-0.01,0.32,0.27,0.47,0.47,0.57,0.75,0.7,0.6,0.71,0.88,0.79,-0.11,0.22,0.15,0.07,0.09,0.09,0.09],
}],
exporting: {
sourceWidth: 1500
},
});
I have 58 days data for highchart's xAxis categories properties. The date difference from 1st day data to 58th date data is 1734 i.e. total number of days are 1734 days. Now, Say, i only want to show 10 labels on x-axis, of equal distance including first and last data, that means, label interval will be 173 days. How can i achieve this label interval no matter what date gap present in x-axis categories ?
Any help ?

You can use tickPositioner function, but you should use timestamps as x values not as categories:
xAxis: {
tickPositioner: function() {
var positions = [],
interval = 24 * 3600 * 1000 * 173;
for (var i = this.dataMin; i <= this.dataMax; i += interval) {
positions.push(i);
}
return positions;
},
labels: {
formatter: function() {
return Highcharts.dateFormat("%b %y", this.value);
},
}
}
Live demo: http://jsfiddle.net/BlackLabel/npq3x2bc/
API Reference: https://api.highcharts.com/highcharts/xAxis.tickPositioner

Highcharts.setOptions({
time: {
useUTC: false
}
});
$('#container-chart').highcharts({
chart: {
type: 'line',
alignTicks: false,
},
title: {
text: "Title 1",
},
tooltip: {
formatter: function() {
return Highcharts.dateFormat('%b %e, %Y',new Date(this.x))+ '<br/>' + this.y;
}
},
xAxis: {
categories: [1391122800000,1393542000000,1396216800000,1398808800000,1401487200000,1404079200000,1406757600000,1409436000000,1412028000000,1414710000000,1417302000000,1419980400000,1422658800000,1425078000000,1427752800000,1430344800000,1433023200000,1435615200000,1438293600000,1440972000000,1443564000000,1446246000000,1448838000000,1451516400000,1454194800000,1456700400000,1459375200000,1461967200000,1464645600000,1467237600000,1469916000000,1472594400000,1475186400000,1477868400000,1480460400000,1483138800000,1485817200000,1488236400000,1490911200000,1493503200000,1496181600000,1498773600000,1501452000000,1504130400000,1506722400000,1509404400000,1511996400000,1514674800000,1517353200000,1519772400000,1522447200000,1525039200000,1527717600000,1530309600000,1532988000000,1535666400000,1538258400000,1540940400000],
// tickInterval: (24 * 3600 * 1000 * 173),
labels: {
formatter: function () {
return Highcharts.dateFormat("%b %y", this.value);
},
}
},
yAxis: {
title: { text: ''
},
tickInterval:(maxValue/10),
min: 0,
max: maxValue,
},
legend: {
enable: true,
},
plotOptions: {
series: {
marker: {
enabled: false
},
dataLabels: {
enabled: false,
allowOverlap: true,
},
lineWidth: 2,
states: {
hover: {
lineWidth: 3
}
},
threshold: null
}
},
series: [{
data: [0.57,0.41,0.51,0.35,0.16,0.16,0.05,0.19,0.27,0.57,0.45,0.59,0.49,0.77,0.56,0.25,0.3,0.28,0.27,0.33,0.45,0.62,0.62,0.46,0.46,0.45,0.68,0.18,0.22,0.28,0.29,0.41,0.34,0.59,0.67,0.69,0.65,0.57,0.73,-0.01,0.32,0.27,0.47,0.47,0.57,0.75,0.7,0.6,0.71,0.88,0.79,-0.11,0.22,0.15,0.07,0.09,0.09,0.09],
}],
exporting: {
sourceWidth: 1500
},
});
here I have added :
tickInterval:(maxValue/10),
min: 0,
max: maxValue,
it means you need to fist get max value and take the nearest value divisible by 10 and use , I hope it will help you

I want to show series data array in highcharts

I have a highchart and currently it shows only one value. I want to show an array of data. This is my current a javascript method and it's only showing one data.
$(function () {
//alert("myValues"+myValues);
//console.log("deviceName"+deviceName);
$('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: 'Daily Power Consumption'
},
subtitle: {
text: 'Device : '+deviceName
},
xAxis: {
type: 'datetime',
tickInterval: 3600 * 2000, // two hour
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'center',
x: -3,
y: 20,
formatter: function() {
return Highcharts.dateFormat('%l%p', this.value);
}
}
},
yAxis: {
min: 0,
title: {
text: 'power ( W )'
}
},
tooltip: {
formatter: function() {
// return Highcharts.dateFormat('%l%p', this.x-(1000*3600)) +'-'+ Highcharts.dateFormat('%l%p', this.x) +': <b>'+ this.y + '</b>'+this.series.name;
return Highcharts.dateFormat('%l%p', this.x-(1000*3600)) +'-'+ Highcharts.dateFormat('%l%p', this.x) +':'+ this.y + '';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Time Period',
// name: deviceName,
data: [myValues]
}]
});
});
But then I need to loop through the arrays somehow, pushing everything into the series data and I don't know how to do that.
If I use a for loop with this data, how do I insert into the highcharts series data?

Highchart: how to update a dynamic chart by clicking on a button?

I intend to have a button on my web page so that upon clicking a button, a point will be added to a chart without redrawing the whole chart (the chart is a modified version of this http://www.highcharts.com/demo/dynamic-update). However, my current code is not working.
Here is the code in concern: http://jsfiddle.net/wtvaz9gc/7/
var series;
$(function drawCharts(numberOfPoint) {
// if(typeof chartData == undefined){
// chartData = $(dataStore.getXml());
// }
$("#b").click(function(){
series.addPoint([3,3]);
})
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {
type: 'line',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
series = this.series[0];
// window.myGlobal1 = this.series[0].data[this.series[0].data.length - 1].y;
// console.log(window.myGlobal1 + " " + this.series[0].data[this.series[0].data.length - 1].y);
},
}
},
title: {
text: ''
},
xAxis: {
title: {
text: 'Jahre'
},
// gridLineWidth: 0,
// lineWidth:1,
startOnTick: true,
tickPixelInterval: 40,
min: 0,
max: 10,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
yAxis: {
title: {
text: 'Vermögen(in EUR)'
},
labels: {
enabled: true
},
min: 0,
max: 100,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
enabled : false,
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: ($(function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i, preValue;
for (i = 0; i < numberOfPoint; i += 1) {
if(i == 0){
data.push({
x: i,
y: 10
});
} else {
data.push({
x: i,
y: chartData["wealth"][0][i]
});
}
}
// showMsg(data);
// console.log(data);
return data;
}()))
}]
});
});
});
When I tries to run it in chrome, I got the following error report:
highcharts.js:Uncaught TypeError: i.splice is not a function
addPoint # highcharts.js:...
How should I use the function "addPoint" in this case?
Or should I use other method to achieve the purpose?

There is something wrong with the function generating your initial data, but addPoint is working fine:
var series;
$(function drawCharts(numberOfPoint) {
// if(typeof chartData == undefined){
// chartData = $(dataStore.getXml());
// }
$("#b").click(function(){
series.addPoint([10,10]);
})
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {
type: 'line',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
series = this.series[0];
// window.myGlobal1 = this.series[0].data[this.series[0].data.length - 1].y;
// console.log(window.myGlobal1 + " " + this.series[0].data[this.series[0].data.length - 1].y);
},
}
},
title: {
text: ''
},
xAxis: {
title: {
text: 'Jahre'
},
// gridLineWidth: 0,
// lineWidth:1,
startOnTick: true,
tickPixelInterval: 40,
min: 0,
max: 10,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
yAxis: {
title: {
text: 'Vermögen(in EUR)'
},
labels: {
enabled: true
},
min: 0,
max: 100,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
enabled : false,
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: [1,2,3]
}]
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<button id="b" href="#" >AddPoints</button>

I am not sure what you are trying to do in your series.data function but removing all that code and defining your chart in your click event so it knows what series is does add the point [3,3].
Series declaration now:
series: [{
name: 'Random data',
data: []
}]
And the click function (no moved after the chart code):
$("#b").click(function() {
var chart = $('#container').highcharts();
chart.series[0].addPoint([3, 3]);
})
Live demo.

Disabling label without bar Highstock

I have a column chart Highstock:
http://jsfiddle.net/txfnsubb/
When we change range to smaller values, sometimes it shows us a label of value w/o the bar. For example I see 30 bars and at the end label with 31. Is there a possibility to turn it off? To set chart to showing label only with bar.
$('#container').highcharts('StockChart', {
chart: {
marginTop: 140
},
credits: {
enabled: false
},
plotOptions: {
series: {
dataGrouping: {
approximation: "average"
}
}
},
scrollbar: {
enabled: false
},
navigator: {
top: 40,
xAxis: {
labels: {
formatter: function () {
return x[this.value];
}
}
}
},
xAxis: {
labels: {
y: 50,
max: 150,
formatter: function () {
return x[this.value];
}
}
},
tooltip: {
formatter: function () {
var s = [];
var next = this.x + this.points[0].series.pointRange;
if ((this.x + 1) == next) {
s.push("<b>Position: " + (this.x + 1));
} else {
s.push("<b>Position: " + (this.x + 1) + "-" + next);
}
$.each(this.points, function (i, point) {
s.push('<span style="color:#D31B22;font-weight:bold;">' + point.series.name + ' : <span>' + point.y.toFixed(2));
});
return s.join('<br/>');
},
shared: true
},
series: [{
type: 'column',
name: 'reactivity',
data: data,
showInLegend: false,
tooltip: {
valueDecimals: 2,
shared: true
}
}, {
type: 'spline',
name: 'experiment 1',
data: data2,
color: 'green',
visible: false,
tooltip: {
valueDecimals: 2
}
}, {
type: 'spline',
name: 'experiment 2',
data: data3,
color: 'red',
visible: false,
tooltip: {
valueDecimals: 2
}
}],
legend: {
enabled: true,
margin: 0
},
rangeSelector: {
buttons: [{
type: 'millisecond',
count: seqLength / 5,
text: '0.25'
}, {
type: 'millisecond',
count: seqLength / 3,
text: '0.3'
}, {
type: 'millisecond',
count: seqLength / 2,
text: '0.5'
}, {
type: 'all',
text: '1.0'
}],
inputEnabled: false, // it supports only days
selected: 4 // all
}
});

High charts showing the composition of count as tooltip

I have a chart as below.
http://jsfiddle.net/Mn6sB/4/
$(function () {
$('#chartContainer').highcharts({
chart: {
renderTo: 'chartContainer',
type: 'column',
marginTop:50,
spacingBottom: 5,
marginBottom: 100
},
credits: {
enabled: false
},
title: {
text: 'Product health',
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
minTickInterval: 24 * 3600 * 1000,
dateTimeLabelFormats: {
month: '%e %b',
year: '%b'
}
},
yAxis: {
min: 0,
max:100,
tickInterval:10,
title: {
text: 'Passrate'
},
},
legend: {
title: {
text: '<span style="font-size: 9px; color: #666; font-weight: normal">To toggle between different branches click on the branch names in the legend</span>',
style: {
fontStyle: 'italic'
}
},
layout: 'horizontal',
},
tooltip: {
formatter: function() {
return 'Branch: <b>'+ this.series.name +
'</b><br/>Date: '+ Highcharts.dateFormat('%e %b',this.x)+
'</b><br/>Pass rate: '+ this.y +'%';
}
},
plotOptions: {
spline: {
dataLabels: {
enabled: 'True'
},
enableMouseTracking: false
}
},
series: [{name: 'BranchX', data:[[Date.UTC(2013,9,3),88],[Date.UTC(2013,9,4),100],[Date.UTC(2013,9,5),100],[Date.UTC(2013,9,6),100],[Date.UTC(2013,9,7),100],[Date.UTC(2013,9,8),100],[Date.UTC(2013,9,9),100],]},{name: 'BranchY', data:[[Date.UTC(2013,9,3),75.27],[Date.UTC(2013,9,4),83.33],[Date.UTC(2013,9,5),100],[Date.UTC(2013,9,6),63.64],[Date.UTC(2013,9,7),98.31],[Date.UTC(2013,9,8),98.9],[Date.UTC(2013,9,9),64.71],]},]
});
});
This is a column graph showing the pass percentage.
I wanted to pass the numbers (passcount, total count) which were used to calculate the % vlaues, so that I can show them as tooltip. Is is possible?

yes this is possible and simple
pass the addl numbers in the series along with data
access them from tool tip as shown below from the formatter
tooltip:{
formatter: function() {
this.point.options.passCount
this.point.options.total
}
}
series:[{
data: [{
x: timestamp,
y: value,
passCount: someVlaue,
totalCount: someValue
},{
x: timestamp,
y: value,
passCount: someVlaue,
totalCount: someValue
},{
x: timestamp,
y: value,
passCount: someVlaue,
totalCount: someValue
}]
}]

Categories

Resources