Angular PieChart - Array Only

To bind the PieChart to an array, pass this array to the dataSource property. The array should contain objects.

JavaScript
  • var fruits = [
  • { fruit: 'Apples', count: 10 },
  • { fruit: 'Oranges', count: 12 },
  • { fruit: 'Lemons', count: 15 },
  • { fruit: 'Pears', count: 20 },
  • { fruit: 'Pineapples', count: 3 }
  • ];
  •  
  • $(function () {
  • $("#pieChartContainer").dxPieChart({
  • dataSource: fruits,
  • series: {
  • // See details in the "Bind Series to Data" topic
  • argumentField: 'fruit',
  • valueField: 'count'
  • }
  • });
  • });

If objects in the array need to be processed (sorted, filtered, etc.), you can create a Query. For example, in the following code, a Query sorts objects in the fruits array by the count field in descending order.

JavaScript
  • var fruits = [
  • { fruit: 'Apples', count: 10 },
  • { fruit: 'Oranges', count: 12 },
  • { fruit: 'Lemons', count: 15 },
  • { fruit: 'Pears', count: 20 },
  • { fruit: 'Pineapples', count: 3 }
  • ];
  •  
  • $(function () {
  • $("#pieChartContainer").dxPieChart({
  • dataSource: DevExpress.data.query(fruits).sortBy("count", true).toArray(),
  • series: {
  • argumentField: 'fruit',
  • valueField: 'count'
  • }
  • });
  • });
See Also