DevExtreme jQuery/JS - Array Only

To bind the Chart 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 () {
  • $("#chartContainer").dxChart({
  • dataSource: fruits,
  • series: {
  • // See details in the "Bind Series to Data" topic
  • argumentField: 'fruit',
  • valueField: 'count'
  • }
  • });
  • });

After that, you need to bind one or several Chart series to data. Depending on the series type you chose, use one of the techniques described in the Bind Series to Data topic.

View Demo

If objects in an array need to be processed (sorted, filtered, etc.), you can create a Query. For example, in the following code, a Query sorts objects in the fruits array by the count field in descending order.

JavaScript
  • var fruits = [
  • { fruit: 'Apples', count: 10 },
  • { fruit: 'Oranges', count: 12 },
  • { fruit: 'Lemons', count: 15 },
  • { fruit: 'Pears', count: 20 },
  • { fruit: 'Pineapples', count: 3 }
  • ];
  •  
  • $(function () {
  • $("#chartContainer").dxChart({
  • dataSource: DevExpress.data.query(fruits).sortBy("count", true).toArray(),
  • series: {
  • argumentField: 'fruit',
  • valueField: 'count'
  • }
  • });
  • });
See Also