We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

simple pie chart

looking to generate a simple or chart from viewbag data passed to view from controller
contropller
 public ActionResult Index()
        {
            var data = db.BalanceTodays;

            ViewBag.datasource = data.ToList();

            return View();
        }

this list contains the following
ID period                     count
1 Due More Than 10           0
2 Due Today                 11
3 Due Tomorrow           7
4 Due Within 10         48
5 Overdue                           0


looking for this result



2 Replies

GS Grant Stephen April 4, 2017 01:39 PM UTC

have been looking in completly the wrong direction, its was as simple as
@(Html.EJ().Chart("chartContainer")
                    .Series(sr =>
                    {

                        sr.DataSource(ViewBag.datasource);
                        sr.XName("period");
                        sr.YName("count");
                        //Change series type
                        sr.Type(SeriesType.Pie).Add();
                        
                        
                    })
        )

to render the grph

grant


DD Dharanidharan Dharmasivam Syncfusion Team April 5, 2017 05:52 AM UTC

Hi Grant, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. And we have prepared a sample with respect to your requirement as depicted in your screenshot. In controller, we have bind the list data to ViewBag and then bind the dataSource to chart and grid in view page. To display the data in table, you can use the Syncfusion grid control. Find the code snippet below. 

ASP.NET MVC [C#]: 

// Controller  
            List<ChartData> list = new List<ChartData>(); 
            list.Add(new ChartData(1, "Due More Than 10", 0)); 
            list.Add(new ChartData(2, "Due Today", 11)); 
            list.Add(new ChartData(3, "Due Tomorrow", 7)); 
            list.Add(new ChartData(4, "Due Within 10", 48)); 
            list.Add(new ChartData(5, "Overdue", 0)); 
 
      //Binding dataSource to ViewBag  
            ViewBag.datasource = list; 
 
// View  
@(Html.EJ().Chart("chartContainer") 
       .Series(sr => 
            { 
        //Binding dataSource to chart  
                 sr.DataSource(ViewBag.datasource); 
                 sr.XName("period"); 
                 sr.YName("count"); 
                 sr.Type(SeriesType.Pie).Add(); 
        }) 
) 
@(Html.EJ().Grid<OrdersView>("FlatGrid") 
         //Binding dataSource to grid  
         .Datasource((IEnumerable<object>)ViewBag.datasource) 
         .Columns(col => 
             { 
                col.Field("period").HeaderText("Period").Width(80).Add(); 
                col.Field("count").HeaderText("Count").Width(75).Add(); 
           }) 
) 

Screenshot: 
 

Sample for reference can be find from below link. 
 
Thanks, 
Dharani. 


Loader.
Live Chat Icon For mobile
Up arrow icon