Support for multiple series types when binding to local grouped data?

2 posts, 0 answers
  1. Pete
    Pete avatar
    3 posts
    Member since:
    Apr 2012

    Posted 13 Aug 2012 Link to this post

    I want to render a chart where all but one of the series are stacked columns.  The other series is a line.  This works fine if I embed the series data within the JSON object passed to kendoChart(), but if I want to bind to a local variable holding grouped data, I don't see a way to associate a chart type to each of the groups.  Is this a shortcoming of the tool, or am I missing something?

    Here's what the code looks like when I embed the series data within the JSON object (the chart CORRECTLY renders the "Expenses" series as a line chart...and the others are CORRECTLY rendered as stacked columns):

    function createChart() {
        $("#chart").kendoChart({
            seriesDefaults: {
                type: "column",
                stack: true
            },
            series: [{
                name: "Expenses",
                data: [50000, 50000, 50000, 50000],
                type: "line"
            }, {
                name: "Pension Annuity",
                data: [12000, 12000, 12000, 12000]
            }, {
                name: "Social Security",
                data: [24000, 24000, 24000, 24000]
            }],
            categoryAxis: {
                categories: [65, 66, 67, 68]
            }
        });
    }

    However if I switch this code to bind to local grouped data, I can't see a way to set the 2 different chart types to match this.  Any ideas?
  2.
  3. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 16 Aug 2012 Link to this post

    Hi Pete,

    I am not sure if I understand you correctly. By design there are two main approaches that could be applied in order to stack the bars in Kendo UI Chart:
    • Set stack: true property to the SeriesDefaults;
    • Stack with group name for each of the series. For convenience I prepared a small example which illustrates such approach in action.

    I hope this helps. Please let me know in case I missed something. 

    Kind 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!
Back to Top