Hello,
I am dealing with data split into two categories.
My project is based on this : https://demos.telerik.com/kendo-ui/bar-charts/grouped-data
I need it to be likeit is in the attachment
I think I need something like extra categoryField in a serie
7 Answers, 1 is accepted
Hi,
A possible solution to achieve the desired outcome is to add a second categoryAxis. In the second categoryAxis, define a categories array. This array could be based on the data of the records.
- https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/categoryaxis
- https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/categoryaxis.categories
For example, check this Dojo - https://dojo.telerik.com/acoyoRIg
Please, give this a try, and let me know if it works for you.
Regards,
Preslav
Progress Telerik
Hi Preslav,
thanks for dealing with my problem but unfortunately in my case it doesnt work well.I provide you a code and data I am dealing with.As you can see startPoint is showing just at the beginning displaying "bb" but not "cc" etc.Another problem is that sorting doesnt work for field Country.
<div id=
"example"
>
<div class=
"demo-section k-content wide"
>
<div id=
"chart2"
></div>
</div>
<script>
var
seriesData2 = [
{
"startPoint"
:
"bb"
,
"Country"
:
"\"a\""
,
"Month"
:
"1"
,
"Records"
: 2 },
{
"startPoint"
:
"bb"
,
"Country"
:
"\"a\""
,
"Month"
:
"6"
,
"Records"
: 5 },
{
"startPoint"
:
"cc"
,
"Country"
:
"\"a\""
,
"Month"
:
"10"
,
"Records"
: 1 },
{
"startPoint"
:
"cc"
,
"Country"
:
"\"a\""
,
"Month"
:
"11"
,
"Records"
: 10 },
{
"startPoint"
:
"dd"
,
"Country"
:
"\"b\""
,
"Month"
:
"10"
,
"Records"
: 1 },
{
"startPoint"
:
"dd"
,
"Country"
:
"\"b\""
,
"Month"
:
"11"
,
"Records"
: 15 },
{
"startPoint"
:
"gg"
,
"Country"
:
"\"b\""
,
"Month"
:
"9"
,
"Records"
: 5 }];
var
stocksDataSource =
new
kendo.data.DataSource({
"data"
:seriesData2,
group: {
field:
"Month"
},
sort: {
field:
"Country"
,
dir:
"asc"
},
});
var
subcategory = [];
stocksDataSource.one(
"requestEnd"
,
function
(event){
// We need the Timeout so the client-side sorting/grouping is complete
setTimeout(
function
(){
stocksDataSource.view().forEach(
function
(groupElement){
groupElement.items.forEach(
function
(element){
if
(subcategory.indexOf(element.Country) === -1) {
subcategory.push(element.Country);
}
});
createChart();
});
});
});
stocksDataSource.read();
function
createChart() {
$(
"#chart2"
).kendoChart({
dataSource: stocksDataSource,
series: [{
type:
"column"
,
field:
"Records"
,
}],
legend: {
position:
"bottom"
},
categoryAxis: [{
field:
"startPoint"
},{
categories: subcategory
}]
});
}
</script>
</div>
Hi,
Based on the provided information, I am afraid that I cannot understand what the desired outcome of the chart should be. Could you please send me a mockup picture of it? Based on it, I will try to configure the Chart with the provided data.
Regards,
Preslav
Progress Telerik
hi,
here you are
Hi,
Based on the provided screencast, I prepared the following Dojo: https://dojo.telerik.com/AyEDuxOh
Please, check it, and let me know if you have any further questions.
Regards,
Preslav
Progress Telerik
Hi,
It looks good on first look, however when I added an extra data
{
"startPoint"
:
"gu"
,
"Country"
:
"\"b\""
,
"Month"
:
"9"
,
"Records"
: 5},
{
"startPoint"
:
"gg"
,
"Country"
:
"\"b\""
,
"Month"
:
"10"
,
"Records"
: 5}
the subcategory line goes wrong and doesnt divide startPoints into Countries accordingly.
Hi,
Indeed, when the sub-categories hold a different amount of data, configuring the second category axis is not doable.
In this case, you can add a sub-category of every category. For example - https://dojo.telerik.com/EJevUHAL/2
Regards,
Preslav
Progress Telerik