Dynamic data update in Angular Accumulation Chart component

25 Sep 202412 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.
var piechart = new ej.charts.AccumulationChart({
        series: [
          {
            dataSource: [
              { x: 'Jan', y: 3 },
              { x: 'Feb', y: 3.5 },
              { x: 'Mar', y: 7 },
              { x: 'Apr', y: 13.5 },
              { x: 'May', y: 19 },
              { x: 'Jun', y: 23.5 },
              { x: 'Jul', y: 26 },
              { x: 'Aug', y: 25 },
              { x: 'Sep', y: 21 },
              { x: 'Oct', y: 15 },
            ],
            type: 'Pie',
            xName: 'x',
            yName: 'y',
          },
        ],
}, '#element');

document.getElementById('add').onclick = function () {
    piechart.series[0].addPoint({ x: 'Nov', y: 12 });
  }
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
        <button id='add'>Add Point</button>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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.
var piechart = new ej.charts.AccumulationChart({
        series: [
          {
            dataSource: [
              { x: 'Jan', y: 3 },
              { x: 'Feb', y: 3.5 },
              { x: 'Mar', y: 7 },
              { x: 'Apr', y: 13.5 },
              { x: 'May', y: 19 },
              { x: 'Jun', y: 23.5 },
              { x: 'Jul', y: 26 },
              { x: 'Aug', y: 25 },
              { x: 'Sep', y: 21 },
              { x: 'Oct', y: 15 },
            ],
            type: 'Pie',
            xName: 'x',
            yName: 'y',
          },
        ],
}, '#element');

document.getElementById('add').onclick = function () {
    piechart.series[0].removePoint(0);
  }
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
        <button id='add'>Remove Point</button>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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.
var piechart = new ej.charts.AccumulationChart({
  series: [
    {
      dataSource: [
        { x: 'Jan', y: 3 },
        { x: 'Feb', y: 3.5 },
        { x: 'Mar', y: 7 },
        { x: 'Apr', y: 13.5 },
        { x: 'May', y: 19 },
        { x: 'Jun', y: 23.5 },
        { x: 'Jul', y: 26 },
        { x: 'Aug', y: 25 },
        { x: 'Sep', y: 21 },
        { x: 'Oct', y: 15 },
      ],
      type: 'Pie',
      xName: 'x',
      yName: 'y',
    },
  ],
}, '#element');

document.getElementById('add').onclick = function () {
  const 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 },
  ];
  piechart.series[0].setData(newData, 500);
}
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
        <button id='add'>Update Series</button>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>