Column Stack

5 posts, 0 answers
  1. David
    David avatar
    1 posts
    Member since:
    Oct 2012

    Posted 01 Oct 2012 Link to this post

    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.

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 04 Oct 2012 Link to this post

    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!
  3. Amrinder
    Amrinder avatar
    10 posts
    Member since:
    Aug 2012

    Posted 05 Oct 2012 Link to this post

    Hi Iliana,

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

    Thanks,
    Amrinder
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 05 Oct 2012 Link to this post

    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!
  5. 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":"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

Back to Top