Update Amcharts Data In Angular-amcharts

I am using amchart to render a chart with JSON data which is an API response data, and its working perfectly. Now I have to update the data on the basis of a selection dropdown whi

Solution 1:

You can reset amchart with ng-if that already exist in your template. After data loaded you just $scope.amChartOptions.data = $scope.monthdata.

$scope.amChartOptions = {
                data : [],
                type: "serial",
                theme: "light",
                marginRight: 80,

                balloon: {
                    cornerRadius: 6,
                    horizontalPadding: 15,
                    verticalPadding: 10
                  },
                  chartScrollbar: {
                        enabled: true,
                    },
                valueAxes: [
                    {

                      gridAlpha: 0.5,
                      gridColor: '#dddddd',
                    }
                  ],
                graphs: [
                    {
                      bullet: 'square',
                      bulletBorderAlpha: 1,
                      bulletBorderThickness: 1,
                      fillAlphas: 0.5,
                      //fillColorsField: 'lineColor',
                      legendValueText: '[[value]]',
                      //lineColorField: 'lineColor',
                      title: 'power',
                      valueField: 'power'
                    }
                  ],

                  chartCursor: {
                      //categoryBalloonDateFormat: 'MMM',
                      cursorAlpha: 0,
                      fullWidth: true
                    },
                //dataDateFormat: "MM",
                categoryField: "month",

                export: {
                    enabled: true
                };

$scope.changeYearFunction = function(){

       $scope.finishloading = false;
       console.log($scope.selectedYear);
       chartService.getDataByMonth($scope.selectedYear).then(function(response){

           $scope.monthdata = response.data;
           $scope.finishloading = true;

           $scope.amChartOptions.data = $scope.monthdata;

           $scope.$apply();

       })
}