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
Related
I have configured a chart to use connectNulls.
What I am expecting is that the chart will draw lines to and from the edges of the chart:
(x=0 and x=n)
How do I get the chart to draw lines from the left edge (for the missing data points) to the right edge.
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
title: {
text: 'Connect Nulls'
},
plotOptions: {
series: {
connectNulls: true,
}
},
series: [
{
type: 'line',
name: data()[0][0],
data: data()[0][1]
},
}
http://jsfiddle.net/0qzrbnks/
edit
I have added a null value to series D0806, and it's still not connecting it?
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 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.
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
I'm using highcharts in my web application and I was wondering if there's any way to rename a series after the chart hast been created??
Thanks in advance!!
actually, there's a way now. In highchars 3.0 series added a new api, called update:
chart.series[0].update({name:"name u want to change"}, false);
chart.redraw();
it will not only update the series name below the chart, but the name in tooltip as well.
Cheers!
This seems to work :
chart.series[1].name="Renamed";
chart.redraw();
There is no method for doing this in the API. You could remove the series and add it again with another name, but that will make the animations run a second time and I think it will be colored with a new color as well.
It is not required to Redraw chart again
We can include it along with the series option in the Chart declaration as below:
var chart = new Highcharts.Chart({
chart: {
renderTo: '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 () { return ddd[this.value][0]; }, //<=== the value to plot chart
}
},
series: [{
data: ddd,
name: SeriesName
}]
});
You can use the following to change the series name:
$(chart.series[0].legendItem.element).children('tspan').text('newLabelName');