Angularjs Devextreme component is not refreshing when dataSource is changed

Question

I am developing an ionic application by using Angularjs framework. I am facing a problem that my devextreme (dx-chart) component is not refreshing when my drop down change of value. When I console the value, I found my parameter succesfully pass to the function. However, my devextreme (dx-charts) component does not updated according to the new datasource. Any solution how to solve it?

The following is my source code.

Controller Code

.controller('DashCtrl', function($scope,  $http, $filter) {
        var defaultYear = 2017;
        var defaultMonth = 11;
        getPieChatsData(defaultYear, defaultMonth);

        $scope.showSelectYear = function(mySelectYear) {
            getPieChatsData(mySelectYear, defaultMonth);
        }

        $scope.showSelectMonth = function(mySelectMonth){
            getPieChatsData(defaultYear, mySelectMonth);
        }

        function getPieChatsData(defaultYear, defaultMonth)
        {
            $http.get('lib/stcust.json').then(function(response) {
                    var sales_targeted_year = ($filter('filter')(response.data, {caL_YEAR: defaultYear }));
                    var sales_targeted = ($filter('filter')(sales_targeted_year, {caL_MONTH: defaultMonth }));
                    var data_Source = new DevExpress.data.DataSource({
                        load: function () {
                            return VitalSignsDataService.ShowDataTable();
                        }
                    });
                    console.log(sales_targeted);

                    $scope.chartOptions = {
                        palette: "bright",
                        dataSource: sales_targeted,
                        title: "Targeted Sales",
                        legend: {
                            orientation: "horizontal",
                            itemTextPosition: "right",
                            horizontalAlignment: "center",
                            verticalAlignment: "bottom",
                            columnCount: 4
                        },
                        series: [{
                            argumentField: "cusT_CD",
                            valueField: "saleS_TARGET",
                            label: {
                                visible: true,
                                connector: {
                                    visible: true,
                                    width: 0.5
                                }
                            }
                        }]
                    };
            });
        }
})

HTML Code

<ion-view view-title="Pie Chats">
  <ion-content>
        <label class = "item item-input item-select">
            <div class = "input-label">
              Select Year
            </div>
            <select ng-model="mySelectYear" ng-change="showSelectYear(mySelectYear)">
                 <option>2016</option>
                 <option>2017</option>
                 <option>2018</option>
            </select>
        </label>
        <label class = "item item-input item-select">
            <div class = "input-label">
              Select Month
            </div>
            <select ng-model="mySelectMonth" ng-change="showSelectMonth(mySelectMonth)">
                 <option>1</option>
                 <option>2</option>
                 <option>3</option>
                 <option>4</option>
                 <option>5</option>
                 <option>6</option>
                 <option>7</option>
                 <option>8</option>
                 <option>9</option>
                 <option>10</option>
                 <option>11</option>
                 <option>12</option>
            </select>
        </label>
        <ion-item>     
            <div id="pie" dx-pie-chart="chartOptions"></div>
        </ion-item>
  </ion-content>
</ion-view>

Answer 1

Move the sales_targeted variable to the angularjs scope and bind it to the chart's data source using bindingOptions. See the code snippet below.

 
$scope.sales_targeted = [];

$scope.chartOptions = {
    palette: "bright",
    bindingOptions: {
        "dataSource": "sales_targeted"
    },
    title: "Targeted Sales",
    legend: {
        orientation: "horizontal",
        itemTextPosition: "right",
        horizontalAlignment: "center",
        verticalAlignment: "bottom",
        columnCount: 4
    },
    series: [{
        argumentField: "cusT_CD",
        valueField: "saleS_TARGET",
        label: {
            visible: true,
            connector: {
                visible: true,
                width: 0.5
            }
        }
    }]
};

function getPieChatsData(defaultYear, defaultMonth) {
    $http.get('lib/stcust.json').then(function(response) {
        var sales_targeted_year = ($filter('filter')(response.data, { caL_YEAR: defaultYear }));
        $scope.sales_targeted = ($filter('filter')(sales_targeted_year, { caL_MONTH: defaultMonth }));
    });
}