I am a newcomer to highcharts and I am currently attempting to retrieve JSON data from a web service and display it on a bar chart. However, I am encountering some unusual behavior. When I use $http.get()
to fetch the data and set the series to the JSON string like so: series: '$scope.jsondata'
, the chart displays some unexpected legends but the bars do not show up.
In contrast, if I manually copy and paste all the JSON data from this URL directly into the series field, the chart works perfectly fine.
I have created a Plunker demo that illustrates this issue. You can simply paste the provided JSON data into the series field to see everything functioning correctly.
EDIT: While I have not implemented it yet, I plan to utilize $interval
to update the data at regular intervals. Here is an example of how I intend to do this:
$http.get(fullUrl).success(function(data2) {
$scope.records = [];
data2.forEach(function(r) {
$scope.records.push(r);
});
});
mainInterval = $interval(function() {
$http.get(fullUrl).success(function(data2) {
$scope.records = [];
data2.forEach(function(r) {
$scope.records.push(r);
});
});
}, 5000);
One suggestion was to create the chart within the callback of $http.get()
, but I am concerned that this approach might interfere with the $interval
functionality.