Having trouble getting help?
Contact Support
Contact Support
Ajax Chart in ASP.NET MVC Chart control
17 Feb 20228 minutes to read
The following section explains how to customize various aspects of the chart.
Bind data to chart on ajax request
You can bind data to chart on ajax request using the following steps:
Step 1:
Create a http post action method to return data for ajax call in a controller page. The following GetServerData() method will return a JSON data string.
[HttpPost]
public ActionResult GetServerData()
{
List<LineChart> data1 = new List<LineChart>();
data1.Add(new LineChart("India", 1));
data1.Add(new LineChart("USA", 5));
data1.Add(new LineChart("USSR", 10));
data1.Add(new LineChart("Chinaa", 12));
data1.Add(new LineChart("Japan", 8));
return Json(data1);
}
public class LineChart
{
public LineChart(string name, double cnt)
{
this.x = name;
this.y = cnt;
}
public string x { get; set; }
public double y { get; set; }
}
Step 2:
Make a simple chart with series.
@using Syncfusion.EJ2;
@using EJ2MVCSamples.Controllers;
<div class="col-md-8">
@Html.EJS().Chart("container").PrimaryXAxis(px => px.Title("Years").ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).Add();
}
).Render()
</div>
Step 3:
Make ajax call to the GetServerData() action method in chart load event to get JSON data, and then assign the data to the chart series using the dataSource
property and mapping the field name to xName
and yName
properties of the series.
@using Syncfusion.EJ2;
@using EJ2MVCSamples.Controllers;
<div class="col-md-8">
@Html.EJS().Chart("container").PrimaryXAxis(px => px.Title("Years").ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).Add();
}
).Load("chartLoad").Render()
</div>
<script>
var chartLoad = function (args) {
$.ajax({
type: "POST",
url: '@Url.Action("GetServerData","Home")',
async: false,
success: function (data) {
args.chart.series[0].dataSource = data;
args.chart.series[0].xName = "x";
args.chart.series[0].yName = "y";
}
});
}
</script>
@Html.EJS().Chart("container").PrimaryXAxis(px => px.Title("Years").ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).Name("Product X").Add();
}
).Load("chartLoad").Render()
<script>
var chartLoad = function (args) {
$.ajax({
type: "POST",
url: '@Url.Action("GetServerData","ajaxdata")',
async: false,
success: function (data) {
args.chart.series[0].dataSource = data;
args.chart.series[0].xName = "x";
args.chart.series[0].yName = "y";
}
});
}
</script>
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult GetServerData()
{
List<LineChart> data1 = new List<LineChart>();
data1.Add(new LineChart("India", 1));
data1.Add(new LineChart("USA", 5));
data1.Add(new LineChart("USSR", 10));
data1.Add(new LineChart("Chinaa", 12));
data1.Add(new LineChart("Japan", 8));
return Json(data1);
}
public class LineChart
{
public LineChart(string name, double cnt)
{
this.x = name;
this.y = cnt;
}
public string x { get; set; }
public double y { get; set; }
}
Sample reference
Sample for how to get data from ajax call is available in chart sample
.