Multi-axis chart with AngularJS

4 posts, 0 answers
  1. Zak
    Zak avatar
    16 posts
    Member since:
    Jan 2015

    Posted 10 Jun 2015 Link to this post

    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!

     

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 12 Jun 2015 Link to this post

    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!
     
  3. Zak
    Zak avatar
    16 posts
    Member since:
    Jan 2015

    Posted 12 Jun 2015 in reply to Iliana Nikolova Link to this post

    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

     

  4. Daniel
    Admin
    Daniel avatar
    2230 posts

    Posted 16 Jun 2015 Link to this post

    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!
     
Back to Top