[Solved] Kendo chart is not getting refresh on updating series, series defaults options - AnjularJS Custom directive

[prasad reddy mamilla]

I am new to Angular JS and having basic knowledge on
directives, modules, controllers and scope.

I got a requirement to develop multiple kendo charts with
Angular JS so decided to make a “custom directive” for kendo charts to make it
reusable throughout the project.

I am able to declare all the chart options like data source,
series, series defaults, legend position and categories in custom directives.
This is working at the time of initial load. But, once I change the data source
(data source is scope variable in controller) the chart is not getting
reflected.

This is an urgent requirement for us. Please help me on this
to come out from tough situation. Any help is highly appreciated on below
areas:

1.      
I have filter area along with refresh button.
User selects the filter conditions and click on refresh button. On clicking
refresh, I need to update the chart. But, initially loading is happening not on
updating anyone of the value.

2.      
Need to update the custom directive template
(kendo chart) on updating anyone of the chart properties like data source,
series, series defaults, legend position and categories.

Below is the code I tried:

Custom Directive:

var app = angular.module("myserviceApp", ['kendo.directives']);

 

app.directive('customdirectiveforkendochart', function () {

return {

        restrict: 'E',

        scope: {           

            legendposition: '=',

            datasource: '=',

            seriesdefaults: '=',

            chartseries: '=',

            categoryAxis: '='

        },

        controller: ['$scope',function ($scope) {

                   }],

        link: function (scope, element, attrs) {           

            scope.$watch("chartseries", function (value) {

//Tried
to update the chart on changing of chart series but no luck.

                scope.series = new
kendo.dataviz.SeriesBind(scope.chartseries);            });           

        },

        template: '<div kendo-chart k-legend="legendposition"
k-series-defaults="{{seriesdefaults}}"
k-series="chartseries"
k-category-axis="{{categoryAxis}}"></div'

    };

});

 

Controller:

 

var app = angular.module("myApp", ['myserviceApp','kendo.directives']);

 

app.controller("myCtrl", function ($scope, $compile)
{

 

$scope.legendposition
= "top";

 

    $scope.seriesDefaults = {

        type: "line",

        stack: false

    };

 

    $scope.series = [

              {

                 
name: "Sample Seats",

                 
data: $scope.seats //Array of values

              },

            {

                name: "Sample user count",

                data: $scope.activeUsers
//Array of values

            }

    ];

 

    $scope.categoryAxis = {

        categories: $scope.categories,

        baseUnit: $scope.category,

        majorGridLines: {

            visible: false

        }

    };

}

HTML:

<'customdirectiveforkendochart' legendposition="legendposition" seriesdefaults="seriesDefaults" chartseries="series" category-Axis="categoryAxis"  ></customdirectiveforkendochart>               

[T. Tsonev]

Hi,

Thank you for the detailed description of the problem.

The Chart will not respond to changes to its options directly.
They are not observable objects and it will not get notified upon changes made through the scope.

In order to apply new options you need to call the setOptions method.
If the chart has a data source, as in this demo, then changing only the data source data is sufficient.

I hope this helps.

Regards,
T. Tsonev
Telerik