Aggregate Pie Chart

12 posts, 0 answers
  1. Monique
    Monique avatar
    6 posts
    Member since:
    Mar 2012

    Posted 10 Apr 2012 Link to this post

    Is it possible make a pie chart  
    with aggregate count.


    For example:

    var Data = [

            { "Name": "Marks S.", "FavoriteColor": “Red”},

           { "Name": "Hanna M.", "FavoriteColor ": “Blue” },

           { "Name": "Brad A.", "FavoriteColor ": “Blue” }

    ];

    categoryField : FavoriteColor

    field: count  (aggregate)




    <div id="example" class="k-content"><br>       
    <
    div class="chart-wrapper">
     <div id="chart">           
    </
    div>
    </div>

         
      <script>
    var Data = [{ "Name": "Marks S.", "FavoriteColor": "Red"},
     {
    "Name": "Hanna M.", "FavoriteColor": "Blue"}, { "Name": "Brad A.", "FavoriteColor": "Blue"}];

    function
    createChart() {
     $(
    "#chart").kendoChart({
     theme: $(document).data(
    "kendoSkin") || "default",
    title: {text:
    "Aggregate Example"},
    legend: {position:
    "bottom"},
    dataSource: {data: Data,
                 aggregate: [{ field:
    "FavoriteColor", aggregate: "count"}],
                 group: { field:
    "FavoriteColor" }
        },
    series: [{ type:
    "pie",
    field:
    "#= count#",
    categoryField:
    "FavoriteColor"}],
    tooltip: {visible:
    true,
    template:
    "${ category } - #= value#"}});
    }


     $(document).ready(
    function () {
    setTimeout(
    function () {                  
      
    createChart();
    $(
    "#example").bind("kendo:skinChange", function (e) {
    createChart();
    }); }, 100);
    });
    </script>
    </div>


    Regards,
    Have a Nice day
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 11 Apr 2012 Link to this post

    Hi Monique,

    At present assigning aggregate fields to the chart series is not supported. As a workaround you could try to create series array manually and pass it to the chart configuration. In this example you can see this approach in action.

    All the best,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Monique
    Monique avatar
    6 posts
    Member since:
    Mar 2012

    Posted 11 Apr 2012 Link to this post

    Hi Alexander

    I tried to get my data from a webservice, instead from a variable;



    <div id="chart"></div>

    <script>
     
    $(document).ready(function () {

    var dataSource = new kendo.data.DataSource({
                                                               type: "json",
                                                              group: {field: "type",aggregates: [{ field: "type", aggregate: "count" } ] },
                                                              transport: {
                                                                  read: {
                                                                      url: "Webservice/Test",
                                                                      contentType: "application/json; charset=utf-8",
                                                                      type: "POST",
                                                                      dataType: "json"
                                                                  },
                                                                  parameterMap: function (data) { return kendo.stringify(data); }
                                                              },
                                                              schema: {
                                                                  data: "d",
                                                                  model: {
                                                                      fields: {
                                                                          type: { type: "string" },
                                                                          size: { type: "number" }
                                                                      }
                                                                  }
                                                              }
                                                          });


     dataSource.read();

    var series = [], items = dataSource.view(), length = items.length, item;

     //My items.length is equal to 0; I guess because my dataSource.view() is empty or wrong;

                      for (var i = 0; i < length; i++) {
                          item = items[i];
                          series.push({ category: item.value, value: item.aggregates.type.count })
                      }


                      $("#chart").kendoChart({
                          dataSource: dataSource,
                          seriesDefaults: {
                              type: "pie"
                          },
                          series: [{ data: series}],
                          tooltip: {
                              visible: true
                          }
                      });
                  });
              </script>


    Regards,
    M.

    Have a nice day
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 12 Apr 2012 Link to this post

    Hello Monique,

    Your code snippet looks OK. Probably the problem is caused by the fact that Ajax requests are asynchronous and the data is not received at the moment when you build the series. You may try to create the series after the data has been fetched - for example on the change event of the dataSource.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Monique
    Monique avatar
    6 posts
    Member since:
    Mar 2012

    Posted 12 Apr 2012 Link to this post

    In the  jsfiddle example ;
    The code wrap is onLoad that wrap the code so it will run in onLoad window event; 

    Should I change that on my code?

  6. Monique
    Monique avatar
    6 posts
    Member since:
    Mar 2012

    Posted 12 Apr 2012 Link to this post

    Hello Alexander,


    If you use JSLint in the example
    http://jsfiddle.net/valchev/VzWdk/

    They show 2 errors on the code...

    That confuses me, because if there are two errors, why the graphic appears without problems?

    Thanks for the help

    Regards,
    M.
  7. Marco
    Marco avatar
    1 posts
    Member since:
    Feb 2012

    Posted 13 Apr 2012 Link to this post

    Hello Monique,

    You have to add the change event to your DataSource.

    For Example, I changed your code a little (: and it works for me.

    Regards,
    Marco

    var series = [];
    var dataSource = new kendo.data.DataSource({
        type: "json",
        //create group and aggregates
        group: { field: "type", aggregates: [{ field: "type", aggregate: "count"}] },
        transport: {
            read: {
                url: "Webservice/Test",
                contentType: "application/json; charset=utf-8",
                type: "POST",
                dataType: "json"
            },
            parameterMap: function (data) { return kendo.stringify(data); }
        },
        schema: {
            data: "d",
            model: {
                fields: {
                    type: { type: "string" },
                    size: { type: "number" }
                }
            }
        },
        error: function (e) {
            alert("Error trying to get data from the server.");
        },
        change: function (e) {
            var
                                items = dataSource.view(),
                                length = items.length,
                                item;
     
            for (var i = 0; i < length; i++) {
                item = items[i];
                series.push({ category: item.value, value: item.aggregates.type.count })
            }
        }
    });
     
    $("#chart").kendoChart({
        dataSource: dataSource,
        seriesDefaults: {
            type: "pie"
        },
        series: [{ data: series}],
        tooltip: {
            visible: true
        }
    });

  8. Monique
    Monique avatar
    6 posts
    Member since:
    Mar 2012

    Posted 13 Apr 2012 Link to this post

    Hello!

    Thanks for all the help, I have a situation; when it is a Pie chart the chart it is perfect created but if I change I little my code for:

    $("#chart").kendoChart({
        dataSource: dataSource,
        seriesDefaults: {
            type: "column"
        },
        series: [{ data: series, , field:"value"}],  // If I don´t put this my chart it created as    picture1.png; with the value is created as the picture2.png
        tooltip: {
            visible: true
        }
    });


    Regards,
    M.

    Happy coding
  9. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 17 Apr 2012 Link to this post

    Hello Monique,

    I am afraid that the information that you provided is not sufficient in order to spot what is causing this behaviour. Such issue might occur if the value (field:"value") is string.

    In addition, I see that there is a syntax mistake in your code snippet - an extra coma:
    series: [{ data: series, , field:"value"}],


    Regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Monique
    Monique avatar
    6 posts
    Member since:
    Mar 2012

    Posted 17 Apr 2012 Link to this post

    Yes I noticed, and I corrected it.

    Alexander could try to change it jsfiddle example of pie chart to another chart type.


    Thanks for all the help

    M.
  11. Chris
    Chris avatar
    6 posts
    Member since:
    Jul 2010

    Posted 30 May 2012 Link to this post

    Alex,

    I too am currently trying to get aggregate values to display in charts.  My pie chart is working great thanks to everyone's work so far.  But I too am having issues trying to get it to work with a bar chart.  I've gotten as far as Monique, but can't seem to get any further.  Would you be able to assist in getting the work around for bar charts as well?  Also is there any plans on adding this as a feature in the future?  I'd really like to be able to pull data once from the server and then aggregate it on the client side leveraging the group and filter options on the datasource.

    Regards,

    Chris
  12. Chris
    Chris avatar
    6 posts
    Member since:
    Jul 2010

    Posted 30 May 2012 Link to this post

    I managed to figure it out.  The following should work for you Monique

    http://jsfiddle.net/yf9cF/ 

Back to Top