Kendo Pie Chart to Bar Chart

Question

I am trying to go from a Kendo Pie chart to a Kendo Bar chart, my issue is the bar chart only returns one piece of data.

cshtml `

<div id="pieEmployeeContainer">
    @(Html.Kendo().Chart<SalesChart>().Name("pieEmployee").HtmlAttributes(new { style = "width: 90%;", @class = "fpos-chart" })
        .Title("Top 10")
        .Legend(false)
        .Theme("bootstrap")
                .DataSource(ds => ds.Read("SM_GetSalesByEmployees", "Home"))
        .Series(s => s
            .Pie(m => m.Total, m => m.Category)
            .Padding(0)
        )

        .Tooltip(t => t
            .Visible(true)
            .Format("{0:c}")
            .Template("#= category # <br /> #= kendo.format('{0:c}', value) # (#= kendo.format('{0:p}', percentage)#)")
        )

        .Events(e => e.SeriesClick("getByEmployee"))
        .Deferred()
    )
</div>

`

Controller

        public ActionResult SM_GetSalesByEmployees()
    {
        List<SalesChart> items;
        List<SalesChart> salesByEmpl;

        using (StreamReader r = new StreamReader("C:\\Development\\Back Office Web\\Sandbox\\BackOffice.Web\\BackOffice.Web\\Content\\Data\\SalesByEmployee.json"))
        {
            string json = r.ReadToEnd();
            items = JsonConvert.DeserializeObject<List<SalesChart>>(json);
            salesByEmpl = items.GroupBy(l => l.EmployeeName)
                      .Select(lg =>
                            new SalesChart
                            {
                                Category = lg.Key,                                    
                                Total = lg.Sum(w => w.Total)                                    
                            }).ToList();
        }
        return new CustomJsonResult
        {
            Data = salesByEmpl
        };
    }
    script
        function getByEmployee(e)
    {
        var categorySelected = e.category;
        var chart = $("#pieEmployee").data("kendoChart");
        $.post("Home/GetSalesByEmployee?EmpName=" + categorySelected, function (results) {
            chart.setDataSource(new kendo.data.DataSource({ data: results }));
        });

        chart.options.series[0].type = "bar";
        chart.options.series[0].ValueAxis = "${Total}";
        chart.options.series[0].categoryAxis = "{Category}";
        chart.options.categoryAxis.baseUnit = "months";
        chart.refresh();
    }

I dont have a good enough reputation to post images, sorry about that. The bar chart is only getting one data point and displaying that, rather than showing all data. Any help is greatly appreciated.

mcauthorn mcauthorn · Accepted Answer · 2015-01-07T09:37:54

I can't build out any test stuff but from quickly looking at it, the data format for the pie chart needs to be changed. It needs to be in percentages (the whole series needs to = 100) so you'll need to convert the data either in the view or the controller.

Kendo Pie Chart to Bar Chart

1 Answers