malik_curtin February 2016

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

Answers


ocket-san February 2016

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>
 

Post Status

Asked in February 2016
Viewed 3,921 times
Voted 11
Answered 1 times

Search




Leave an answer