DevExtreme Charts - Client-side Data Aggregation (v18.1)

Data aggregation in charts in an important feature and in the v18.1 release, we've significantly improved it. Let me explain.

These days with big data, data aggregation is important to organizations in many areas such as statistics, data analytics, planning, business strategies, etc. Data aggregation's main goal is to visualize large amounts of data in a more readable form.

Image may be NSFW.
Clik here to view.

The DevExtreme Chart widget has been providing data aggregation for several releases. However, the feature wasn't very flexibile because you could not:

• choose the aggregate function because only the median filter was available
• change the aggreagtion intervals or configure aggregation differently for each series. In fact, all you could do is turn the feature on/off for the entire chart.

Here's what it looked like prior to v18.1:

Image may be NSFW.
Clik here to view.

 $("#chart").dxChart({ 
    dataSource: dataSource, 
    useAggregation: true, 
    ...     
    series: [{}] 
});

Improved Data Aggregation

In v18.1, we completely reworked the data aggregation feature to address these issues and expand its capabilities.

Now you can:

• choose one of the built-in aggregation methods
• or implement a custom aggregation method

Here's how easy it to set a custom aggregation method with DevExtreme charts in v18.1:

$("#chart").dxChart({
   dataSource: dataSource,
   ...
   series: {
      valueField: "carCount",
      aggregation: {
      enabled: true,
      method: "max"
      },
   ...
   }
}); 

• specify different aggregation methods for different series

Image may be NSFW.
Clik here to view.

$("#chart").dxChart({
    dataSource: dataSource,
    ...
    series: [{
        valueField: "dailyIndex",
        aggregation: {
            enabled: true,
            method: "avg"
        },
        ...
    }, {
                valueField: "monthlyIndex",
                ...
    }]
}); 

Use Synthetic Data Objects

Using a custom aggregate function, you can generate synthetic data objects for a series based on real data objects from the data source, as it is done in the following example for the range area series:

Image may be NSFW.
Clik here to view.

$("#chart").dxChart({
    dataSource: dataSource,
    ...
    series: [{
        type: "rangeArea",
        rangeValue1Field: "minTemp",
        rangeValue2Field: "maxTemp",
        aggregation: {
            enabled: true,
            method: "custom",
            calculate: function (aggregationInfo, series) {
                if (!aggregationInfo.data.length) {
                    return;
                }
                var temp = aggregationInfo.data.map(function (item) { return item.temp; }),
                    maxTemp = Math.max.apply(null, temp),
                    minTemp = Math.min.apply(null, temp);
                return {
                    date: aggregationInfo.intervalStart,
                    maxTemp: maxTemp,
                    minTemp: minTemp
                };
            }
        },
        ...
    },
    ...
    ]
});

Manage Interval Length

We also provided the capability to manage the length of aggregation intervals. You can specify the length in pixels using the aggregationGroupWidth option or in axis units using the aggregationInterval option.

Image may be NSFW.
Clik here to view.

$("#chart").dxChart({
    dataSource: dataSource,
    argumentAxis: {
        argumentType: "datetime",
        aggregationInterval: "month"
    },
    ...
    series: {
        valueField: "carCount",
        aggregation: {
            enabled: true,
            method: "avg"
        },
        ...
    }
});

Are you looking forward to the improved data aggregation capabilities of the DevExtreme Charts? Drop me a line below.

Thanks!

Email: mharry@devexpress.com

Twitter: @mehulharry

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.