CODEWITHSUNDEEP
angularjshighcharts
Amin Mohammadi
Amin Mohammadi

Reputation: 183

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;
            });
        }
    };
}
]);

Upvotes: 0

Views: 358

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

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);
});

Upvotes: 1

Related Questions