Column Stack

[David]

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.

[Iliana Dyankova]

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

[Amrinder]

Hi Iliana,

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

Thanks,
Amrinder

[Iliana Dyankova]

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

[osman]

<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