Stacked and grouped chart

[Pascal]

Hi,

My goal is to achieve a chart with, for each X values, I have 3 stacked bars.

Suppose that I want to present, for each month, my expenses in dollars for grocery, transport and mortgage.

I would create 3 series ('grocery', 'transport' and 'mortage') and set them all stacked.

Now suppose I want the exact same chart, but for each month I want 3 values for each of my series : the values for the years 2009, 2010 and 2011.

I achieved something near like this:

var chartData = [

   { X: 0, serie1: 12, serie2: 16, serie3: 11 },

   { X: 0, serie1: 32, serie2: 12, serie3: 15 },

   { X: 1, serie1: 15, serie2: 18, serie3: 9 },

   { X: 1, serie1: 8, serie2: 13, serie3: 17 }

];

 

$('#chartContainer').kendoChart({

   dataSource: {

      data: chartData

   },

   theme: 'default',

   legend: {

      position: 'bottom'

   },

   seriesDefaults: {

      type: 'column',

      stack: true

   },

   series:

      [

         { field: 'serie1', name: 'serie1' },

         { field: 'serie2', name: 'serie2' },

         { field: 'serie3', name: 'serie3' }

      ],

   categoryAxis: {

      field: 'X'

   },

   tooltip: {

      visible: true

   }

});

But I end up with a graph where categories are repeated on the x axis. Is there a way I could have them grouped? Something that would look like this:
http://peltiertech.com/Utility/pix/clusterstackchart.png

Thank you!

[T. Tsonev]

Hi Pascal,

Thank you for the detailed explanation, I see what you mean. We do plan to implement such feature soon, as it was already requested by customers.

We're already committed for the next major release, but we should be able to implement it afterwards.

Kind regards,
Tsvetomir Tsonev
the Telerik team

[Pascal]

Thank you Tsvetomir,
I understand that it is not clearly defined when it will be implemented, but is it possible to have a basic idea in term of months?

[T. Tsonev]

Hello Pascal,

We're targeting this feature for Q2 '12. That's around 7 months from now.

All the best,
Tsvetomir Tsonev
the Telerik team

[T. Tsonev]

Good news, everyone!

The stacked and grouped bar chart has landed in the Q1 release. Please feel free to take a look at the demo.

Greetings,
Tsvetomir Tsonev
the Telerik team

[Deepak Ahuja]

Hi,
How to configure the chart to get the stacked and grouped chart form data source?

[Iliana Dyankova]

Hello Deepak,

Please take a look at this online demo which demonstrate how to bind Kendo UI Chart to grouped data. In order to stack the bars you should set series' stack configuration to true. Like here: 

$("#chart").kendoChart({
  //....
  series: [{
     stack: true,
     //....
  }],
});

Regards,

Iliana Nikolova
Telerik

[Deepak Ahuja]

Hi, 
Thanks for the quick reply,
I already made stack: true, but still having some issue in getting it correct,
I have created the jsfiddle sample

http://jsfiddle.net/fyJys/407/

Can you please let me know what i am missing?

[Iliana Dyankova]

Hello Deepak,

I am not quite sure if I understand correctly what the issue is - it appears the data is correctly grouped and the Chart is stacked. Could you please elaborate a bit more, probably I am missing something obvious? Thank you in advance for your cooperation.

Regards,
Iliana Nikolova
Telerik

[Deepak Ahuja]

Hi Iliana,

I am grouping by "STATUS_VALUE", its showing stacks correctly but
i want it to be displayed like

 _________________________           _________________________            _________________________
|  InActive  | InActive |          |  InActive  | InActive |          |  InActive  | InActive |             
| Active      | Active      |          | Active      | Active      |          | Active      | Active      |
_____________________________________________________________________________________________               
       NSAY        LDST                         NSAY        LDST                          NSAY        LDST    
_______________________________________________________________________________________
                ORG1                                        ORG2                                          ORG3

I want to group the stacked columns by "ORG_TYPE_VALUE", some way in which i can show which column belongs to which ORG_TYPE_VALUE.

I have updated the jsfiddle  "http://jsfiddle.net/fyJys/409/"

added a grid, grid shows every organization has 2  EMP_TYPE_VALUE & each of these contains active & inactive members count.  I want chart also should reflect the same thing.

 Note: For a chart's  data source I have grouped by only "STATUS_VALUE"
 i want to show it grouped by "ORG_TYPE_VALUE" as well. if i add 1 more group by field, it doesn't show anything.

How can i do this?

[osman]

<script>
var mydata=[{"name":"Work","data":108404,"mach":"Fongs-3"},{"name":"Reason Late","data":80121,"mach":"Atyc-3"},{"name":"Work","data":2920,"mach":"Then-13"},{"name":"manuel wait","data":138383,"mach":"Then-12"},{"name":"Work","data":174811,"mach":"Loris Bellini 2"},{"name":"Work","data":39887,"mach":"Loris Bellini 1"},{"name":"manuel wait","data":761119041,"mach":"Loris Bellini 1"}];
$('#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,
gap:0.1
},
series: [{type:"bar", field:"data", stack:true}],
categoryAxis: {
field: "mach"
}
});
</script>

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

Edit post

less than a minute ago (Link to this post)

<script>
var mydata=[{"name":"Work","data":108404,"mach":"Fongs-3"},{"name":"Reason Late","data":80121,"mach":"Atyc-3"},{"name":"Work","data":2920,"mach":"Then-13"},{"name":"manuel wait","data":138383,"mach":"Then-12"},{"name":"Work","data":174811,"mach":"Loris Bellini 2"},{"name":"Work","data":39887,"mach":"Loris Bellini 1"},{"name":"manuel wait","data":761119041,"mach":"Loris Bellini 1"}];
$('#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,
gap:0.1
},
series: [{type:"bar", field:"data", stack:true}],
categoryAxis: {
field: "mach"
}
});
</script>

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

Edit post

less than a minute ago (Link to this post)

<script>
var mydata=[{"name":"Work","data":108404,"mach":"Fongs-3"},{"name":"Reason Late","data":80121,"mach":"Atyc-3"},{"name":"Work","data":2920,"mach":"Then-13"},{"name":"manuel wait","data":138383,"mach":"Then-12"},{"name":"Work","data":174811,"mach":"Loris Bellini 2"},{"name":"Work","data":39887,"mach":"Loris Bellini 1"},{"name":"manuel wait","data":761119041,"mach":"Loris Bellini 1"}];
$('#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,
gap:0.1
},
series: [{type:"bar", field:"data", stack:true}],
categoryAxis: {
field: "mach"
}
});
</script>

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

[Iliana Dyankova]

Hello,

@Deepak
I am afraid your scenario is not supported in Kendo UI Chart and in order to achieve it you need a custom implementation. I recommend you checking the DataSource's API (you could manipulate your data in the change event).
 
@Osman
In order to achieve the desired outcome you need a matching set of data points. I.e. you should have a data point for "Fongs-3" (also for each of the categories) for each of the three groups ("Reason Late", "Work", "manuel wait") etc. Please note the value can be null, but the record needs to be presented in the data. This is due to the fact that series.data is an array.

Regards,
Iliana Nikolova
Telerik