Loading Donut chart via DataSource from Object/Model

4 posts, 0 answers
  1. Robert
    Robert avatar
    7 posts
    Member since:
    May 2019

    Posted 18 Jun Link to this post

    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; }
          
        }

     

     

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2393 posts

    Posted 20 Jun Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Robert
    Robert avatar
    7 posts
    Member since:
    May 2019

    Posted 20 Jun Link to this post

    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#%")
                                       )
  4. Robert
    Robert avatar
    7 posts
    Member since:
    May 2019

    Posted 21 Jun in reply to Robert Link to this post

    Nevermind, figured out using a template:

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

Back to Top