Column Chart is not updating / refresh using AngularJs

[Hiren]

HTML

    <select class="col-xs-4" test-id="" ng-model="paymentYear" data-ng-options="item.key as item.value for item in paymentYears" ng-change="getChartData()"></select>

  <div kendo-chart k-options="riskScoreChart" class="chart-container"></div>

JS:

 var self = $scope;

init();

function init() {
            self.ramDashboard = [];
            self.riskScoreDetailsSeries = [];
            self.riskScoreDetailsLabels = [];
            self.paymentYears = [];
            getRamDashboardData();
        }

        function getRamDashboardData() {

             self.paymentYear = self.paymentYears[0].key;
             self.getChartData();
}

self.getChartData = function () {
            var requestData = { PaymentYear: '' };
            requestData.PaymentYear = self.paymentYear;
            dashboardService.getRamDashboardData.save(requestData,
                function(response) {
                    self.ramDashboard = response;
                    bindRiskScoreChart(response.riskScoreDetails);
                 
                });
        }

        function bindRiskScoreChart(riskScoreDetails) {

            self.riskScoreDetailsSeries = riskScoreDetails.datasets;
            self.riskScoreDetailsLabels = riskScoreDetails.labels;

            self.riskScoreChart = {
                chartArea: {
                    height: 300
                },
                legend: {
                    position: "top",
                    offsetX: -100
                },
                seriesDefaults: {
                    type: "column"
                },

                series: self.riskScoreDetailsSeries,
                valueAxis: {
                    labels: {
                        format: "{0}"
                    },
                    majorGridLines: {
                        visible: false
                    },
                    axisCrossingValue: 0
                },
                categoryAxis: {
                    categories: self.riskScoreDetailsLabels,
                    majorGridLines: {
                        visible: false
                    }
                }
                ,
                tooltip: {
                    visible: true,
                    format: "{0}",
                    template: "#= series.name #: #= value #"
                },
                seriesClick: onSeriesClick
            };
        }

Above code is working on with initial Dropdown value selection,but once we change the paymentYear value with Dropdown chart is not getting refreshed.

please help.

[Alex Hajigeorgieva]

Hello Hiren,

To bind a Kendo UI DropDownList widget and a Chart using Angular, please see my suggestions below:

- Configure separate DataSource instances for each widget

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource

- Bind a k-on-change function to the Kendo UI DropDownList and pass a kendoEvent so you can take advantage of the event sender value

http://docs.telerik.com/kendo-ui/AngularJS/introduction#event-handlers

- Get the kendoEvent.sender.value() which will be the selected year in your case

- Update the Kendo UI Chart DataSource to display only the selected year with filter 

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-filter

For your convenience, I have created a sample demo available here:

http://dojo.telerik.com/OVIkU/2

Should you have further questions, I will be glad to assist you.

Kind

Regards,
Alex
Telerik

 

 

[Hiren]

Hi,

Thank for the reply,

I do not want to use dataSource for binding ,I need to bind data on series and category axis level,

below is my data format,

        self.riskScoreDetailsSeries = [
                {
                    "name": "test1 ",
                    "data": [0.982, 0.69, 0.556, 0.902],
                    "color": "#004b87"
                }, {
                    name: "test2",
                    data: [2, 2, 2, 2],
                    color: '#50b3cf'
                }, {
                    name: "test3",
                    data: [3, 3, 3, 3],
                    color: '#6bd33f'
                }, {
                    name: "test4",
                    data: [4, 4, 4, 4]
                }];

            self.riskScoreDetailsLabels  = ["Cat1", "Cat2", "Cat3", "Cat4"];

could you please provided example with the use of above code.

 

[Alex Hajigeorgieva]

Hi Hiren,

Now I understand that you do not wish to bind to the Kendo UI Chart's DataSource.

Without DataSource binding, a change in the options cannot be handled automatically. Please add k-rebind attribute to the <div> from which the Chart is initialized. The k-rebind attribute ensures that a widget is recreated when the assigned scope property changes its value.

For more information and an example - please see the documentation link below:

http://docs.telerik.com/kendo-ui/AngularJS/introduction#widget-update-upon-option-changes

Regards,
Alex
Telerik