This is a migrated thread and some comments may be shown as answers.
Column Stack
4 Answers 61 Views
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 01 Oct 2012, 03:43 PM
Hi,

We're just evaluating Kendo UI chart controls, and have a question about Stacked Column Charts.

When generating a stacked column chart do all records in the datasource have to have the same number of values?

For example:

If I have a chart as follows:
$("#chart").kendoChart
    (
        {
            dataSource: { data: arData, sort: [{ field: "axisOrder", dir: "asc" }, { field: "stack", dir: "asc"}], group: [{ field: "stack"}] },
            legend: { visible: false },
            series: [{
                stack: true,
                type: "column",
                field: "value"
            }],
            categoryAxis: {
                field: "category",
                labels: {
                    rotation: -90
                }
            }
        }
    )

and the data is as follows:
var arData = [
{ stack: "Stack A", category: "1", value: 10, axisOrder: 1 },
{ stack: "Stack A", category: "2", value: 20, axisOrder: 2 },
{ stack: "Stack A", category: "3", value: 30, axisOrder: 3 },
{ stack: "Stack B", category: "1", value: 20, axisOrder: 1 },
{ stack: "Stack B", category: "2", value: 30, axisOrder: 2 },
{ stack: "Stack B", category: "3", value: 40, axisOrder: 3 },
{ stack: "Stack C", category: "1", value: 30, axisOrder: 1 },
{ stack: "Stack C", category: "2", value: 40, axisOrder: 2 },
{ stack: "Stack C", category: "3", value: 50, axisOrder: 3}
];

The chart is rendered as I expect, with 3 columns, each with a stack containing "Stack A", "Stack B" and "Stack C". However, if I remove the "Stack C / Category:2" record, the value of "Stack C / Category:3" record appears on the 2nd column, eg:
var arData = [
                { stack: "Stack A", category: "1", value: 10, axisOrder: 1 },
                { stack: "Stack A", category: "2", value: 20, axisOrder: 2 },
                { stack: "Stack A", category: "3", value: 30, axisOrder: 3 },
                { stack: "Stack B", category: "1", value: 20, axisOrder: 1 },
                { stack: "Stack B", category: "2", value: 30, axisOrder: 2 },
                { stack: "Stack B", category: "3", value: 40, axisOrder: 3 },
                { stack: "Stack C", category: "1", value: 30, axisOrder: 1 },
                //{ stack: "Stack C", category: "2", value: 40, axisOrder: 2 },
                { stack: "Stack C", category: "3", value: 50, axisOrder: 3}
            ];

Other behaviour also occurs if the first "group" doesn't contain all the possible categories, eg you can end up with columns that don't have a label.

Is there a way to have the chart use 0 as the value for the missing records, or is there another way to achieve this.

4 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 04 Oct 2012, 10:48 AM
Hello David,

The behavior you have observed is expected as the categorical charts (bar, area etc.) require a matching set of data points (the value can be null but it should persist in the data). I am afraid there is no built-in functionality which will automatically set 0 for the missing values - you should modify your data.

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
Amrinder
Top achievements
Rank 1
answered on 05 Oct 2012, 04:43 PM
Hi Iliana,

Any idea if this functionality is being considered to be included in some future release?

Thanks,
Amrinder
0
Iliana Nikolova
Telerik team
answered on 05 Oct 2012, 06:39 PM
Hi Amrinder,

I am afraid the implementation of this functionality is not in our immediate plans, however we may consider it for future versions of the product. I will suggest to send this idea as a feature request at our UserVoice portal - this way the other users would have the opportunity to evaluate it (when planning for a release we gather and take into account the feedback from UserVoice).

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
answered on 04 Jun 2013, 07:40 AM
<script>

var mydata=[{"name":"Work","data":108404,"mach":"A"},{"name":"Reason Late","data":80121,"mach":"A"},{"name":"Work","data":2920,"mach":"C"},{"name":"manuel wait","data":138383,"mach":"C"},{"name":"Work","data":174811,"mach":E"},{"name":"Work","data":39887,"mach":"F"},{"name":"manuel wait","data":761119041,"mach":"A"}];
$('#stacked').kendoChart({
dataSource:{
data:mydata,
group: {
field:"name",
dir:"asc"
},
schema:{
model:{
fields:{
"name":{"type":"string"},
"data":{"type":"number"},
"mach":{"type":"string"}
}
}
}
},
seriesDefaults : {
stack:true
},
series: [{type:"bar", field:"data", stack:true}],
categoryAxis: {
field: "mach"
}
});
</script>

how can i can stack name  according data for each mach ?

for example  A  {10 second late,20 second work} something like that

Asked by
David
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Amrinder
Top achievements
Rank 1
osman
Top achievements
Rank 1
Share this question
or