DevExtreme React - Array Only

To bind the Funnel to an array, pass this array to the dataSource option. The array should contain objects.

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"
  • });
  • });

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.

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"
  • });
  • });
See Also