This is a migrated thread and some comments may be shown as answers.

Multi-axis chart with AngularJS

3 Answers 134 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Zak
Top achievements
Rank 1
Zak asked on 10 Jun 2015, 11:29 AM

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!

 

3 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 12 Jun 2015, 07:02 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Zak
Top achievements
Rank 1
answered on 12 Jun 2015, 09:59 AM

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

 

0
Daniel
Telerik team
answered on 16 Jun 2015, 09:09 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
Zak
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Zak
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or