Changing Kendo chart type by model binding in AngularJS

Question

EDIT : I have reproduced the issue in here .. http://dojo.telerik.com/@Salmal/OcALi

I am new to Kendo UI and I am using kendo directives in my angular app . I have a requirement to change the type of the the chart using an event . Let's say for an example when user clicks on a button i want to change the chart from bar chart to pie chart . Please refer my code below .

Controller.js

$scope.chartData = [
        {
            "name": "Books",
            "amount": 200
        },
        {
            "name": "Newspapers",
            "amount": 320
        },
        {
            "name": "Magazines",
            "amount": 225
        },
        {
            "name": "Shoes",
            "amount": 400
        }
      ];

      $scope.update = function () {
          $scope.ChartType = { type: 'pie' };
      };

      $scope.ChartType = {type: 'bar' };

View.html

    <div class="demo-section k-content wide">
    <div>
        <h4>Hover some series</h4>
        <div kendo-chart
             k-legend="{ position: 'bottom' }"
             k-series-defaults="ChartType"
             k-series="[{ field: 'amount', categoryField: 'name'}]"
             k-data-source="chartData"
             k-rebind="chartData">
        </div>
    </div>
</div>
<button kendo-button ng-click="update()">
    Update from code
</button>

In the above code the update() function get executed successfully , also assigning "pie" chart type to the $scope.ChartType variable . But this doesn't reflect in the view . Which means the Angular model binding isn't working . I am missing something fundamental here ? Any help would be much appreciated ..

score 2 · Accepted Answer · edited May 23 '17 at 12:31

I am pretty sure that $scope.ChartType is not being watched. You will need to do some kind of redraw function for your charts (I think, i am not familiar with kendo ui) or find a way to update the chart. Basically, it should look like this:

$scope.$watch("ChartType", function(newValue, oldValue) {
     if(newValue !== oldValue) {
         //redraw the chart
     }
}, true);

Edit I fixed it using your code in the editor. Here it is:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css"/>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
    <style>
    html {
        font-size: 14px;
        font-family: Arial, Helvetica, sans-serif;
    }
    </style>
</head>
<body>

<div ng-app="app" ng-controller="MyCtrl">

  <div class="demo-section k-content wide">
      <div>
          <h4>Hover some series</h4>
          <div kendo-chart
               k-legend="{ position: 'bottom' }"
               k-series-defaults="options.chartType"
               k-series="[{ field: 'amount', categoryField: 'name'}]"
               k-data-source="options.dataSource"
               k-rebind="options">
          </div>
      </div>
  </div>
  <button kendo-button ng-click="update()">
      Update from code
  </button>
  <br/>
  <br/>
  {{ChartType}}
</div>
<script>

angular.module("app", ["kendo.directives"]).controller("MyCtrl", function($scope) {
    $scope.chartData = [
        {
            "name": "Books",
            "amount": 200
        },
        {
            "name": "Newspapers",
            "amount": 320
        },
        {
            "name": "Magazines",
            "amount": 225
        },
        {
            "name": "Shoes",
            "amount": 400
        }
      ];

      $scope.update = function () {
          console.log("doing update");
          $scope.ChartType = { type: 'bar' };
      };

      $scope.ChartType = { type: 'pie' };

      $scope.options = {
        chartType: $scope.ChartType,
        dataSource: $scope.chartData
      };

      $scope.$watch("ChartType", function(newValue){
        $scope.options.chartType = newValue;
      });

});
</script>
</body>
</html>

If you paste that in that dojo editor, it works. You do need to watch, i just didn't know how to handle the kendo directive. I found the answer to the kendo directive change here. Sorry for the wrong explanation in the original answer.

To explain a bit: I made a new variable options. I put the options on the k-rebind, because the directive seems to be watching the k-rebind for changes. But i want the kendo directive to watch for data changes AND type changes. Then you need to watch the chartType and when it changes, apply the changes to the property of the variable bound to the k-rebind.

Thanks for the reply . But i don't think i need to use "watch" to use the binding . When you change the scope variable from view , it should update it in the ctrl as well. But the problem here is that , the When kendo is rendered , The chartType variable lose its connection with the Original chartType variable . It is mentioned here . http://docs.telerik.com/kendo-ui/AngularJS/data-source#update-the-datasource-object — Malik, Feb 09 '16 at 04:19
You are right. I completely explained it the wrong way. but i fixed it though — ocket-san, Feb 09 '16 at 07:35
Thank you for the neat explanation . k-bind did the trick :) Pity they don't have thorough documentation on this though . — Malik, Feb 09 '16 at 08:09

Changing Kendo chart type by model binding in AngularJS

1 Answers1