Is it possible make a pie chart
with aggregate count.
For example:
Regards,
Have a Nice day
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
0
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
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();
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
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
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
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.
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
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:
Regards,
M.
Happy coding
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
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:
Regards,
Alexander Valchev
the Telerik team
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.
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
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