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