Angular scatter chart datasource multiple series

6 posts, 0 answers
  1. Morten
    Morten avatar
    4 posts
    Member since:
    Feb 2016

    Posted 13 Feb Link to this post

    Hello,

    I am trying to create multiple series in a scatter chart using the datasource property.

    However I am not able to make it work, maybe I'm missing something?

     

    Here's the code, using data fro  jquery example from the page:

     

    <html>
        <head>
            <script src="bower_components/jquery/dist/jquery.min.js"></script>
            <script src="bower_components/angular/angular.min.js"></script>
            <script src="kendo/js/kendo.all.min.js"></script>

            <link rel="stylesheet" href="kendo/styles/kendo.common.min.css"></link>
            <link rel="stylesheet" href="kendo/styles/kendo.default.min.css"></link>
            
            <script>
                
                angular.module("chartApp", ["kendo.directives"])
                
                .controller("ScatterChart", ["$scope", function($scope){
                                    
                        $scope.dataSource = { 
                            title: {
                                text: "Rainfall - Wind Speed"
                            },
                            legend: {
                                position: "bottom"
                            },
                            seriesDefaults: {
                                type: "scatter"
                            },
                            series: [{
                                name: "January 2008",
                                data: [
                                   [16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2], [10.9, 1], [13.6, 3.2], [10.9, 7.4], [10.9, 0], [10.9, 8.2], [16.4, 0], [16.4, 1.8], [13.6, 0.3],                                                              [13.6, 0], [29.9, 0], [27.1, 2.3], [16.4, 0], [13.6, 3.7], [10.9, 5.2], [16.4, 6.5], [10.9, 0], [24.5, 7.1], [10.9, 0], [8.1, 4.7], [19, 0], [21.7, 1.8], [27.1, 0],                                [24.5, 0], [27.1, 0], [29.9, 1.5], [27.1, 0.8], [22.1, 2]]
                            },{
                                name: "January 2009",
                                data: [
                                    [6.4, 13.4], [1.7, 11], [5.4, 8], [9, 17], [1.9, 4], [3.6, 12.2], [1.9, 14.4], [1.9, 9], [1.9, 13.2], [1.4, 7], [6.4, 8.8], [3.6, 4.3], [1.6, 10], [9.9, 2], [7.1,                                       15], [1.4, 0], [3.6, 13.7], [1.9, 15.2], [6.4, 16.5], [0.9, 10], [4.5, 17.1], [10.9, 10], [0.1, 14.7], [9, 10], [2.7, 11.8], [2.1, 10], [2.5, 10], [27.1, 10],                                       [2.9, 11.5], [7.1, 10.8], [2.1, 12]]
                            },{
                                name: "January 2010",
                                data: [
                                    [21.7, 3], [13.6, 3.5], [13.6, 3], [29.9, 3], [21.7, 20], [19, 2], [10.9, 3], [28, 4], [27.1, 0.3], [16.4, 4], [13.6, 0], [19, 5], [16.4, 3], [24.5, 3], [32.6, 3],                                 [27.1, 4], [13.6, 6], [13.6, 8], [13.6, 5], [10.9, 4], [16.4, 0], [32.6, 10.3], [21.7, 20.8], [24.5, 0.8], [16.4, 0], [21.7, 6.9], [13.6, 7.7], [16.4, 0], [8.1,                                   0], [16.4, 0], [16.4, 0]]
                            }],
                            xAxis: {
                                max: 35,
                                title: {
                                    text: "Wind Speed [km/h]"
                                },
                                crosshair: {
                                    visible: true,
                                    tooltip: {
                                        visible: true,
                                        format: "n1"
                                    }
                                }
                            },
                            yAxis: {
                                min: -5,
                                max: 25,
                                title: {
                                    text: "Rainfall [mm]"
                                },
                                axisCrossingValue: -5,
                                crosshair: {
                                    visible: true,
                                    tooltip: {
                                        visible: true,
                                        format: "n1"
                                    }
                                }
                        }};               
                                                 
                }]);
                
            </script>
        </head>
        <body ng-app="chartApp">
            <div ng-controller="ScatterChart">
                
                <div kendo-chart 
                     k-data-source="dataSource"></div>

            </div>
            
        </body>
    </html>

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 17 Feb Link to this post

    Hello Morten,

    Kendo UI Chart can be feeded with data either by using inline data or by binding it to a dataSource (documentation link). Please check this online demo which demonstrates how to integrate Kendo UI Scatter Chart with Angular JS.

    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. Kendo UI is VS 2017 Ready
  4. Morten
    Morten avatar
    4 posts
    Member since:
    Feb 2016

    Posted 18 Feb in reply to Iliana Nikolova Link to this post

    Thanks for the reply.

    I have tried using the DataSource object by instantiating it with the new keyword.

    However this object does (from what I have tried) not support the data format for the series as in the example I posted.

    Instead you have to use the k-series attribute on the directive, the problem then becomes that this attribute apparently is not two-way bound.

    The scenario I need is that the graph updates as I switch out the data of the series property.

    So the flow is as such:

    1. Load graph data and generate graph
    2. Something changes and triggers a load of new graph data.
    3. The new graph data is bound to the kendo chart by switching the old series data with the newly loaded.
    4. Graph updates automatically to reflect the new data.

    Can you provide and example where I can have multiple series of data in a scatter plot where the data is two-way bound?

    Whether it's a DataSource object or something else is all the same to me, as long as the series data is two-way bound.

  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 22 Feb Link to this post

    Hello Morten,

    When bound to a dataSource, Kendo UI Chart will automatically refresh when this dataSource is changed. Take a look at this updated dojo and let me know if I am missing something.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Morten
    Morten avatar
    4 posts
    Member since:
    Feb 2016

    Posted 25 Feb in reply to Iliana Nikolova Link to this post

    Hello,

    The main goal for me is to have the dataformat as I posted:

     series: [{
                                name: "January 2008",
                                data: [
                                   [16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2], [10.9, 1], [13.6, 3.2], [10.9, 7.4], [10.9, 0], [10.9, 8.2], [16.4, 0], [16.4, 1.8], [13.6, 0.3],                                                              [13.6, 0], [29.9, 0], [27.1, 2.3], [16.4, 0], [13.6, 3.7], [10.9, 5.2], [16.4, 6.5], [10.9, 0], [24.5, 7.1], [10.9, 0], [8.1, 4.7], [19, 0], [21.7, 1.8], [27.1, 0],                                [24.5, 0], [27.1, 0], [29.9, 1.5], [27.1, 0.8], [22.1, 2]]
                            },{
                                name: "January 2009",
                                data: [
                                    [6.4, 13.4], [1.7, 11], [5.4, 8], [9, 17], [1.9, 4], [3.6, 12.2], [1.9, 14.4], [1.9, 9], [1.9, 13.2], [1.4, 7], [6.4, 8.8], [3.6, 4.3], [1.6, 10], [9.9, 2], [7.1,                                       15], [1.4, 0], [3.6, 13.7], [1.9, 15.2], [6.4, 16.5], [0.9, 10], [4.5, 17.1], [10.9, 10], [0.1, 14.7], [9, 10], [2.7, 11.8], [2.1, 10], [2.5, 10], [27.1, 10],                                       [2.9, 11.5], [7.1, 10.8], [2.1, 12]]
                            },{
                                name: "January 2010",
                                data: [
                                    [21.7, 3], [13.6, 3.5], [13.6, 3], [29.9, 3], [21.7, 20], [19, 2], [10.9, 3], [28, 4], [27.1, 0.3], [16.4, 4], [13.6, 0], [19, 5], [16.4, 3], [24.5, 3], [32.6, 3],                                 [27.1, 4], [13.6, 6], [13.6, 8], [13.6, 5], [10.9, 4], [16.4, 0], [32.6, 10.3], [21.7, 20.8], [24.5, 0.8], [16.4, 0], [21.7, 6.9], [13.6, 7.7], [16.4, 0], [8.1,                                   0], [16.4, 0], [16.4, 0]]
                            }],

     

    Where the data comes in an array of arrays of [x,y]. This is not compatible with the DataSource object as far as I have tried.

    So my question is if there is a way to make this data format two-way bound on the chart so that it updates automatically. I don't need to change the individual points but I replace the whole data set for a series at a time (if that makes any difference).

  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 29 Feb Link to this post

    Hello Morten,

    Thank you for the details. In order to update the chart when inline data is used you should either use the chart options
    var chart = $(".k-chart").data("kendoChart");
    var newData = [[1, 1], [2, 2]];
    chart.options.series[0].data = newData
    chart.refresh()

    or use the k-rebind attribute.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready