Dynamic data update in ASP.NET CORE Chart Component

10 Jun 202422 minutes to read

Adding a new data point

The AddPoint method is used to dynamically add a new data point to the chart series. This method is particularly useful when you want to update the chart with a new data point without having to refresh the entire chart. This method takes two parameters:

  • The first parameter is the new data point to add to your existing data source.
  • The optional second parameter specifies the animation duration for adding the new data point.
<ejs-chart id="container" title="Internet Users - 2016">
    <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category" enableTrim="false">
        <e-majorgridlines width="0"></e-majorgridlines>
        <e-majorticklines width="0"></e-majorticklines>
    </e-chart-primaryxaxis>
    <e-chart-primaryyaxis minimum="0" maximum="800" labelFormat="{value}M" edgeLabelPlacement="@Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift">
    </e-chart-primaryyaxis>
    <e-chart-chartarea>
        <e-chartarea-border width="1"></e-chartarea-border>
    </e-chart-chartarea>
    <e-chart-legendsettings visible="false">
    </e-chart-legendsettings>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Spline" width="2" name="Users">
            <e-series-marker visible="true">
                <e-series-datalabel visible="true" position="@Syncfusion.EJ2.Charts.LabelPosition.Top">
                    <e-font fontWeight="600"></e-font>
                </e-series-datalabel>
            </e-series-marker>
            </e-series>
    </e-series-collection>
</ejs-chart>

<div>      
  <ejs-button id="add" content="Add Point" isPrimary="true"></ejs-button>       
</div>
<script>
    document.getElementById('add').onclick = () => {
        var chart = document.getElementById('container').ej2_instances[0];
        chart.series[0].addPoint({ x: "Japan", y: 118.2 });
    }
</script>
public ActionResult Index()
{
    List<DynamicChartData> chartData = new List<DynamicChartData>
    {
        new DynamicChartData{ x= "Germany",        y= 72    },
        new DynamicChartData{ x= "Russia",         y= 103.1 },
        new DynamicChartData{ x= "Brazil",         y= 139.1 },
        new DynamicChartData{ x= "India",          y= 462.1 },
        new DynamicChartData{ x= "China",          y= 721.4 },
        new DynamicChartData{ x= "USA",            y= 286.9 },
        new DynamicChartData{ x= "Great Britain",  y= 115.1 },
        new DynamicChartData{ x= "Nigeria",        y= 97.2  }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class DynamicChartData
{
    public string x;
    public double y;
}

Removing an existing data point

The RemovePoint method is used to dynamically remove a data point from the chart series. This method is particularly useful when you want to update the chart by removing an existing data point without having to refresh the entire chart. This method takes two parameters:

  • The first parameter is the index of the data point that needs to be removed from the existing data source.
  • The optional second parameter specifies the animation duration for removing the data point.
<ejs-chart id="container" title="Internet Users - 2016">
    <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category" enableTrim="false">
        <e-majorgridlines width="0"></e-majorgridlines>
        <e-majorticklines width="0"></e-majorticklines>
    </e-chart-primaryxaxis>
    <e-chart-primaryyaxis minimum="0" maximum="800" labelFormat="{value}M" edgeLabelPlacement="@Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift">
    </e-chart-primaryyaxis>
    <e-chart-chartarea>
        <e-chartarea-border width="1"></e-chartarea-border>
    </e-chart-chartarea>
    <e-chart-legendsettings visible="false">
    </e-chart-legendsettings>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Spline" width="2" name="Users">
            <e-series-marker visible="true">
                <e-series-datalabel visible="true" position="@Syncfusion.EJ2.Charts.LabelPosition.Top">
                    <e-font fontWeight="600"></e-font>
                </e-series-datalabel>
            </e-series-marker>
            </e-series>
    </e-series-collection>
</ejs-chart>

<div>      
  <ejs-button id="remove" content="Remove Point" isPrimary="true"></ejs-button>       
</div>
<script>
    document.getElementById('remove').onclick = () => {
        var chart = document.getElementById('container').ej2_instances[0];
        chart.series[0].removePoint(0);
    }
</script>
public ActionResult Index()
{
    List<DynamicChartData> chartData = new List<DynamicChartData>
    {
        new DynamicChartData{ x= "Germany",        y= 72    },
        new DynamicChartData{ x= "Russia",         y= 103.1 },
        new DynamicChartData{ x= "Brazil",         y= 139.1 },
        new DynamicChartData{ x= "India",          y= 462.1 },
        new DynamicChartData{ x= "China",          y= 721.4 },
        new DynamicChartData{ x= "USA",            y= 286.9 },
        new DynamicChartData{ x= "Great Britain",  y= 115.1 },
        new DynamicChartData{ x= "Nigeria",        y= 97.2  }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class DynamicChartData
{
    public string x;
    public double y;
}

Replacing entire data points

To replace the existing data source in the chart with a new data source, you can simply use the SetData method. This method allows you to replace the existing data points in the chart series with a new set of data points, enabling you to easily update the chart with new information. This method takes two parameters:

  • The first parameter is the new set of data points to be updated.
  • The optional second parameter specifies the animation duration for updating the new data source.
<ejs-chart id="container" title="Sales by product" axisRangeCalculated="axisRangeCalculated">
    <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category" labelIntersectAction="@Syncfusion.EJ2.Charts.LabelIntersectAction.Rotate90">
        <e-majorgridlines width="0"></e-majorgridlines>
        <e-labelstyle size="12px"></e-labelstyle>
    </e-chart-primaryxaxis>
    <e-chart-primaryyaxis title="Sales (in percentage)" minimum="0" maximum="100" interval="5" labelFormat="{value}%">
        <e-linestyle width="0"></e-linestyle>
        <e-majorticklines width="0"></e-majorticklines>
    </e-chart-primaryyaxis>
    <e-chart-chartarea>
        <e-chartarea-border width="0"></e-chartarea-border>
    </e-chart-chartarea>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column" columnWidth="0.5">
            <e-series-cornerRadius topLeft="15" topRight="15">
            </e-series-cornerRadius>
            </e-series>
    </e-series-collection>
</ejs-chart>

<div>      
  <ejs-button id="update" content="Update Data" isPrimary="true"></ejs-button>       
</div>
<script>
    function axisRangeCalculated(args) {
        if (args.axis.name === 'primaryYAxis') {
            args.maximum = args.maximum > 100 ? 100 : args.maximum;
            if (args.maximum > 80) {
                args.interval = 20;
            }
            else if (args.maximum > 40) {
                args.interval = 10;
            }
        }
    }

    document.getElementById('update').onclick = () => {
        var chart = document.getElementById('container').ej2_instances[0];
        var newData = chart.series[0].dataSource.map(function (item) {
            var value = getRandomInt(10, 90);
            return { x: item.x, y: value };
        });
        if (chart.series.length > 0) {
            chart.series[0].setData(newData, 500);
        }
    }

    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
</script>
public ActionResult Index()
{
    List<DynamicChartData> chartData = new List<DynamicChartData>
    {
        new DynamicChartData{ x= "Jewellery",          y= 75 },
        new DynamicChartData{ x= "Shoes",              y= 45 },
        new DynamicChartData{ x= "Footwear",           y= 73 },
        new DynamicChartData{ x= "Pet Services",       y= 53 },
        new DynamicChartData{ x= "Business Clothing",  y= 85 },
        new DynamicChartData{ x= "Office Supplies",    y= 68 },
        new DynamicChartData{ x= "Food",               y= 45 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class DynamicChartData
{
    public string x;
    public double y;
}

Click to add or remove a data point

You can use mouse or touch events to dynamically add or remove data points from an existing data source by clicking on the appropriate position within the chart area. To add a new data point to the existing data source, click anywhere in the chart area, retrieve the x-axis and y-axis information of the clicked location from the ChartMouseClick event arguments. Then, utilize the AddPoint method to add a new data point to the existing data source.

To remove a data point from the existing data source, simply click on the desired data point. To achieve this, first, verify whether the clicked data point obtained from ChartMouseClick already exists in the data source. If it does, remove it by utilizing the RemovePoint method based on its index.

<ejs-chart id="container" load="load" chartMouseClick="chartMouseClick" axisRangeCalculated="axisRangeCalculated" title="User supplied data">
    <e-chart-primaryxaxis edgeLabelPlacement="@Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift" rangePadding="@Syncfusion.EJ2.Charts.ChartRangePadding.Additional">
        <e-majorgridlines width="0"></e-majorgridlines>
    </e-chart-primaryxaxis>
    <e-chart-primaryyaxis title="Value" interval="20">
        <e-majorticklines width="0"></e-majorticklines>
        <e-linestyle width="0"></e-linestyle>
    </e-chart-primaryyaxis>
    <e-chart-chartarea>
        <e-chartarea-border width="0"></e-chartarea-border>
    </e-chart-chartarea>
    <e-chart-tooltipsettings enable="true">
    </e-chart-tooltipsettings>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line" width="3">
            <e-series-marker visible="true" width="13" height="13" isFilled="true">
            </e-series-marker>
        </e-series>
    </e-series-collection>
</ejs-chart>

<script>
    var chart;
    function load(args) {
        chart = args.chart;
        args.chart.series[0].marker.border.width = 2;
        args.chart.series[0].marker.border.color = "white";
    }
    
    function chartMouseClick(args) {
        var isRemoved = false;
        if (args.axisData) {
            for (var i = 0; i < chart.series[0].points.length; i++) {
                var markerWidth = chart.series[0].marker.width / 2;
                var roundedX = Math.round(args.axisData.primaryXAxis) + markerWidth;
                var roundedY = Math.round(args.axisData.primaryYAxis) + markerWidth;
                var pointX = Math.round(chart.series[0].points[i].x) + markerWidth;
                var pointY = Math.round(chart.series[0].points[i].y) + markerWidth;
                if ((roundedX === pointX || roundedX + 1 === pointX || roundedX - 1 === pointX) &&
                    (roundedY === pointY || roundedY + 1 === pointY || roundedY - 1 === pointY)) {
                    if (chart.series[0].points.length > 1) {
                        var points = chart.series[0].points;
                        var duration = i === 0 || i === points[points.length - 1].index ? 500 : 0;
                        chart.series[0].removePoint(i, duration);
                    }
                    isRemoved = true;
                }
            }
            if (!isRemoved) {
                chart.series[0].addPoint({ x: Math.round(args.axisData['primaryXAxis']), y: Math.round(args.axisData['primaryYAxis']) });
            }
        }
    }

    function axisRangeCalculated(args) {
        if (args.axis.name === 'primaryXAxis') {
            if (args.interval < 10) {
                args.maximum = args.maximum + 10;
                args.minimum = args.minimum - 10;
                args.interval = 10;
            }
        }
        if (args.axis.name === 'primaryYAxis') {
            if (args.maximum <= 60) {
                args.interval = 10;
            }
        }
    }
</script>
public ActionResult Index()
{
    List<DynamicChartData> chartData = new List<DynamicChartData>
    {
        new DynamicChartData { x = 20,  y = 20 },
        new DynamicChartData { x = 80,  y = 80 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class DynamicChartData
{
    public double x;
    public double y;
}