DevExtreme React - 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
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.