Stacked chart reading data using the datasource syntax solution

4 posts, 0 answers
  1. jwize
    jwize avatar
    66 posts
    Member since:
    Mar 2013

    Posted 25 Jun 2013 Link to this post

    Struggling to find a simple solutions
     I need to know how to bind it and what the format of the data should be when reading data directly from the server.  I have tried everything but I can't get the data correct. 

    My needs
    I need the DISTINCT names down the left side.
    I need columns stacked horizontally by color
    I need an aggregate total running horizontally accross from left to right. 

    The data I have on the server. 
    [{ name : "jaime", color: "green",  value : 23 }, 
     { name : "jaime", color: "yellow",  value : 34 },
     { name : "jaime", color: "red",  value : 23 },
    { name : "rob", color: "green",  value : 23 }, 
     { name : "rob", color: "yellow",  value : 11},
     { name : "rob", color: "red",  value : 64 }]

    Here is my data call
    transport: {
        read: {
            url: "/Inspection/SupervisorChartData/",
            dataType: "json"
        }
    },
    I need to know how to bind the chart based on the data and datasource read syntax. This is the source code from the stacked chart example demo page which is closest to my needs.

            <div id="example" class="k-content">
                <div class="chart-wrapper">
                    <div id="chart"></div>
                </div>
                <script>
                    function createChart() {
                        $("#chart").kendoChart({
                            title: {
                                text: "Olympic Medals won by USA"
                            },
                            legend: {
                                visible: false
                            },
                            seriesDefaults: {
                                type: "bar",
                                stack: true
                            },
                            series: [{
                                name: "Gold Medals",
                                data: [40, 32, 34, 36, 45, 33, 34, 83, 36, 37, 44, 37, 35, 36, 46],
                                color: "#f3ac32"
                            }, {
                                name: "Silver Medals",
                                data: [19, 25, 21, 26, 28, 31, 35, 60, 31, 34, 32, 24, 40, 38, 29],
                                color: "#b8b8b8"
                            }, {
                                name: "Bronze Medals",
                                data: [17, 17, 16, 28, 34, 30, 25, 30, 27, 37, 25, 33, 26, 36, 29],
                                color: "#bb6e36"
                            }],
                            valueAxis: {
                                max: 180,
                                line: {
                                    visible: false
                                },
                                minorGridLines: {
                                    visible: true
                                }
                            },
                            categoryAxis: {
                                categories: [1952, 1956, 1960, 1964, 1968, 1972, 1976, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012],
                                majorGridLines: {
                                    visible: false
                                }
                            },
                        });
                    }
     
                    $(document).ready(function() {
                        setTimeout(function() {
                            createChart();

                        }, 400);
                    });
                </script>
            </div>



  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 26 Jun 2013 Link to this post

    Hi Jaime,

    Up to your requirements:

    • In order to achieve this you could group the dataSource by "name" field (as shown in this online demo);
    • You could set a different stack for each of the series (like in this online demo). Also you could check this forum thread where is demonstrated how to achieve this when using remote data;
    • We have a code library example which demonstrates how to place a label with the total sum of the stacked bars on top of the stack.

    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. jwize
    jwize avatar
    66 posts
    Member since:
    Mar 2013

    Posted 26 Jun 2013 Link to this post

    posted twice somehow
  4. jwize
    jwize avatar
    66 posts
    Member since:
    Mar 2013

    Posted 26 Jun 2013 Link to this post

    This is the solution I found worked.
    Server code:
    var inspections = _inspectionService.Inspections().All();
     
    var model = from i in inspections
                group i by i.AreaDescription
                    into g
                    select new
                    {
                        description = g.Key,
                        green = inspections.Where(i1 => i1.AreaDescription == g.Key).GroupBy(i1 => i1.AreaDescription).Select(n => n.Count(r => r.RacColor == "Green")).Sum(),
                        yellow = inspections.Where(i1 => i1.AreaDescription == g.Key).GroupBy(i1 => i1.AreaDescription).Select(n => n.Count(r => r.RacColor == "Yellow")).Sum(),
                        red = inspections.Where(i1 => i1.AreaDescription == g.Key).GroupBy(i1 => i1.AreaDescription).Select(n => n.Count(r => r.RacColor == "Red")).Sum(),
                        total = inspections.Where(i1 => i1.AreaDescription == g.Key).GroupBy(i1 => i1.AreaDescription).Count()
                    };
    Client code:
    <div class="k-content">
             <div class="chart-wrapper">
                 <div id="barChart2"></div>
             </div>
             <script>
                 function createBarChart2() {
                     $("#barChart2").kendoChart({
                         dataSource: {
                             transport: {
                                 read: {
                                     url: "/Inspection/SupervisorChartData/",
                                     dataType: "json"
                                 }
                             },
                             groupby: {
                                 field: "name"
                             },
                             sort: {
                                 field: "name",
                                 dir: "asc"
                             }
                         },
                         title: {
                             text: "Supervisor Inspections"
                         },
                         seriesDefaults: {
                             stack: true,
                             type: "bar"
                         },
                         series: [{
                             field: "green",
                             name: "Green",
                             color: 'green'
                         }, {
                             field: "yellow",
                             name: "Yellow",
                             color: 'yellow'
                         }, {
                             field: "red",
                             name: "Red",
                             color: 'red'
                         }],
                         categoryAxis: {
                             field: "name",
                             majorGridLines: {
                                 visible: false
                             }
                         },
                         valueAxis: {
                             labels: {
                                 format: "N0"
                             },
                             majorUnit: 5,
                             categoryAxis: {
                                 field: "from",
                                 majorGridLines: {
                                     visible: false
                                 }
                             },
                             max: 50,
                             line: {
                                 visible: false
                             }
                         },
                         tooltip: {
                             visible: true,
                             template: "#= total #"
                         }
                     });
                 }
     
                 $(document).ready(function () {
     
                     setTimeout(function () {
                         // Initialize the chart with a delay to make sure
                         // the initial animation is visible
                         createBarChart2();
                         // $("path")
                     }, 400);
                 });
             </script>
         </div>
Back to Top