JavaScript/jQuery PieChart - Update Data

DevExtreme DataSource

NOTE
This technique requires the key specified in the store.

To get the DataSource instance, call the PieChart's getDataSource() method:

index.js
  • function getDataSource() {
  •     return $("#pieChartContainer").dxPieChart("getDataSource");
  • }

Then, access the underlying store with the store() method, and call the store's push(changes) method to modify data. The PieChart will be updated automatically.

JavaScript
  • getDataSource().store().push([
  •     { type: "update", key: "Oranges", data: { count: 10 } },
  •     { type: "remove", key: "Apples" }
  • ]);
See Also

JavaScript Array

jQuery

Make changes to the array using standard methods. Then, reassign the updated array to the PieChart using the option(optionName, optionValue) method.

JavaScript
  • var fruits = [
  •     { fruit: 'Apples', count: 10 },
  •     { fruit: 'Oranges', count: 12 },
  •     { fruit: 'Lemons', count: 15 }
  • ];
  •  
  • fruits.push({ fruit: 'Pineapples', count: 3 });
  • // Reassigns the "fruits" array to the PieChart 
  • $("#pieChartContainer").dxPieChart("option", "dataSource", fruits);
See Also