My Ignite Chart doesn't appear to work with DataSourceUrl calling an MVC action in the controller. I therefore tried it with the example project template, stripped out the other controls, added a controller action and moved the chart from using the model to DataSourceUrl. This resulted in the same error:
Microsoft JScript runtime error: Unable to get value of the property 'dsCount': object is null or undefined
which is raised in infragistics.dvcommonwidget.js at column 4586 on the command this.widget.dsCount--;
Am I calling the action correctly?
index.cshtml:
@*Reference the Infragistics ASP.NET MVC Helpers Assembly*@
@using Infragistics.Web.Mvc
@using InfragisticsMvcApp1.Models
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<!-- These styles aren't required but provide better
styling for labels on the running sample -->
<style>
BODY {
font: 1em "Segoe UI",Helvetica,Tahoma,Arial,Verdana,sans-serif;
H2 {
margin: 40px 0 0 0;
H3 {
margin: 10px 0 0 0;
</style>
<!-- Required JavaScript Files for using Infragistics jQuery UI-based
widgets with the Infragistics Loader -->
<script src="@Url.Content("~/Scripts/modernizr-2.6.2.js")"></script>
<script src="@Url.Content("~/Scripts/jquery-1.8.3.js")"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.9.2.js")"></script>
<!-- This script reference is require by the Infragistics Loader rendered below -->
<script src="@Url.Content("~/Infragistics/js/infragistics.loader.js")"></script>
</head>
<body>
<h1>Infragistics Starter Web Application</h1>
<!-- The Infragistics Loader is used to load required Infragistics JavaScript
and CSS resources on the rendered page. Using ths helper, it is required to
supply the loader with a path to the Infragistics JavaScript files and a path to
the CSS files.
The loader dynamically determines which required scripts and CSS
must be referenced based off of the Infragistics components used in this View.
The loader itself requires one JavaScript reference defined above. -->
@(Html.Infragistics().Loader()
.ScriptPath(Url.Content("~/Infragistics/js/"))
.CssPath(Url.Content("~/Infragistics/css/"))
.Render()
)
<!-- All of the Infragistics ASP.NET MVC helpers use a chaining
API pattern. The helpers require that Render() be the last method
called. This method renders all of the HTML and JavaScript for
the jQuery UI widget on the page-->
<h2>Chart</h2>
@(Html.Infragistics().DataChart<CustomerCountSummary>()
.DataSourceUrl("/Home/GetCustomerCountSummary")
.Height("300px")
.Axes(a =>
{
a.CategoryX("Label").Label(cl => cl.CategoryLabel);
a.NumericY("Count")
.MinimumValue(0)
.MaximumValue(5);
})
.Series(s => s.Column("ActiveCustomers")
.XAxis("Label")
.YAxis("Count")
.ValueMemberPath(cc => cc.CustomerCount))
.DataBind()
</body>
</html>
HomeController.cs
public class HomeController : Controller
//
// GET: /Home/
public ActionResult Index()
return View();
public JsonResult GetCustomersCountSummary()
return this.Json(this.GetCustomerCounts());
//This method aggregates the Customer data into a format that is easily
//consumed by the Chart
private IEnumerable<CustomerCountSummary> GetCustomerCounts()
var customers = GetCustomers();
var active = from c in customers
where c.IsActive
select c;
var inActive = from c in customers
where (c.IsActive == false)
return new List<CustomerCountSummary> {
new CustomerCountSummary { CategoryLabel = "Active", CustomerCount = active.Count() },
new CustomerCountSummary { CategoryLabel = "Inactive", CustomerCount = inActive.Count() }
};
private IEnumerable<Customer> GetCustomers()
return new List<Customer>
new Customer { ID=1, Name="John Smith", IsActive=true },
new Customer { ID=2, Name="Bob Richards", IsActive=false },
new Customer { ID=3, Name="Marge Wright", IsActive=false },
new Customer { ID=4, Name="Dwight Long", IsActive=true },
new Customer { ID=5, Name="Amy Grant", IsActive=true },
Many Thanks
Hello Simon ,
Thank you for posting in our forum.
You could directly pass the model to the Index view in this case:
return View(this.GetCustomerCounts());
Generally the dataSourceUrl property is used when binding the grid to a wcf service or a web service.
Please refer to our documentation on the databinding of the chart here:
https://www.igniteui.com/help/igdatachart-databinding
Let me know if you have any questions or concerns.
Best Regards,
Maya Kirova
Developer Support Engineer
Infragistics, Inc.
www.infragistics.com/support