Amin Mohammadi Amin Mohammadi - 6 months ago 139
AngularJS Question

Highcharts can not update diagram using angular.js

I'm working on a project which uses Highcharts and Angularjs and fetches data using SignalR. The problem is the pie chart initializes correctly but can not update the diagram with the data comes from server. here is my code:

'use strict';

angular.module('mbCharts').directive('mbGauge', [
'mbWebMetricsService',
function (mbWebMetricsService) {
return {
//
// scope is inherited from the widget using this directive
//
templateUrl: '/ext-modules/mbCharts/mbGaugeTemplate.html',

link: function (scope, el, attrs) {
Highcharts.chart(el[0], {
chart: {
type: 'pie'
},
title: {
text: scope.title
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
data: [{
name: "Microsoft Internet Explorer",
y: 100
}, {
name: "Chrome",
y: 0,
sliced: true,
selected: true
}]
}]
});

// locate the widget showing this gauge
var widget = el.closest('.gridster-item');


// monitor the widget's size
widget.resize(function () {
//if (scope.chart != null) {
// scope.chart.chartWidth = widget.width();
// scope.chart.chartHeight = widget.height();
//}
});

//scope.title = mbWebMetricsService.getTitleForMetric(scope.metric);
scope.title = "CPU percentage";
scope.initialized = false;

scope.$on('mbWebMetricsService-received-data-event', function (evt, data) {
var val = Math.round(data[scope.metric]);
scope.chart.series[0].data[0].y = val;
scope.chart.series[0].data[1].y = 100 - val;
});
}
};
}
]);

Answer

The problem is how you want to update data. It's not about changing options in chart object, but using proper API. To update points, use chart.series[index].data[pointsIndex].update().

So in your case, first store a chart object:

var myChart = new Highcharts.Chart(el[0], { ... });

Then update points:

scope.$on('mbWebMetricsService-received-data-event', function (evt, data) { 
  var val = Math.round(data[scope.metric]); 
  myChart.series[0].data.update(val);
  myChart.series[0].data.update(100 - val);
});