Search results

Working with Data

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.

tagHelper
local-data.cs
<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;
        }

Common Datasource

You can also bind a JSON data common to all series using dataSource property in chart.

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.

tagHelper
remote-data.cs
<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();
            
        }

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.

tagHelper
empty-points.cs
<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;
        }

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.

tagHelper
custom-emptypoint.cs
<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;
        }