Stacked chart reading data using the datasource syntax solution

[jwize]

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>

[Iliana Dyankova]

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

[jwize]

posted twice somehow

[jwize]

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>