Hey All,
I have been working with the column charts, and finally figured out how to stack the bars in the chart with the help of this article.
http://www.kendoui.com/forums/dataviz/chart/stack-multiple-series.aspx
There's a problem though. The largest value bars are going 'over the top' of the chart (they are exceeding the max y-axis value).
The funny thing is that it seems like the value has to be an ODD number to get it to go over the top axis.
Below is all the code to replicate. Attached is a screenshot of what I am seeing.
Is this a bug? Am I doing something wrong?
This happens with both default and black Kendo Skins.
Tested on Chrome 18.0.1025.162, Firefox 8.0.1, and IE9.
I am using Kendo UI Complete v2012.1.322
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/file/Kendo/kendo.common.min.css"/>
<link rel="stylesheet" href="/file/Kendo/kendo.black.min.css"/>
</head>
<body>
<script type="text/javascript" src="/file/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/file/Kendo/kendo.all.min.js"></script>
<script type="text/javascript">
var data = [{"Period":"1-3","Comp1":1,"Comp2":2,"Comp3":4,"Comp4":0},{"Period":"3-5","Comp1":2,"Comp2":5,"Comp3":0,"Comp4":2},{"Period":"5-7","Comp1":3,"Comp2":1,"Comp3":4,"Comp4":2},{"Period":"7-9","Comp1":2,"Comp2":3,"Comp3":5,"Comp4":1},{"Period":"9+","Comp1":3,"Comp2":1,"Comp3":2,"Comp4":2}];
function createCharts () {
$("#chartIVPayers").kendoChart({
theme: $(document).data("kendoSkin") || "black",
title: {
text: "Comps"
},
dataSource: data,
series: [{
type: "column",
field: "Comp1",
name: "Comp1",
stack: "Comp2,Comp3,Comp4"
},{
type: "column",
field: "Comp2",
name: "Comp2"
},{
type: "column",
field: "Comp3",
name: "Comp3"
},{
type: "column",
field: "Comp4",
name: "Comp4"
}],
categoryAxis: {
field: "Period"
}
});
}
setTimeout(function() {
createCharts();
},
400);
</script>
<div id="chartIVPayers"></div>
</body>
</html>
I have been working with the column charts, and finally figured out how to stack the bars in the chart with the help of this article.
http://www.kendoui.com/forums/dataviz/chart/stack-multiple-series.aspx
There's a problem though. The largest value bars are going 'over the top' of the chart (they are exceeding the max y-axis value).
The funny thing is that it seems like the value has to be an ODD number to get it to go over the top axis.
Below is all the code to replicate. Attached is a screenshot of what I am seeing.
Is this a bug? Am I doing something wrong?
This happens with both default and black Kendo Skins.
Tested on Chrome 18.0.1025.162, Firefox 8.0.1, and IE9.
I am using Kendo UI Complete v2012.1.322
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/file/Kendo/kendo.common.min.css"/>
<link rel="stylesheet" href="/file/Kendo/kendo.black.min.css"/>
</head>
<body>
<script type="text/javascript" src="/file/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/file/Kendo/kendo.all.min.js"></script>
<script type="text/javascript">
var data = [{"Period":"1-3","Comp1":1,"Comp2":2,"Comp3":4,"Comp4":0},{"Period":"3-5","Comp1":2,"Comp2":5,"Comp3":0,"Comp4":2},{"Period":"5-7","Comp1":3,"Comp2":1,"Comp3":4,"Comp4":2},{"Period":"7-9","Comp1":2,"Comp2":3,"Comp3":5,"Comp4":1},{"Period":"9+","Comp1":3,"Comp2":1,"Comp3":2,"Comp4":2}];
function createCharts () {
$("#chartIVPayers").kendoChart({
theme: $(document).data("kendoSkin") || "black",
title: {
text: "Comps"
},
dataSource: data,
series: [{
type: "column",
field: "Comp1",
name: "Comp1",
stack: "Comp2,Comp3,Comp4"
},{
type: "column",
field: "Comp2",
name: "Comp2"
},{
type: "column",
field: "Comp3",
name: "Comp3"
},{
type: "column",
field: "Comp4",
name: "Comp4"
}],
categoryAxis: {
field: "Period"
}
});
}
setTimeout(function() {
createCharts();
},
400);
</script>
<div id="chartIVPayers"></div>
</body>
</html>
10 Answers, 1 is accepted
0
Guru
Top achievements
Rank 1
Rank 1
answered on 11 May 2012, 04:42 PM
Hi,
I am facing the same issue. Please let me know if you resolved this.
Guru
I am facing the same issue. Please let me know if you resolved this.
Guru
0
Hi guys,
I examined the code that @Greg has provided and it seems the definition of the stack is not correct. Please check this online demo, which illustrate the right approach - each of the series should indicate its stack.
Also, for more detailed information about the configuration of Kendo UI Chart, you could take a look at our online documentation.
Iliana Nikolova
the Telerik team
I examined the code that @Greg has provided and it seems the definition of the stack is not correct. Please check this online demo, which illustrate the right approach - each of the series should indicate its stack.
Also, for more detailed information about the configuration of Kendo UI Chart, you could take a look at our online documentation.
Greetings,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Greg
Top achievements
Rank 1
Rank 1
answered on 15 May 2012, 05:37 PM
Hi Iliana,
What exactly is it that was wrong with the chart definition? The example you pointed me to has the data hardcoded, and I need to drive the data from a DataSource or a JSON string. Can you provide some insight into how to correctly format the chart and/or data so that the chart will render correctly??
Does the JSON have to have a "data" sub-object? If that is the cause of this, its going to take a lot of work to format the data properly on the back end. Just seems a bit strange that you would be forced to set it up that way. All of the other charts seems to support a simple JSON data object.
Thanks
Greg
What exactly is it that was wrong with the chart definition? The example you pointed me to has the data hardcoded, and I need to drive the data from a DataSource or a JSON string. Can you provide some insight into how to correctly format the chart and/or data so that the chart will render correctly??
Does the JSON have to have a "data" sub-object? If that is the cause of this, its going to take a lot of work to format the data properly on the back end. Just seems a bit strange that you would be forced to set it up that way. All of the other charts seems to support a simple JSON data object.
Thanks
Greg
0
Accepted
Hi Greg,
By design, there are two approaches that could be applied in order to stack the bars in your Kendo UI Chart:
Iliana Nikolova
the Telerik team
By design, there are two approaches that could be applied in order to stack the bars in your Kendo UI Chart:
- Set stack: true property to the SeriesDefaults:
$("#chart").kendoChart({seriesDefaults: {type:"column",stack:true},...});
- Stack with group name for each of the series - this approach is illustrated in the online demo I suggested in my previous post.
I hope this information helps.
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Greg
Top achievements
Rank 1
Rank 1
answered on 17 May 2012, 05:16 PM
Fantastic!! Thank you for doing that.
As you say, the key is this line of code:
seriesDefaults: {stack: true},
I know you guys are focusing on documentation this quarter, and if possible it would be great to include that in an example.
This one (which I was using as an example) didn't have that in there.
http://demos.kendoui.com/dataviz/bar-charts/grouped-stacked-bar.html
Thanks again for the help and the great product!
As you say, the key is this line of code:
seriesDefaults: {stack: true},
I know you guys are focusing on documentation this quarter, and if possible it would be great to include that in an example.
This one (which I was using as an example) didn't have that in there.
http://demos.kendoui.com/dataviz/bar-charts/grouped-stacked-bar.html
Thanks again for the help and the great product!
0
Hello Greg,
It is good to know that everything is working fine now. Indeed, this configuration of the Kendo UI Chart is available in our online documentation. Please check here.
the Telerik team
It is good to know that everything is working fine now. Indeed, this configuration of the Kendo UI Chart is available in our online documentation. Please check here.
Regards,
Iliana Nikolovathe Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mark Condon
Top achievements
Rank 1
Rank 1
answered on 30 May 2012, 03:51 AM
Hi, I've had the same issue for a while now.
Using the above jsFiddle but making a minor modification (valueAxis.max = 70000, either at creation or setting and then refreshing) results in the bars rendering well outside the plot area. see: http://jsfiddle.net/R97De/
This behavior is inconsistent between bars and lines, as both line and area will stick inside the plot area: http://jsfiddle.net/YZpLx/
Are there any plans on changing this? It makes client-side zooming functionality quite messy when using bars.
Regards.
0
Hello Mark,
Thank you for the feedback. Indeed, this is a known issue and our developer team is working on fixing it, but I can not commit to an exact time frame - we will do our best to fix it as soon as possible of course.
Regards,
Iliana Nikolova
the Telerik team
Thank you for the feedback. Indeed, this is a known issue and our developer team is working on fixing it, but I can not commit to an exact time frame - we will do our best to fix it as soon as possible of course.
Regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
osman
Top achievements
Rank 1
Rank 1
answered on 06 Jun 2013, 08:52 AM
how can i define limit for each grouped stack bar ? for example Stack Bar A limit 100 but it is 125 in my json data. 125-100=25 can i make red color after the 100 in my stack bar ?
i am asking for each group stack bar. limits can be change.
i am asking for each group stack bar. limits can be change.
0
Hello Osman,
I am afraid your scenario is currently not supported in Kendo UI Chart and there is no suitable workaround I can suggest. If you wish you can submit this idea as a feature request at our UserVoice portal - this way the community would be able to evaluate it and if the suggestion gains popularity we will consider its implementation.
Regards,
Iliana Nikolova
Telerik
I am afraid your scenario is currently not supported in Kendo UI Chart and there is no suitable workaround I can suggest. If you wish you can submit this idea as a feature request at our UserVoice portal - this way the community would be able to evaluate it and if the suggestion gains popularity we will consider its implementation.
Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!