Stacked and grouped chart

12 posts, 0 answers
  1. Pascal
    Pascal avatar
    10 posts
    Member since:
    Oct 2007

    Posted 14 Dec 2011 Link to this post

    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!
  2.
  3. T. Tsonev
    Admin
    T. Tsonev avatar
    2834 posts

    Posted 15 Dec 2011 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Pascal
    Pascal avatar
    10 posts
    Member since:
    Oct 2007

    Posted 15 Dec 2011 Link to this post

    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?
  7. T. Tsonev
    Admin
    T. Tsonev avatar
    2834 posts

    Posted 19 Dec 2011 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. T. Tsonev
    Admin
    T. Tsonev avatar
    2834 posts

    Posted 23 Mar 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Deepak Ahuja
    Deepak Ahuja avatar
    4 posts
    Member since:
    Feb 2006

    Posted 31 May 2013 Link to this post

    Hi,
    How to configure the chart to get the stacked and grouped chart form data source?
  13. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 31 May 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  15. Deepak Ahuja
    Deepak Ahuja avatar
    4 posts
    Member since:
    Feb 2006

    Posted 31 May 2013 Link to this post

    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?
  17. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 31 May 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  19. Deepak Ahuja
    Deepak Ahuja avatar
    4 posts
    Member since:
    Feb 2006

    Posted 03 Jun 2013 Link to this post

    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?
  20.
  21. osman
    osman avatar
    19 posts
    Member since:
    May 2013

    Posted 04 Jun 2013 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 ?

    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 ?

  23. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 05 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top