- Home
- Forum
- ASP.NET MVC - EJ 2
- Fail to understand how to use chart
Fail to understand how to use chart
Hi,
Attachment: DirectInvoice_c1270882.rar
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
SIGN IN To post a reply.
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
- 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.
SIGN IN To post a reply.
- 1 Reply
- 2 Participants
-
LL Laurentiu LAZAR
- Feb 27, 2018 01:23 PM UTC
- Feb 28, 2018 04:42 PM UTC