This is a migrated thread and some comments may be shown as answers.

Aggregate Pie Chart

11 Answers 437 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Monique
Top achievements
Rank 1
Monique asked on 10 Apr 2012, 03:31 PM
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

11 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 11 Apr 2012, 03:19 PM
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!
0
Monique
Top achievements
Rank 1
answered on 11 Apr 2012, 11:40 PM
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
0
Alexander Valchev
Telerik team
answered on 12 Apr 2012, 03:24 PM
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!
0
Monique
Top achievements
Rank 1
answered on 12 Apr 2012, 05:32 PM
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?

0
Monique
Top achievements
Rank 1
answered on 12 Apr 2012, 08:51 PM
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.
0
Marco
Top achievements
Rank 2
answered on 13 Apr 2012, 07:58 AM
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
    }
});

0
Monique
Top achievements
Rank 1
answered on 14 Apr 2012, 12:02 AM
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
0
Alexander Valchev
Telerik team
answered on 17 Apr 2012, 02:41 PM
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!
0
Monique
Top achievements
Rank 1
answered on 17 Apr 2012, 02:55 PM
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.
0
Chris
Top achievements
Rank 1
answered on 30 May 2012, 05:57 PM
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
0
Chris
Top achievements
Rank 1
answered on 30 May 2012, 09:51 PM
I managed to figure it out.  The following should work for you Monique

http://jsfiddle.net/yf9cF/ 

Tags
General Discussions
Asked by
Monique
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Monique
Top achievements
Rank 1
Marco
Top achievements
Rank 2
Chris
Top achievements
Rank 1
Share this question
or