DevExtreme jQuery - Array Only
To bind the PieChart to an array, pass this array to the dataSource option. The array should contain objects.
jQuery
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'
}
});
});Angular
TypeScript
HTML
import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
fruits = [
{ fruit: 'Apples', count: 10 },
{ fruit: 'Oranges', count: 12 },
{ fruit: 'Lemons', count: 15 },
{ fruit: 'Pears', count: 20 },
{ fruit: 'Pineapples', count: 3 }
];
}
@NgModule({
imports: [
// ...
DxPieChartModule
],
// ...
})<dx-pie-chart [dataSource]="fruits">
<!-- See details in the "Bind Series to Data" topic -->
<dxi-series argumentField="fruit" valueField="count"></dxi-series>
</dx-pie-chart>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.
jQuery
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'
}
});
});Angular
TypeScript
HTML
import { DxPieChartModule } from "devextreme-angular";
import query from "devextreme/data/query";
// ...
export class AppComponent {
fruits = [
{ fruit: 'Apples', count: 10 },
{ fruit: 'Oranges', count: 12 },
{ fruit: 'Lemons', count: 15 },
{ fruit: 'Pears', count: 20 },
{ fruit: 'Pineapples', count: 3 }
];
getSortedFruits () {
return query(this.fruits).sortBy("count", true).toArray();
}
}
@NgModule({
imports: [
// ...
DxPieChartModule
],
// ...
})<dx-pie-chart [dataSource]="getSortedFruits()">
<dxi-series argumentField="fruit" valueField="count"></dxi-series>
</dx-pie-chart>See Also
Feedback