DevExtreme jQuery - Array Only
To bind the Funnel 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 () {
$("#funnelContainer").dxFunnel({
dataSource: fruits,
argumentField: "fruit",
valueField: "count"
});
});Angular
TypeScript
HTML
import { DxFunnelModule } 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: [
// ...
DxFunnelModule
],
// ...
})
<dx-funnel
[dataSource]="fruits"
argumentField="fruit"
valueField="count">
</dx-funnel>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 applies a filter to the fruits array that excludes objects with count less than 10.
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 () {
$("#funnelContainer").dxFunnel({
dataSource: DevExpress.data.query(fruits).filter([ "count", ">=", 10 ]).toArray(),
argumentField: "fruit",
valueField: "count"
});
});Angular
TypeScript
HTML
import { DxFunnelModule } 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 }
];
getFilteredFruits () {
return query(this.fruits).filter([ "count", ">=", 10 ]).toArray();
}
}
@NgModule({
imports: [
// ...
DxFunnelModule
],
// ...
})<dx-funnel
[dataSource]="getFilteredFruits()"
argumentField="fruit"
valueField="count">
</dx-funnel>See Also
Feedback