Loading Donut chart via DataSource from Object/Model

[Robert]

No errors but the chart is not showing.  The model has two "series" that are IEnumerable of objects that have properties for category, value and color.  The model is filled properly and if I don't try to use Ajax via DataSource / action and just load the object and set the Series it works fine.  Meaning I load an object <FlowsInOutChartData> inout in the top of a Razor page and then set the series via .Series(series => ... series.Donut(inout.InFlows) .Name("In Flows") etc. chart works fine.  Want to load via Ajax so the page comes back immediately (the chart takes a few seconds to load due to database calculation delay).

I think the problem is in the series func<>

series.Donut(d => d.InFlows, null)
               .Name("In Flows");

But not sure what I'm doing wrong.

 

@(Html.Kendo().Chart<WAPDBBusiness.Charts.FlowsInOutChartData>()
                                             .Name("chart")
                                             .ChartArea(chartArea => chartArea
                                                 .Background("transparent"))
                                             .Title(title => title
                                                 .Text("Cash Flows")
                                                 .Position(ChartTitlePosition.Bottom)
                                             )
                                             .Legend(legend => legend
                                                 .Visible(false)
                                             )
                                             .SeriesDefaults(series =>
                                                 series.Donut().StartAngle(150)
                                             )
                                              .DataSource(dataSource => dataSource
                                                                .Read(read => read.Action("CashInOutChartData", "PracticeAnalytics")) //Specify the action method and controller names.
                                            )
                                            .Series(series =>
                                                    {
                                                series.Donut(d => d.InFlows, null)
                                                      .Name("In Flows");
                                            })
                                            .Series(series =>
                                                    {
                                                series.Donut(d => d.OutFlows, null)
                                                      .Name("Out Flows");
                                            })
                   )

 

Controller:

public ActionResult CashInOutChartData()
 {
     var data = new WAPDBBusiness.Charts.CashFlowsInOutChart().GetFirmAnalyticsFlowsByQuarter(loginInfo.FirmID, 1, loginInfo.FirmID, true);
     return Json(data, JsonRequestBehavior.AllowGet);

 }

 

Model:

public class FlowsInOutChartData
    {
        public IEnumerable<FlowInOutChartItem> InFlows { get; set; }
        public IEnumerable<FlowInOutChartItem> OutFlows { get; set; }
    }
    public class FlowInOutChartItem
    {
        public int? myYear { get; set; }
        public int? myQtr { get; set; }
        public decimal Total { get; set; }
        public decimal PercentOfTotal { get; set; }
        /// <summary>
        /// Used by Telerik Donut Chart
        /// </summary>
        public string category
        {
            get
            {
                return "Q" + myQtr.ToString() + " " + myYear.ToString();
            }
        }
        /// <summary>
        /// Used by Telerik Donut Chart
        /// </summary>
        public decimal value
        {
            get
            {
                return PercentOfTotal;
            }
        }
        /// <summary>
        /// Used by Telerik Donut Chart
        /// </summary>
        public string color { get; set; }

    }

 

 

[Viktor Tachev]

Hello Robert,

I have prepared a sample project that illustrates how you can bind the Chart to remote data. Give it a try and let me know how it works for you.


Regards,
Viktor Tachev
Progress Telerik

[Robert]

That works, although I was trying to keep them as separate series.  In any case, is there a way to display the property Total in the tooltips?  So using the following I can show the % value but I would like to show the number stored in the property "Total" from the FlowInOutChartItem:

.Tooltip(tooltip => tooltip
                                       .Visible(true)
                                       .Template("#= category # (#= series.name #): #= value#%")
                                   )

[Robert]

Nevermind, figured out using a template:

.Tooltip(tooltip => tooltip.Visible(true).Template("#= category # (#= series.name #): #= dataItem.TotalFormatted #")

[Abe]

This is really amazing. Thank you.