Working with Data
28 Feb 202224 minutes to read
Chart can visualise data bound from local or remote data.
Local Data
You can bind a simple JSON data to the chart using DataSource property in series. Now map the fields in JSON to XName and YName properties.
@Html.EJS().Chart("container").
ChartArea(area => area.Border(ViewBag.chartBorder)).
Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(2).XName("x").YName("y").DataSource("series1").Name("Product X").Add();
}).
PrimaryXAxis(px => px.Skeleton("y").Title("Years").MajorGridLines(ViewBag.majorGridLines).
ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).
EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).
LabelFormat("y")).
PrimaryYAxis(py => py.Title("Price").
LineStyle(ViewBag.lineStyle).
MajorTickLines(ViewBag.majorTickLines).
MinorTickLines(ViewBag.minorTickLines).
RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None).
LabelFormat("${value}").EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).
Title("Profit")).
Title("Stock Price Analysis").
LegendSettings(lg => lg.Visible(true)).Render()
<script>
var series1 = [];
var point1;
var value = 80;
var i;
for (i = 1; i < 500; i++) {
if (Math.random() > .5) {
value += Math.random();
}
else {
value -= Math.random();
}
point1 = { x: new Date(1960, (i + 1), i), y: Math.round(value) };
series1.push(point1);
}
</script>public IActionResult Index()
{
List<LineData> chartData = new List<LineData>
{
new LineData { xValue = new DateTime(2005, 01, 01), yValue = 21, yValue1 = 28 },
new LineData { xValue = new DateTime(2006, 01, 01), yValue = 24, yValue1 = 44 },
new LineData { xValue = new DateTime(2007, 01, 01), yValue = 36, yValue1 = 48 },
new LineData { xValue = new DateTime(2008, 01, 01), yValue = 38, yValue1 = 50 },
new LineData { xValue = new DateTime(2009, 01, 01), yValue = 54, yValue1 = 66 },
new LineData { xValue = new DateTime(2010, 01, 01), yValue = 57, yValue1 = 78 },
new LineData { xValue = new DateTime(2011, 01, 01), yValue = 70, yValue1 = 84 },
};
ViewBag.dataSource = chartData;
return View();
}
public class LineData
{
public DateTime xValue;
public double yValue;
public double yValue1;
}Common Datasource
You can also bind a JSON data common to all series using DataSource property in chart.
@(Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
XName("month").
YName("sales").
DataSource(ViewBag.dataSource).Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
XName("month").
YName("sales").
DataSource(ViewBag.dataSource).Add();
}).
PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category))
.Render()
)public ActionResult Index()
{
List<GroupingChartData> chartData = new List<GroupingChartData>
{
new GroupingChartData { month= "Jan", sales= 35, sales1= 28 },
new GroupingChartData { month= "Feb", sales= 28, sales1= 35 },
new GroupingChartData { month= "Mar", sales= 34, sales1= 32 },
new GroupingChartData { month= "Apr", sales= 32, sales1= 34 },
new GroupingChartData { month= "May", sales= 40, sales1= 32 },
new GroupingChartData { month= "Jun", sales= 32, sales1= 40 },
new GroupingChartData { month= "Jul", sales= 35, sales1= 55 },
new GroupingChartData { month= "Aug", sales= 55, sales1= 35 },
new GroupingChartData { month= "Sep", sales= 38, sales1= 30 },
new GroupingChartData { month= "Oct", sales= 30, sales1= 38 },
new GroupingChartData { month= "Nov", sales= 25, sales1= 32 },
new GroupingChartData { month= "Dec", sales= 32, sales1= 25 }
};
ViewBag.dataSource = chartData;
return View();
}
public class GroupingChartData
{
public string month;
public double sales;
public double sales1;
}Remote Data
You can also bind remote data to the chart using DataManager. The DataManager requires minimal information like webservice URL, adaptor and crossDomain to interact with service endpoint properly. Assign the instance of DataManager to the DataSource property in series and map the fields of data to XName and YName properties. You can also use the Query property of the series to filter the data.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
XName("Assignee").Marker(ViewBag.marker).
YName("Estimate").DataSource("dataManager").
Query("query").
Name("Story Point").Add();
}).PrimaryXAxis(px => px.Title("Assignee").
RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.Additional).
MajorGridLines(ViewBag.majorGridLines).
ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
ChartArea(area => area.Border(ViewBag.ChartBorder)).
PrimaryYAxis(py => py.MajorGridLines(ViewBag.majorGridLines).
MajorTickLines(ViewBag.majorTickLines).
LineStyle(ViewBag.lineStyle).
Title("Sprint Task Analysis").
LegendSettings(lg => lg.Visible(false)).Render()
}
<script>
var dataManager = new ej.data.DataManager({
url: 'https://mvc.syncfusion.com/Services/Northwnd.svc/Tasks/'
});
var query = new ej.data.Query().take(5).where('Estimate', 'lessThan', 3, false);
</script>public ActionResult Index()
{
return View();
}Empty points
The Data points that uses the null or undefined as value are considered as empty points. Empty data points are ignored and not plotted in the Chart. When the data is provided by using the points property, By using EmptyPointSettings property in series, you can customize the empty point. Default Mode of the empty point is Gap.
@(Html.EJS().Chart("container").ChartArea(ca => ca.Border(ViewBag.border))
.Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column)
.Name("Profit")
.XName("xValue")
.YName("yValue")
.Marker(ViewBag.marker)
.Width(2)
.EmptyPointSettings(ViewBag.emptyPointSettings)
.DataSource(ViewBag.dataSource).Add();
})
.PrimaryXAxis(xaxis =>
xaxis.Title("Product")
.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
.Interval(1)
)
.Title("Annual Product-Wise Profit Analysis")
.Tooltip(tp => tp.Enable(true))
.LegendSettings(lg => lg.Visible(false))
.Load("load").Render()
)public IActionResult Index()
{
List<EmptyData> chartData = new List<EmptyData>
{
new EmptyData{ month="Jan", sales= 35 },
new EmptyData{ month= "Feb", sales= 28 },
new EmptyData{ month="Mar", sales=null },
new EmptyData{ month="Apr", sales=32 },
new EmptyData{ month="May", sales=40 },
new EmptyData{ month= "Jun", sales=32 },
new EmptyData{ month="Jul", sales=35 },
new EmptyData{ month="Aug", sales=null },
new EmptyData{ month="Sep", sales=38 },
new EmptyData{ month="Oct", sales=30 },
new EmptyData{ month="Nov", sales=25 },
new EmptyData{ month= "Dec", sales=32 }
};
ViewBag.dataSource = chartData;
return View();
}
public class EmptyData
{
public string month;
public Nullable<double> sales;
}Lazy loading
Lazy loading allows you to load data for chart on demand. Chart will fire the scrollEnd event, in that we can get the minimum and maximum range of the axis, based on this, we can upload the data to chart.
@(Html.EJS().Chart("container").Width("100%").Load("load").Title("Network Load")
.ScrollEnd("scrollEnd")
.LegendSettings(le => le.Visible(false))
.PrimaryXAxis(px => px.ScrollbarSettings(scroll => scroll.Enable(true).PointsLength(1000)).Title("Day").ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).Skeleton("yMMM").SkeletonType(Syncfusion.EJ2.Charts.SkeletonType.Date))
.PrimaryYAxis(py => py.Title("Server Load").LabelFormat("{value}MB")).
Series(sr => sr.DataSource("GetDateTimeData(new Date(2009, 0, 1), new Date(2009, 8, 1))")
.XName("x").YName("y").Name("Server Load").Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Animation(an => an.Enable(false)).Add()).
Tooltip(tl => tl.Enable(true).Shared(true)).Render()
)
<script>
var intl = new ejs.base.Internationalization();
var chart;
var load = function (args) {
chart = args.chart;
args.chart.primaryXAxis.scrollbarSettings.range = {
minimum: new Date(2009, 0, 1),
maximum: new Date(2014, 0, 1)
};
}
function GetDateTimeData(start, end) {
var series1 = [];
var date;
var value = 30;
var option = {
skeleton: 'full',
type: 'dateTime'
};
var dateParser = intl.getDateParser(option);
var dateFormatter = intl.getDateFormat(option);
for (var i = 0; start <= end; i++) {
date = Date.parse(dateParser(dateFormatter(start)));
if (Math.random() > .5) {
value += (Math.random() * 10 - 5);
}
else {
value -= (Math.random() * 10 - 5);
}
if (value < 0) {
value = getRandomInt(20, 40);
}
var point1 = { x: new Date(date), y: Math.round(value) };
new Date(start.setDate(start.getDate() + 1));
series1.push(point1);
}
return series1;
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>public IActionResult Index()
{
ViewBag.min = new DateTime(2009, 1, 1);
ViewBag.max = new DateTime(2014, 1, 1);
return View();
}Customizing empty point
Specific color for empty point can be set by Fill property in EmptyPointSettings. Border for a empty point can be set by Border property.
@(Html.EJS().Chart("container").ChartArea(ca => ca.Border(ViewBag.border))
.Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column)
.Name("Profit")
.XName("xValue")
.YName("yValue")
.Marker(ViewBag.marker)
.Width(2)
.EmptyPointSettings(ViewBag.emptyPointSettings)
.DataSource(ViewBag.dataSource).Add();
})
.PrimaryXAxis(xaxis =>
xaxis.Title("Product")
.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
.Interval(1)
)
.Title("Annual Product-Wise Profit Analysis")
.Tooltip(tp => tp.Enable(true))
.LegendSettings(lg => lg.Visible(false))
.Load("load").Render()
)public IActionResult Index()
{
List<EmptyData> chartData = new List<EmptyData>
{
new EmptyData{ month="Jan", sales= 35 },
new EmptyData{ month= "Feb", sales= 28 },
new EmptyData{ month="Mar", sales=null },
new EmptyData{ month="Apr", sales=32 },
new EmptyData{ month="May", sales=40 },
new EmptyData{ month= "Jun", sales=32 },
new EmptyData{ month="Jul", sales=35 },
new EmptyData{ month="Aug", sales=null },
new EmptyData{ month="Sep", sales=38 },
new EmptyData{ month="Oct", sales=30 },
new EmptyData{ month="Nov", sales=25 },
new EmptyData{ month= "Dec", sales=32 }
};
ViewBag.dataSource = chartData;
return View();
}
public class EmptyData
{
public string month;
public Nullable<double> sales;
}