I have a highcharts chart that is dynamically updated. I add the values to the series using the "AddPoint" function on the series. Here is how I am initializing the chart.
var _trendToolChart = null;
var _trendSeries = null;
function createTrendTool() {
_trendToolChart = Highcharts.chart('trendToolContainer', {
chart: {
type: 'spline',
zoomType: 'x',
panning: true,
panKey: 'shift'
},
title: {
text: 'Trending Signals'
},
yAxis: {
title: {
text: 'Values'
}
},
xAxis: {
title: {
text: 'Time'
},
type: 'datetime'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: true
}
}
},
responsive: {
rules: [{
condition: {
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
_trendToolChart.showLoading("Loading...");
}
I keep the _trendToolChart variable as a global reference for later. On the regular I query our API to get a value. The value return is an x value of a datetime and a y value of a decimal. Since I have a multi line series, I have a WebId associated with each line on the chart itself. I find the series by this GUID, then add a point to the series.
Here's inside the function when I call it on the second:
var xValue = Date.UTC(apiResponse.DateString); // convert str to date
var yValue = apiResponse.Value; // decimal value
var point = [xValue, yValue];
// add to series & graph
var chartSeries = $.grep(_trendToolChart.series, function (e) { return e.userOptions.WebId == apiResponse.elemId; })[0];
chartSeries.addPoint(point);
_trendToolChart.redraw();
When I add these values to the chart, highcharts instead adds the x value as integer counts, not as a date. Here's the check inside the response function on chrome's developer side:
So instead of a series of ["11/27/2017",22] I get [0, 22] in my x values. And it shows on my chart, my xaxis labels has a "0" or 1 and not a Date.
Here's what I tried, instead of addPoint([Date,number]);, I've done addPoint ({x:Date, y:number}); Now that showed in the points on the highchart series with a date value, but then on my chart visually I saw, ZERO points added after the redraw.
What am I doing wrong?
Alright, it seems that the object being put in the x value was not a date, despite what it seems. It was actually a string.
So this returns a string:
Date("2017-11-27")
As a result, highcharts didn't know how to interpret that as a datetime, since I told it to do datetime in the options. The solution was this:
moment("2017-11-27").ToDate()
This returned a proper date object, and highcharts was able to interpret.
Related
I have a simple Highchart with a dataset of up to 1000 datas. There are only y values the x values are generated automatically. Also, the values come from my nodejs server so please don't be surprised about the notation.
Now I want 3 special values whose x and y values are known to be highlighted. In which way doesn't matter for now.
One possibility would be to show the point at the location, otherwise they are not displayed. The problem I have is that I don't know how to control a specific point.
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'chart-emg1',
type: 'line'
},
title: {
text: 'EMG 1'
},
xAxis: {
tickInterval: 1
},
yAxis: {
title: { text: 'Voltage'}
},
series: [{
data: [<%-data1 %>]
}]
});
You can use the load event and update specific points. For example:
events: {
load: function() {
this.series[0].points.forEach(point => {
const isPointToHighlight = pointsToHighlight.some(
p => p.x === point.x && p.y === point.y
);
if (isPointToHighlight) {
point.update({
color: 'red',
marker: {
enabled: true
}
}, false);
}
});
this.redraw();
}
}
Live demo: http://jsfiddle.net/BlackLabel/tLd3j78f/
API Reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Point#update
I am trying to display a set of dynamic data in a spline type chart using highcharts.
My spline type line chart has 4 series of data that needs to update through a service call. Service returns an array of data such as [0.345, 0.465, 0, 0.453] and I want to update y value of each series with the respective value in the array.
But my chart does not draw the data as expected. Even if I receive different values for y, in the chart it always displays it as 0.
This is my source code. Greatly appreciate if someone could help me figure out the issue in this or a give solution to this problem.
function drawHighChart() {
hchart = Highcharts.chart('container', {
chart: {
type: 'spline',
animation: Highcharts.svg,
marginRight: 10,
},
time: {
useUTC: false
},
title: {
text: 'Audio Analytics'
},
xAxis: {
tickInterval: 1,
},
yAxis: {
title: {
text: 'Prediction'
},
min: 0,
max: 1,
tickInterval: 0.5,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
headerFormat: '<b>{series.name}</b><br/>',
pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
/* Initially I'm setting some hardcoded values for each series.*/
series: [{
name: 'Calm',
data: [0.43934, 0.52503, 0.57177, 0.69658, 0.97031, 0.119931, 0.137133]
}, {
name: 'Happy',
data: [0.24916, 0.24064, 0.29742, 0.0000, 0.32490, 0.0000, 0.38121]
}, {
name: 'Angry',
data: [0.11744, 0.17722, 0.16005, 0.19771, 0.20185, 0.24377, 0.32147]
}, {
name: 'Disgust',
data: [0.7988, 0.15112, null, 0.22452, 0.34400, null, 0.34227]
}],
});
}
Now when I call drawHighChart() at the windows onload this is what it outputs.
Now from here, I need to update each series dynamically as service returns a data array.
This is my function that updates the chart dynamically every time the service returns a response. Every time I call this fucntion, I pass a data array constructed from the response data.
initiVal = 7; //This is a gloabl variable that increases x-axis value from 7.
function updateHighChart(dataArray) {
var series = hchart.series[0];
var series1 = hchart.series[1];
var series2 = hchart.series[2];
var series3 = hchart.series[3];
var x = initiVal;
y = dataArray[0];
y1 = dataArray[1];
y2 = dataArray[2];
y3 = dataArray[3];
console.log("dataArray: " + dataArray);
series.addPoint([x, y], true, true);
series1.addPoint([x, y1], true, true);
series2.addPoint([x, y2], true, true);
series3.addPoint([x, y3], true, true);
initiVal++;
}
But even if data is dynamically assigned to y axis values in each series, they do not update as expected in the chart. This is how the charts looks after the 6th second/instance when data needs to dynamically update in the chart.
My Requirement
I want to label the X-Axis of multi-series graph from multi-dim array.
HighChart script
var chart_PT1 = new Highcharts.Chart({
chart: {
height: 532,
renderTo: 'review_high_container'
},
title: {
text: 'IO Signal Data'
},
subtitle: {
text: 'Source: GPS Modem'
},
yAxis: {
title: {
text: 'Value'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
xAxis: {
type: 'datetime',
labels: {
enabled: true,
formatter: function () { try { return ddd[i][this.value][0]; } catch (err) { } },
}
},
});
for (i = 0; i < ddd.length; i++) {
chart_PT1.addSeries({ name: name[i], data: ddd[i], turboThreshold: 5000 });
}
My data array
Its an multi dim array signals=[] say 3 as shown below
signals[0] = {"Signal1",signalData[]} <=== signalData has say 20 data
signals[1] = {"Signal2",signalData[]} <=== signalData has say 10 data
signals[2] = {"Signal3",signalData[]} <=== signalData has say 80 data
signalData[] is expected to have the data for the signal say
signalData[0] ==> Value, TimeReceived,ID
signalData[1] ==> Value, TimeReceived,ID
signalData[2] ==> Value, TimeReceived,ID
.
.
.
signalData[20] ==> Value, TimeReceived,ID
Likewise signals[1].signalData[] and signals[2].signalData[] is expected to have data for its corresponding signals.
Each data in signalData includes data for value,TimeReceived and ID. So signals[0].signalData will contain array of data for signalOne; signals[1].signalData will contain array of data for signalTwo;
signals[2].signalData will contain array of data for signalThree;
and so on...
The graph would show one line for each signal(in this case 3 lines)
My Problem
I not able to label the X-Axis with the Time Value available inside the array - signals.signalData. Each signal may or may not have the same time within the array signals. So labelling by signals.signalData[0] do not pose right for other series signals.signalData[1],signals.signalData[2]....
How do I label X-Axis for the multi series?
Whats the best option to do this? as I see the time value inside the array say signals.signalData[0] may not be aligned with the the time value inside signals.signalData[1]
Update
Sample Data
signals ={
{ "SignalOne", {{"42","2/20/2018 05:25:09","S11"},{"99","2/20/2018 06:17:13","S12"},{"89","2/20/2018 07:25:09","S13"} },
{ "SignalTwo", {{"118","2/20/2018 05:25:09","S21"},{"33","2/20/2018 06:17:13","S22"} }
{ "SignalThree", {{"333","2/20/2018 05:25:09","S31"},{"43","2/20/2018 06:17:13","S32"},{"43","2/20/2018 06:17:13","S33"},{"43","2/20/2018 06:17:13","S34"} }
};
I am using HighChart to plot Graph of the Telemetry data saved in cloud
Data Points on X-Axis is : Time
Data Points on Y-Axis is : Value
My Issue:
When the data requested is huge say >9000, HighChart errs out and doesn't plot the graph. (Note : I haven't checked the count limit , Hight Chart is able to plot- but when the number is smaller it always plots the graph)
What is the limit of data
Is there any limit of data to plot the graph?
Or is it that I have missed out something that handles this.
Please suggest a way to solve this issue.
The graph used to plot Chart in my app is
var chart_PT1 = new Highcharts.Chart({
chart: {
renderTo: 'signal_high_container'//'PT_1_high_container',
},
title: {
text: 'IO Signal Data'
},
subtitle: {
text: 'Source: GPS Modem'
},
yAxis: {
title: {
text: 'Value'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
xAxis: {
type: 'datetime',
//categories: dddDate,
labels: {
enabled: true,
formatter: function () { return ddd[this.value][0]; },//<===== throw error here
}
},
series: [{
data: ddd,
name: SignalName
}]
});
});
It throws an exception in formatter at ddd[this.value][0] saying something like the index for ddd[this.value] not valid
xAxis: {
....
formatter: function () { return ddd[this.value][0]; },//<===== throw error here
Newer versions of highcharts have a turboThreshold option under plot options that places restrictions on data > 1000 plots. Look-up 'turboThreshold' in the docs for a better explanation.
Ref: https://api.highcharts.com/highcharts/plotOptions.series.turboThreshold
I am using Highcharts to plot JSON Data. The dates are in the string format.
JSON Data:
[{"BRENT_SPOT":70.88,"TRADE_DATE":"31-JUL-2009"},{"BRENT_SPOT":73.28,"TRADE_DATE":"03-AUG-2009"},{"BRENT_SPOT":74.31,"TRADE_DATE":"04-AUG-2009"},{"BRENT_SPOT":74.96,"TRADE_DATE":"05-AUG-2009"},{"BRENT_SPOT":74.4,"TRADE_DATE":"06-AUG-2009"},{"BRENT_SPOT":72.84,"TRADE_DATE":"07-AUG-2009"},{"BRENT_SPOT":73.29,"TRADE_DATE":"10-AUG-2009"},{"BRENT_SPOT":72.04,"TRADE_DATE":"11-AUG-2009"}]
HighCharts / JQuery Code :
<script>
var chart;
$(function() {
var options = {
chart: {
renderTo: 'container',
zoomType: 'xy',
type: 'line'
},
title: {
text: 'Brent Daily Price Curve (FPC as at <cfoutput>#f_date#</cfoutput>)'
},
xAxis: {
labels: {
rotation: 45,
step: 3
},
type: 'category'
},
yAxis: {
lineWidth: 1,
title: {
text: '$ USD'
},
min: 0
},
series: []
};
$.getJSON("brentpricehc_test.cfm?f_date=<cfoutput>#f_date#</cfoutput>", {}, function(jsonResult) {
var BrentUSDPrice = {
name: "Brent Spot (USD)",
type: "line",
data: [],
marker: {
radius: 2
}
};
$(jsonResult).each(function(index) {
BrentUSDPrice.data.push([this.TRADE_DATE, this.BRENT_SPOT]);
});
/*options.series[0] = BrentUSDPrice;*/
options.series.push(BrentUSDPrice);
chart = new Highcharts.Chart(options);
});
});
</script>
I'm unable to plot any values wrt each of the date strings. I tried converting the JSON dates to datetime instead but still the same issue.
Few More details (for testing purposes):
Modifying to the below line plots the graph with the correct "brent_spot" values. This means that the issue lies with the way the "trade_dates" are 'not' plotting.
BrentUSDPrice.data.push([index, this.BRENT_SPOT]);
Edit 2 : (Using Datetime type to make the code work)
JSON Data (New): Returned as TO_CHAR(TRADE_DATE, 'YYYY/MM/DD')
[{"BRENT_SPOT":70.88,"TRADE_DATE":"2009\/07\/31"},{"BRENT_SPOT":73.28,"TRADE_DATE":"2009\/08\/03"},{"BRENT_SPOT":74.31,"TRADE_DATE":"2009\/08\/04"},{"BRENT_SPOT":74.96,"TRADE_DATE":"2009\/08\/05"},{"BRENT_SPOT":74.4,"TRADE_DATE":"2009\/08\/06"},{"BRENT_SPOT":72.84,"TRADE_DATE":"2009\/08\/07"},{"BRENT_SPOT":73.29,"TRADE_DATE":"2009\/08\/10"},{"BRENT_SPOT":72.04,"TRADE_DATE":"2009\/08\/11"}]
$(jsonResult).each(function(index) {
BrentUSDPrice.data.push([new Date(this.TRADE_DATE), this.BRENT_SPOT]);
});
Server side language used : Coldfusion
Database : Oracle
Am I doing something silly somewhere?
I have just tried your code, and it works perfectly fine, see: http://jsfiddle.net/3bQne/1026/
I guess, you need to update to Highcharts 3.0.10 to get this working.
If you are using type: 'category' then you need to assign name: to the data points. See the categories entry at http://api.highcharts.com/highcharts#xAxis
If categories are present for the xAxis, names are used instead of numbers for that axis. Since Highcharts 3.0, categories can also be extracted by giving each point a name and setting axis type to "category".
So the question is whether you are using Highcharts 3.0 and if you do then it needs to look something like this:
data: [{
name: 'Point 1',
color: '#00FF00',
y: 0
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
see: http://api.highcharts.com/highcharts#series.data