Chart can visualise data bound from local or remote 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.
<ejs-chart id="container" title="Inflation - Consumer Price" width="60%">
<e-chart-primaryxaxis valueType="DateTime"
labelFormat="y"
intervalType="Years"
edgeLabelPlacement="Shift"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Germany" xName="xValue" width="2" opacity="1" yName="yValue" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line"></e-series>
</e-series-collection>
</ejs-chart>
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;
}
You can also bind a JSON data common to all series using
dataSource
property in chart.
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.
<ejs-chart id="lineContainer">
<e-chart-primaryxaxis title="Assignee" rangePadding="Additional" valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series name="Story Point" xName="Assignee" width=2 yName="Estimate" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column" query="new ej.data.Query().take(5).where('Estimate', 'lessThan', 3, false)">
<e-data-manager url='https://mvc.syncfusion.com/Services/Northwnd.svc/Tasks/' crossdomain="true"></e-data-manager>
<e-series-marker>
<e-series-datalabel visible="true" position="Top"></e-series-datalabel>
</e-series-marker>
<e-series-animation enable="false"></e-series-animation>
</e-series>
</e-series-collection>
</ejs-chart>
public ActionResult Index()
{
return View();
}
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
.
<ejs-chart id="container" title="Inflation - Consumer Price" width="60%">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Germany" xName="month" width="2" opacity="1" yName="sales" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
<e-series-emptypointsettings mode="@Syncfusion.EJ2.Charts.EmptyPointMode.Gap"></e-series-emptypointsettings>
</e-series>
</e-series-collection>
</ejs-chart>
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 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.
<ejs-chart id="container" load="window.onChartLoad" scrollEnd="scrollEnd">
<e-chart-chartarea>
<e-chartarea-border width="0"></e-chartarea-border>
</e-chart-chartarea>
<e-chart-primaryxaxis edgeLabelPlacement="Shift" title="Day" valueType="DateTime" skeleton="yMMM" skeletonType="Date">
<e-scrollbarSettings enable="true" pointsLength="1000"></e-scrollbarSettings>
<e-majorgridlines width="0"></e-majorgridlines>
</e-chart-primaryxaxis>
<e-chart-primaryyaxis interval="10" title="Server Load" labelFormat="{value}MB">
<e-majorticklines width="0"></e-majorticklines>
<e-linestyle width="0"></e-linestyle>
</e-chart-primaryyaxis>
<e-series-collection>
<e-series xName="x" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
<e-series-animation enable="false"></e-series-animation>
</e-series>
</e-series-collection>
<e-chart-tooltipsettings enable="true" shared="true"></e-chart-tooltipsettings>
<e-chart-legendsettings visible="false"></e-chart-legendsettings>
<e-chart-legendsettings visible="false"></e-chart-legendsettings>
</ejs-chart>
<script>
var intl = new ej.base.Internationalization();
var chart;
function scrollEnd(args) {
if (modeType.value === 'Range') {
chart.series[0].dataSource = GetDateTimeData(args.currentRange.minimum, args.currentRange.maximum);
}
chart.dataBind();
}
</script>
window.onChartLoad = function (args) {
args.chart.series[0].dataSource = GetDateTimeData(new Date(2009, 0, 1), new Date(2009, 8, 1)),
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;
}
Specific color for empty point can be set by fill
property in emptyPointSettings
. Border for a empty point can be set by
border
property.
<ejs-chart id="container" title="Inflation - Consumer Price" width="60%">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Germany" xName="month" width="2" opacity="1" yName="sales" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
<e-series-emptypointsettings fill="#e6e6e6" mode="@Syncfusion.EJ2.Charts.EmptyPointMode.Average"></e-series-emptypointsettings>
</e-series>
</e-series-collection>
</ejs-chart>
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;
}