DevExtreme Angular - Array Only
To bind the Funnel to an array, pass this array to the dataSource option. The array should contain objects.
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.
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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.