Aggregate Pie Chart

[Monique]

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

[Alexander Valchev]

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

[Monique]

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

[Alexander Valchev]

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

[Monique]

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?

[Monique]

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.

[Marco]

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

    }

});

[Monique]

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

[Alexander Valchev]

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

[Monique]

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.

[Chris]

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

[Chris]

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

http://jsfiddle.net/yf9cF/