CODEWITHSUNDEEP
angularjsangularjs-directivekendo-uikendo-gridkendo-chart
Malik
Malik

Reputation: 3690

Changing Kendo chart type by model binding in AngularJS

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 ..

Upvotes: 2

Views: 1983

Answers (1)

ocket-san
ocket-san

Reputation: 884

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.

Upvotes: 2

Related Questions