Creating datasources from dynamic 2 dimensions array for stacked bar chart

3 posts, 0 answers
  1. Ron
    Ron avatar
    122 posts
    Member since:
    Sep 2011

    Posted 11 May Link to this post

    Hi,
    We studied the stacked bar example published at http://demos.telerik.com/kendo-ui/bar-charts/stacked-bar

    We try to implement a similar chart. Our data is based on a dynamic calculation and we currently pack it in the way demonstrated in the example below. We tried various ways to use this data for stacked bars chart and all failed (ended up with an empty output probably because the chart did not know how to "read" our data). Can you please guide us how we can use the following data in order to present a stacked bars chart in which we stack every item. The desired result is a category for each month (for example 7/2015) and for each category we will present a stacked bar consists of the totals of each item bucket for this month:

    {
        "items": [
            {
                "itemID": "1827",
                "buckets": [
                    {
                        "month": "7/2015",
                        "total": 0,
                    },
                    {
                        "month": "8/2015",
                        "total": 0,
                    },
                    {
                        "month": "9/2015",
                        "total": 0,
                    },
                    {
                        "month": "10/2015",
                        "total": 18.72,
                    }
                ]
            },
            {
                "itemID": "1826",
                "buckets": [
                    {
                        "month": "7/2015",
                        "total": 10,
                    },
                    {
                        "month": "8/2015",
                        "total": 5,
                    },
                    {
                        "month": "9/2015",
                        "total": 0,
                    },
                    {
                        "month": "10/2015",
                        "total": 0,
                    }
                ]
            },
            {
                "itemID": "1957",
                "buckets": [
                    {
                        "month": "7/2015",
                        "total": 3.6,
                    },
                    {
                        "month": "8/2015",
                        "total": 8.2,
                    },
                    {
                        "month": "9/2015",
                        "total": 0,
                    },
                    {
                        "month": "10/2015",
                        "total": 0,
                        "counter": 0
                    }
                ]
            }
        ]
    }
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 13 May Link to this post

    Hi Ron,

    Kendo UI Chart cannot be bound to a similar data structure - it supports binding to an array of objects (documentation link). Hence, in order to achieve the expected result you should modify your data. For your convenience I preapred a basic example which demonstrates a possible implementation.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Ron
    Ron avatar
    122 posts
    Member since:
    Sep 2011

    Posted 13 May in reply to Iliana Nikolova Link to this post

    Hi Iliana,


    The example of the stacked bar at http://demos.telerik.com/kendo-ui/bar-charts/stacked-bar demonstrates the use of an array with 3 objects, each containing data array, and for this reason we thought we need to create separate array for each item
    I see the way you implemented it in the basic example and we will implement it this way as well

    Thanks!

Back to Top