DevExtreme Vue - ArrayStore
If you want to extend the functionality of a JavaScript array, place it into an ArrayStore. It provides an interface for loading and editing data, and allows you to handle data-related events.
jQuery
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: new DevExpress.data.DataSource({ store: { type: 'array', data: fruits, onLoaded: function () { // Event handling commands go here } }, paginate: false }), series: { argumentField: 'fruit', valueField: 'count' } }); });
Angular
import { DxPieChartModule } from 'devextreme-angular'; import DataSource from 'devextreme/data/data_source'; import 'devextreme/data/array_store' // ... export class AppComponent { fruits = [ { fruit: 'Apples', count: 10 }, { fruit: 'Oranges', count: 12 }, { fruit: 'Lemons', count: 15 }, { fruit: 'Pears', count: 20 }, { fruit: 'Pineapples', count: 3 } ]; pieChartDataSource = new DataSource({ store: { type: 'array', data: this.fruits, onLoaded: function () { // Event handling commands go here } }, paginate: false }); } @NgModule({ imports: [ // ... DxPieChartModule ], // ... })
<dx-pie-chart [dataSource]="pieChartDataSource"> <dxi-series argumentField="fruit" valueField="count"></dxi-series> </dx-pie-chart>
As you may notice, in the previous code, the ArrayStore is not declared explicilty. Instead, it is wrapped in the DataSource instance. That is because the PieChart requires pagination to be off in order to prevent data from partitioning. Other than that, the DataSource provides wide data-processing capabilities. For example, it can map objects from the array that underlies the ArrayStore, as shown in the following code.
jQuery
var fruits = [ { apples: 10 }, { oranges: 12 }, { lemons: 15 }, { pears: 20 }, { pineapples: 3 } ]; $(function () { $("#pieChartContainer").dxPieChart({ dataSource: new DevExpress.data.DataSource({ store: fruits, map: function (item) { var fruitName = Object.keys(item)[0]; return { fruit: fruitName.charAt(0).toUpperCase() + fruitName.slice(1), count: item[fruitName] } }, paginate: false }), series: { argumentField: 'fruit', valueField: 'count' } }); });
Angular
import { DxPieChartModule } from 'devextreme-angular'; import DataSource from 'devextreme/data/data_source'; // ... export class AppComponent { fruits = [ { apples: 10 }, { oranges: 12 }, { lemons: 15 }, { pears: 20 }, { pineapples: 3 } ]; pieChartDataSource = new DataSource({ store: this.fruits, map: function (item) { var fruitName = Object.keys(item)[0]; return { fruit: fruitName.charAt(0).toUpperCase() + fruitName.slice(1), count: item[fruitName] } }, paginate: false }); } @NgModule({ imports: [ // ... DxPieChartModule ], // ... })
<dx-pie-chart [dataSource]="pieChartDataSource"> <dxi-series argumentField="fruit" valueField="count"></dxi-series> </dx-pie-chart>
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.