Changing Kendo chart type by model binding in AngularJS -
edit : have reproduced issue in here .. http://dojo.telerik.com/@salmal/ocali
i new kendo ui , using kendo directives in angular app . have requirement change type of the chart using event . let's example when user clicks on button want change chart bar chart pie chart . please refer 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 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 code </button> in above code update() function executed , assigning "pie" chart type $scope.charttype variable . doesn't reflect in view . means angular model binding isn't working . missing fundamental here ? appreciated ..
i pretty sure $scope.charttype not being watched. need kind of redraw function charts (i think, not familiar kendo ui) or find way update chart. basically, should this:
$scope.$watch("charttype", function(newvalue, oldvalue) { if(newvalue !== oldvalue) { //redraw chart } }, true); edit fixed using code in editor. here 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 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 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 paste in dojo editor, works. need watch, didn't know how handle kendo directive. found answer kendo directive change here. sorry wrong explanation in original answer.
to explain bit: made new variable options. put options on k-rebind, because directive seems watching k-rebind changes. want kendo directive watch data changes , type changes. need watch charttype , when changes, apply changes property of variable bound k-rebind.
Comments
Post a Comment