Dynamically add grouped Series in Charts

3 posts, 0 answers
  1. Mamta
    Mamta avatar
    2 posts
    Member since:
    Apr 2015

    Posted 29 Apr 2015 Link to this post

    var dataSource = new kendo.data.DataSource({

        transport: {

            read: {

                url: "/GetData",

                dataType: "json"

            }

        },

        group: {

            field: "Name",

            dir: "asc"

        }

    });

    dataSource.read();

    var view = dataSource.view();

     Using Fiddler, I can see that the call to dataSource.read() is successfully getting the JSON. However, dataSource.view() always returns an empty array. I'm not sure why this is the case.

     The JSON I'm returning looks like this:

     

    [

         {
          "Name": "Bob",
          "Count": 2762,
          "Date": "2011-11-14 09:00"
        },
        {
          "Name": "Sue",
          "Count": 521,
          "Date": "2011-11-14 09:00"
        },
        {
          "Name": "Bob",
          "Count": 2769,
          "Date": "2011-11-15 09:00"
        },
        {
          "Name": "Sue",
          "Count": 525,
          "Date": "2011-11-14 09:00"
        }

    ]

  2. Mamta
    Mamta avatar
    2 posts
    Member since:
    Apr 2015

    Posted 29 Apr 2015 in reply to Mamta Link to this post

    Above issue has been resolved by using change: function ()  but I want to use the aggregate functions like sum,avg etc.... How to use this type of function in the chart control.

    Kindly refer below code snippet for the same.

     function ReDrawChart_new() {

                    stocksDataSource = new kendo.data.DataSource({
                        transport: {
                            read: {
                                url: "/AllChart/GetBarData_group",
                                dataType: "json"
                            }
                        },
                        group: {
                            field: "medal",
                            dir: "asc"
                        },
                       
                        change: function () {
                            var view = stocksDataSource.view();
                            var chartSeries = [];
                            for (var groupIx = 0; groupIx < view.length; groupIx++) {
                                var group = view[groupIx];                          
                                chartSeries.push({                               
                                    data: group.items,
                                    field: "vals",
                                    name: group.value,
                                    
                                });
                            }
                            createChart_Group(chartSeries,"yr");
                        } 
                    });
                    stocksDataSource.read();
                }

    function createChart_Group(chartSeries,cat) {
                   
                    $("#chart").kendoChart({
                        title: {
                            text: "Olympic Medals won by USA"
                        },
                       
                        datasource:stocksDataSource,
                        legend: {
                            visible: true
                        },
                        seriesDefaults: {
                            type: "bar",
                            stack: true
                        },

                        series: chartSeries,

                        valueAxis: {
                            max: 180,
                            line: {
                                visible: false
                            },
                            minorGridLines: {
                                visible: true
                            }
                        },

                        categoryAxis: {
                            field: "yr",
                            majorGridLines: {
                                visible: false
                            }

                        },
                        tooltip: {
                            visible: true,
                            template: "#= series.name #: #= value #"
                        }

     

                    });
                
                 
                }

    Though I have mentioned the category axis , its not appearing on chart . I have attached may chart picture.

    Data : [

      {
          "medal": "Gold",
          "vals": 12,
          "yr": "2011"
        },
        {
           "medal": "Silver",
          "vals": 12,
          "yr": "2011"
         },
        {
           "medal": "Bronze",
          "vals": 12,
          "yr": "2011"
         },.... SO ON

     

    ]

  3. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 01 May 2015 Link to this post

    Hi Mamta,

    When grouped dataSource is used it is recommended using series.categoryField (instead of categoryAxis.field). For your convenience here is a dojo example.

    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