Column Chart is not updating / refresh using AngularJs

4 posts, 0 answers
  1. Hiren
    Hiren avatar
    2 posts
    Member since:
    Mar 2016

    Posted 24 May Link to this post

    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.

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    115 posts

    Posted 26 May Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Hiren
    Hiren avatar
    2 posts
    Member since:
    Mar 2016

    Posted 27 May in reply to Alex Hajigeorgieva Link to this post

    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.

     

  5. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    115 posts

    Posted 31 May Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready