Using the 'highcharts-ng' custom directive in my AngularJS app to generate charts has been successful when using scope-defined data. However, I encountered an error when attempting to fetch data from a REST API using $resource calls through a Factory:
Check out the JSFiddle using scope-defined data
For the REST-driven version, here is the function for querying data:
function getData(start, end) {
return measurementsFactory
.getMeasurements(start, end)
.then(function(response) {
return response.data;
});
}
The initChart function that is driven by REST then looks like this:
function initChart() {
vm.chartConfig.title.text = 'New Title';
var yAxis = inityAxis();
vm.chartConfig.yAxis = yAxis;
getData(moment(0).valueOf(), moment().valueOf()).then(function(data) {
var series = initSeries(data);
vm.chartConfig.series = series;
vm.chartConfig.navigator.series = series;
});
}
The 'data' array returned is identical to the 'vm.testData array' in the JSFiddle. The chart loads without errors and appears the same as with the scope-defined data JSFiddle.
The REST-driven version of afterSetExtremes:
function afterSetExtremes(e) {
if (e.trigger != undefined) {
getData(Math.round(e.min), Math.round(e.max)).then(function(data) {
var series = initSeries(data);
vm.chartConfig.series = series;
});
}
}
The Challenge:
Upon attempting to set the time range using buttons, input, or the navigator, an error occurs:
TypeError: Cannot read property 'hoverSeries' of undefined
at p.destroy (highstock.js:305)
// more error messages here
and the navigator series disappears. How should I proceed?
Edit 1 (2017-09-01)
Here's a modified JSFiddle accessing a simulated REST service
But now, a different error occurs when drawing the chart.
TypeError: Cannot read property 'breaks' of undefined
// more error messages here
Edit 2 (2017-09-05)
Take a look at this updated Highcharts JSFiddle that functions as intended (with minor axis modifications).