CODEWITHSUNDEEP
angularjsgoogle-visualization
BoCode
BoCode

Reputation: 925

how to update google chart?

Am new to angularjs/googlecharts and learning on the job. I've the following code in my controller which renders the piechart initially and has no issues.

There is a slider directive, which when changed (basically a date range slider), should update the columnchart with new data. But I don't know how to update the piechart data. I do get the new data from the backend without any problems though.

Here is the initialization code in controller:

                $scope.piechart = {};
                $scope.piechart.type ='PieChart';                   
                piechartData = response.data.piechart;
                var piechartoptions = {
                    'min-width':800,
                    'max-width':320,
                    'is3D':true,
                    'pieSliceText': 'label',
                    'pieSliceTextStyle': {fontSize: 10},
                    'chartArea' : { left: 30, top: 60 },
                    'backgroundColor': {fill:'transparent'},
                    'legend': {'textStyle':{'color': 'white',
                                            'fontSize': 12},
                               'position': "top",
                               'maxLines':10,
                               'alignment':"start"},
                    'height':500
                };

         $scope.piechart.data = new google.visualization.DataTable(piechartData);
         $scope.piechart.options = piechartoptions;
         $scope.piechart.formatters = {};

In the directive (which is used in the html that the above controller's scope resides in), I've access to the chart like the following:

scope.$parent.piechart

So in a very naive way i did this but to no avail:

scope.$parent.piechart.data = new google.visualization.DataTable(response.data.piechart)

TIA for all the help.

Upvotes: 0

Views: 2003

Answers (2)

Valiant
Valiant

Reputation: 108

I bumped into this issue today. An easy quick fix is to simply write this.chartData = Object.assign([], this.chartData) to reassign to the exposed dataset property into your component so it triggers change detection.

More information from this issue in a different library: valor-software/ng2-charts#959 (comment)

Hope this helps weary travellers :)

Upvotes: 1

Jay Shukla
Jay Shukla

Reputation: 5826

To achieve this you need to create watch on your slider model so when it gets change you need to update your pie chart model so it'll automatically update.

Watch

$scope.$watch('sliderModel',function(n,o) {
      // update your new pie chart data here, I think you need to update below model only
    $scope.piechart.data = new google.visualization.DataTable(piechartData);
}

It just an example. You have to update it with new data for pie chart.

Proper Angular way to use google chart

You should use google-chart directives to plot pie chart so this kind of problems will be solved automatically.

Have a look here - Angular-google-chart

Upvotes: 0

Related Questions