Multi-axis chart with AngularJS

[Zak]

Hi,

I'm trying to add a multi-axis chart to my AngularJs application and as I couldn't find an example I've been improvising. I'm looking at your AngularJS and MultiAxis example and here is what I've got: 

 HTML:

<div kendo-chart
       k-legend="{ position: 'bottom' }"
       k-series-defaults="{ type: 'line' }"
       k-series="vm.kendoSeries"
       k-axes="vm.kendoAxes"
       k-category-axis="vm.kendoCategoryAxis"></div>

 

JavaScript:

        vm.kendoSeries = [
            {
                type: "line",
                data: [6, 10, 10, 10, 10, 9, 5, 5, 10, 8, 8, 5, 8, 11, 9, 15, 20, 23, 24, 21, 21, 20, 22, 22, 20, 18, 16, 15, 20, 13.2, 18],
                name: "Max. Temperature [&deg;C]",
                color: "#ff1c1c",
                axis: "temp"
            }, {
                type: "line",
                data: [-5, -6, 0, -4, -3, -5.2, -5, -1.7, -1, 0, -0.4, -2, -2, -5, 4, -2, -4, -1, -1, 2, 4, -1, 1, 1, 4, 0, -1, 1, -2, 5.7, 5],
                name: "Min. Temperature [&deg;C]",
                color: "#ffae00",
                axis: "temp"
            }, {
                type: "area",
                data: [16.4, 21.7, 35.4, 19, 10.9, 13.6, 10.9, 10.9, 10.9, 16.4, 16.4, 13.6, 13.6, 29.9, 27.1, 16.4, 13.6, 10.9, 16.4, 10.9, 24.5, 10.9, 8.1, 19, 21.7, 27.1, 24.5, 16.4, 27.1, 29.9, 27.1],
                name: "Wind Speed [km/h]",
                color: "#73c100",
                axis: "wind"
            }, {
                type: "area",
                data: [5.4, 2, 5.4, 3, 2, 1, 3.2, 7.4, 0, 8.2, 0, 1.8, 0.3, 0, 0, 2.3, 0, 3.7, 5.2, 6.5, 0, 7.1, 0, 4.7, 0, 1.8, 0, 0, 0, 1.5, 0.8],
                name: "Rainfall [mm]",
                color: "#007eff",
                axis: "rain"
            }
        ];

        vm.kendoAxes = [
            {
                name: "rain",
                color: "#007eff",
                min: 0,
                max: 60
            }, {
                name: "wind",
                color: "#73c100",
                min: 0,
                max: 60
            }, {
                name: "temp",
                min: -30,
                max: 30
            }
        ];

It doesn't work and I get "Error: Unable to locate value axis with name wind" error in browser console. 

Can you help me to set it up?

Also, where can I find more Angular - specific documentation, if you have any?

Thanks!

 

[Iliana Dyankova]

Hi Zak,

You should use k-value-axes (not k-axes). For your convenience I prepared a dojo example.

Regarding the docs, check the link below: 
http://docs.telerik.com/kendo-ui/AngularJS/introduction

Regards,
Iliana Nikolova
Telerik

 

 

[Zak]

Hi Iliana, 

Thank you very much, it worked.

I have another question though. Is it possible to update the chart from AngularJS controller? It doesn't update by itself when the values are changed, although this would be nice, see how Chart.js does it: http://jtblin.github.io/angular-chart.js/

I guess I need to call refresh() method, but it doesn't seem to do anything

I tried  

<div kendo-chart="kendoChart" style="height:300px;"
                                         k-legend="{ position: 'bottom' }"
                                         k-series-defaults="{ type: 'line' }"
                                         k-series="vm.kendoSeries"
                                         k-value-axes="vm.kendoAxes"
                                         k-category-axis="vm.kendoCategoryAxis"></div>

 and then in JS: 

// change chart data 

...

$scope.kendoChart.dataSource.read();
$scope.kendoChart.refresh();

Is it possible to do in AngularJS?

Thanks

 

[Daniel]

Hello,

The chart refresh and the dataSource read methods can be used to update the chart only when the data is loaded via the dataSource. Since you are setting the data to the series you should either use the setOptions method to set the new series options:

$scope.kendoChart.setOptions({
    series: UpdatedSeries
});

or use the k-rebind attribute for the scope field in order to update the chart.

Regards,
Daniel
Telerik