Dynamic data update in ASP.NET CORE Accumulation Chart Component

16 Sep 202410 minutes to read

Adding a new data point

The AddPoint method is used to dynamically add a new data point to the accumulation 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 accumulation 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-accumulationchart id="container">
    <e-accumulation-series-collection>
        <e-accumulation-series dataSource="ViewBag.dataSource" xName="X" yName="Y"
            type="@Syncfusion.EJ2.Charts.AccumulationType.Pie">
        </e-accumulation-series>
    </e-accumulation-series-collection>
</ejs-accumulationchart>

<div>
    <ejs-button id="add" content="Add Point" isPrimary="true"></ejs-button>
</div>
<script>
    document.getElementById('add').onclick = () => {
        var piechart = document.getElementById('container').ej2_instances[0];
        piechart.series[0].addPoint({ X: 'Nov', Y: 18 });
    }
</script>
public ActionResult Index()
{
    List<PieChartData> chartData = new List<PieChartData>
    {
        new PieChartData { X = "Jan", Y = 3 },
        new PieChartData { X = "Feb", Y = 3.5 },
        new PieChartData { X = "Mar", Y = 7 },
        new PieChartData { X = "Apr", Y = 13.5 },
        new PieChartData { X = "May", Y = 19 },
        new PieChartData { X = "Jun", Y = 23.5 },
        new PieChartData { X = "Jul", Y = 26 },
        new PieChartData { X = "Aug", Y = 25 },
        new PieChartData { X = "Sep", Y = 21 },
        new PieChartData { X = "Oct", Y = 15 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class PieChartData
{
    public string X;
    public double Y;
}

Removing an existing data point

The RemovePoint method is used to dynamically remove a data point from the accumulation chart series. This method is particularly useful when you want to update the accumulation chart by removing an existing data point without having to refresh the entire accumulation 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-accumulationchart id="container">
    <e-accumulation-series-collection>
        <e-accumulation-series dataSource="ViewBag.dataSource" xName="X" yName="Y"
            type="@Syncfusion.EJ2.Charts.AccumulationType.Pie">
        </e-accumulation-series>
    </e-accumulation-series-collection>
</ejs-accumulationchart>

<div>
    <ejs-button id="remove" content="Remove Point" isPrimary="true"></ejs-button>
</div>
<script>
    document.getElementById('remove').onclick = () => {
        var piechart = document.getElementById('container').ej2_instances[0];
        piechart.series[0].removePoint(0);
    }
</script>
public ActionResult Index()
{
    List<PieChartData> chartData = new List<PieChartData>
    {
        new PieChartData { X = "Jan", Y = 3 },
        new PieChartData { X = "Feb", Y = 3.5 },
        new PieChartData { X = "Mar", Y = 7 },
        new PieChartData { X = "Apr", Y = 13.5 },
        new PieChartData { X = "May", Y = 19 },
        new PieChartData { X = "Jun", Y = 23.5 },
        new PieChartData { X = "Jul", Y = 26 },
        new PieChartData { X = "Aug", Y = 25 },
        new PieChartData { X = "Sep", Y = 21 },
        new PieChartData { X = "Oct", Y = 15 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class PieChartData
{
    public string X;
    public double Y;
}

Replacing entire data points

To replace the existing data source in the accumulation 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 accumulation chart series with a new set of data points, enabling you to easily update the accumulation 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-accumulationchart id="container">
    <e-accumulation-series-collection>
        <e-accumulation-series dataSource="ViewBag.dataSource" xName="X" yName="Y"
            type="@Syncfusion.EJ2.Charts.AccumulationType.Pie">
        </e-accumulation-series>
    </e-accumulation-series-collection>
</ejs-accumulationchart>

<div>
    <ejs-button id="update" content="Update Series" isPrimary="true"></ejs-button>
</div>
<script>
    document.getElementById('update').onclick = () => {
        var newData = [
            { X: 'Jan', Y: 3 },
            { X: 'Feb', Y: 3.5 },
            { X: 'Mar', Y: 7 },
            { X: 'Aug', Y: 25 },
            { X: 'Sep', Y: 21 },
            { X: 'Oct', Y: 15 }
        ];
        var piechart = document.getElementById('container').ej2_instances[0];
        piechart.series[0].setData(newData, 500);
    }
</script>
public ActionResult Index()
{
    List<PieChartData> chartData = new List<PieChartData>
    {
        new PieChartData { X = "Jan", Y = 3 },
        new PieChartData { X = "Feb", Y = 3.5 },
        new PieChartData { X = "Mar", Y = 7 },
        new PieChartData { X = "Apr", Y = 13.5 },
        new PieChartData { X = "May", Y = 19 },
        new PieChartData { X = "Jun", Y = 23.5 },
        new PieChartData { X = "Jul", Y = 26 },
        new PieChartData { X = "Aug", Y = 25 },
        new PieChartData { X = "Sep", Y = 21 },
        new PieChartData { X = "Oct", Y = 15 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class PieChartData
{
    public string X;
    public double Y;
}