This is a migrated thread and some comments may be shown as answers.
Loading Donut chart via DataSource from Object/Model
4 Answers 21 Views
This is a migrated thread and some comments may be shown as answers.
Robert
Top achievements
Rank 1
Robert asked on 19 Jun 2019, 01:31 AM

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

 

 

4 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 20 Jun 2019, 01:11 PM
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.
0
Robert
Top achievements
Rank 1
answered on 20 Jun 2019, 07:24 PM

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#%")
                                   )
0
Robert
Top achievements
Rank 1
answered on 21 Jun 2019, 02:51 PM

Nevermind, figured out using a template:

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

0
Abe
Top achievements
Rank 1
answered on 27 Feb 2020, 11:12 AM
This is really amazing. Thank you.
Tags
Chart
Asked by
Robert
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Robert
Top achievements
Rank 1
Abe
Top achievements
Rank 1
Share this question
or