Fail to understand how to use chart

Hi,

I have an MVC invoicing application that at his time, used google charts. For this I made several models and one controller. Now I want to port the charts to Syncfusion and I fail to understand how to accomplish this. I read some relevant docs and take a look at demos, but I am not able to make it works.

For simplifying I have in mind two charts: a Pie (or Doughnut) that display for example income vs expenses and a Line (or Bar) that display paid, unpaid and expenses relative to time period (e.g. year).

Here comes the models:
summary.cs
//
namespace DirectInvoice.Models
{
    public class Summary
    {
        public int Year { get; set; }

        public DateTime From { get; set; }
        public DateTime To { get; set; }

        public List<Invoices> Invoices { get; set; }
        public List<Purchases> Purchases { get; set; }
        public List<PurchaseTypes> PurchaseTypes { get; set; }

        public decimal AmountPaid { get; set; }
        public decimal NetIncome { get; set; }
        public decimal GrossIncome { get; set; }

        public decimal NetExpense { get; set; }
        public decimal GrossExpense { get; set; }
        public decimal NetBenefit { get { return NetIncome - NetExpense; } }

        public decimal VATReceived { get; set; }
        public decimal VATPaid { get; set; }

        public decimal VATBalance { get; set; }

        public decimal AdvancePaymentTaxPaid { get; set; }
    }
}
//

quarterummary.cs
//
namespace DirectInvoice.Models
{
    public class QuarterSummary
    {
        public int Year { get; set; }

        public Summary Month1 { get; set; }
        public Summary Month2 { get; set; }
        public Summary Month3 { get; set; }
    }
}
//

yearsummary.cs
//
namespace DirectInvoice.Models
{
    public class YearSummary
    {
        public Summary Q1 { get; set; }
        public Summary Q2 { get; set; }
        public Summary Q3 { get; set; }
        public Summary Q4 { get; set; }
    }
}
//

and respectively the controller:
reportscontroller.cs
//
namespace DirectInvoice.Controllers
{
    public class ReportsController : Controller
    {
        private InvoiceDBEntities db = new InvoiceDBEntities();

        private Summary GetSummary(DateTime fromDate, DateTime toDate)
        {
            Summary s = new Summary();

            s.From = fromDate;
            s.To = toDate;

            s.Invoices = (from i in db.Invoices.Include("InvoiceDetails")
                          where i.TimeStamp >= fromDate && i.TimeStamp <= toDate
                          select i).ToList().Where(i => !i.IsProposal).ToList();

            s.Purchases = (from p in db.Purchases
                           where p.TimeStamp >= fromDate && p.TimeStamp <= toDate
                           select p).ToList();


            s.NetExpense = s.Purchases.Sum(i => i.SubTotal);
            s.GrossExpense = s.Purchases.Sum(i => i.TotalWithVAT);

            s.NetIncome = s.Invoices.Sum(i => i.NetTotal);
            s.GrossIncome = s.Invoices.Sum(i => i.TotalWithVAT);

            s.VATReceived = s.Invoices.Sum(i => i.VATAmount);
            s.VATPaid = s.Purchases.Sum(i => i.VAT);
            s.VATBalance = s.Invoices.Sum(i => i.VATAmount) - s.Purchases.Sum(p => p.VATAmount);

            s.AmountPaid = s.Invoices.Where(i => i.Paid).Sum(i => i.TotalToPay);

            s.AdvancePaymentTaxPaid = s.Invoices.Sum(i => i.AdvancePaymentTaxAmount);
            return s;
        }

        //
        // GET: /Reports/

        public ActionResult QuarterDetails(int? quarter, int? year)
        {
            return View();
        }


        public ActionResult QuarterDetailsPartial(int? quarter, int? year)
        {
            DateTime start, end;

            if (!year.HasValue || !quarter.HasValue)
            {
                int q, y;
                TaxDateHelper.CalculateQuarter(DateTime.Now, out q, out y, out start, out end);
                quarter = q;
                year = y;
            }
            else
            {
                start = TaxDateHelper.GetStartDate(quarter.Value, year.Value);
                end = TaxDateHelper.GetEndDate(quarter.Value, year.Value);
            }

            ViewBag.PurchaseTypes = (from p in db.PurchaseTypes
                                     select p).ToList();

            QuarterSummary quarter_Summary = new QuarterSummary()
            {
                Year = year.Value,
                Month1 = GetSummary(start, start.AddMonths(1).AddDays(-1)),
                Month2 = GetSummary(start.AddMonths(1), start.AddMonths(2).AddDays(-1)),
                Month3 = GetSummary(start.AddMonths(2), end)
            };

            ViewBag.Year = year.Value;
            ViewBag.Quarter = quarter.Value;

            return PartialView("QuarterDetailsPartial", quarter_Summary);
        }


        public ActionResult PeriodSummary(DateTime fromDate, DateTime toDate)
        {
            return PartialView("PeriodSummary", GetSummary(fromDate, toDate));
        }

        public ActionResult ThisMonthSummary()
        {
            return PeriodSummary(
                new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1),
                new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.DaysInMonth(DateTime.Now.Year, DateTime.Now.Month))
                );
        }

        [OutputCache(Duration = 60)]
        public ActionResult YearSummary(int id)
        {
            YearSummary y = new YearSummary();
            y.Q1 = GetSummary(TaxDateHelper.GetStartDate(1, id), TaxDateHelper.GetStartDate(2, id).AddDays(-1));
            y.Q1.Year = id;

            y.Q2 = GetSummary(TaxDateHelper.GetStartDate(2, id), TaxDateHelper.GetStartDate(3, id).AddDays(-1));
            y.Q2.Year = id;

            y.Q3 = GetSummary(TaxDateHelper.GetStartDate(3, id), TaxDateHelper.GetStartDate(4, id).AddDays(-1));
            y.Q3.Year = id;

            y.Q4 = GetSummary(TaxDateHelper.GetStartDate(4, id), TaxDateHelper.GetStartDate(1, id).AddYears(1).AddDays(-1));
            y.Q4.Year = id;


            return PartialView("YearSummary", y);
        }

        [OutputCache(Duration = 60)]
        public ActionResult ThisQuarterSummary()
        {
            int quarter = 0;
            int year = 0;
            DateTime start;
            DateTime end;

            TaxDateHelper.CalculateQuarter(DateTime.Now, out quarter, out year, out start, out end);

            return PeriodSummary(start, end);
        }

        [OutputCache(Duration = 60)]
        public ActionResult QuarterSummary(DateTime date)
        {
            int quarter = 0;
            int year = 0;
            DateTime start;
            DateTime end;

            TaxDateHelper.CalculateQuarter(date, out quarter, out year, out start, out end);

            return PeriodSummary(start, end);
        }


        public ActionResult ByYear(int id)
        {
            return View(id);
        }

    }
}
//
(of course not all data is rendered in charts, some is displayed in tabular format, and the next step will be to use grid instead of html tables)
I provide also here an archive that is without references nd binaries for size of rar

Attachment: DirectInvoice_c1270882.rar

1 Reply

BP Baby Palanidurai Syncfusion Team February 28, 2018 04:42 PM UTC

 Hi Laurentiu LAZAR, 
  
Thanks for using Syncfusion products. 
  
We have analyzed your query. To render the chart, following assemblies need to be referenced in your application for using Essential Chart MVC 
  1. Syncfusion.EJ2.dll
Then add the script reference in the layout page (Views/Shared/_Layout.cshtml). Kindly find the code snippet below to achieve this requirement. 
_Layout.cshtml 
@using Syncfusion.EJ2; 
<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>@ViewBag.Title - My ASP.NET Application</title> 
    @Styles.Render("~/Content/css") 
</head> 
 
And also add script Manager in the layout page (Views/Shared/_Layout.cshtml). Kindly find the code snippet below to achieve this requirement. 
_Layout.cshtml 
    @Html.EJS().ScriptManager() 
    @Scripts.Render("~/bundles/bootstrap") 
 
Datasource for chart 
Controller.cs 
          List<BarChartData> chartData = new List<BarChartData> 
           { 
               new BarChartData { year = new DateTime(2005, 01, 01), paid = 21, unpaid = 28}, 
               new BarChartData { year = new DateTime(2006, 01, 01), paid = 24, unpaid = 44}, 
               new BarChartData { year = new DateTime(2007, 01, 01), paid = 36, unpaid = 48}, 
          }; 
           ViewBag.dataSource = chartData; 
// 
      public class BarChartData 
        { 
            public DateTime year; 
            public double paid; 
            public double unpaid; 
       } 
 
Add a series object to the chart as like the following code snippet and bind the datasource to the chart series. 
View.cshtml 
<div id="container"> 
    @Html.EJS().Chart("container").Series(series => 
       {            
       series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bar) 
              .Width(2).XName("year") 
              .YName("paid").DataSource(ViewBag.dataSource).Name("Paid").Add(); 
       series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bar) 
              .Width(2).XName("year") 
              .YName("unpaid").DataSource(ViewBag.dataSource).Name("Paid").Add(); 
}).Render() 
<div> 
 
Screenshot: 
  
 
Sample for reference can be find from below link. 
  
kindly revert us, if you have any concerns. 
  
Thanks, 
  
Baby. 
 
 


Loader.
Up arrow icon