DevExtreme Charts Data Handling Revisited with Open Source data-transformer

In two blog posts, I recently mentioned data transformation requirements to enable binding of certain data structures to our DevExtreme Chart controls. To make these steps easier, I have now created an Open Source JavaScript library called data-transformer that provides utility functions for purposes similar to those outlined in my previous blog posts.

The repository for data-transformer is here: https://github.com/oliversturm/data-transformer

Detailed instructions for the use of the library can be found in the README file displayed on the repository front page. Feel free to use this in your own projects, and let me know if you find any problems!

The first of the recent posts I'm referring to was Simulating per-series ChartJS data binding with a seriesTemplate. In the post, I was describing a nested 1:N master-detail data structure, and a helper function to flatten this to a simple list that can be bound to the chart. With the flattenOneToN helper from data-transformer, the same result can now be achieved like this:

  $("#chart").dxChart({ 
    dataSource: Array.from(dataTransformer.flattenOneToN(data)),
    commonSeriesSettings: {
    ...

An updated version of the codepen from the original blog post is available to play with the code:

The second of my recent posts was Binding an Array of Arrays with ChartJS, which described a data structure of nested arrays. Again, a more versatile function from data-transformer can be used to restructure this as a bindable format:

  $("#chart").dxChart({
    dataSource: Array.from(
      dataTransformer.iterableOfIterablesToObjects(data, ["days", "percent"])),
    rotated: true,
    ...

The updated version of the related codepen is here:

Free DevExpress Products - Get Your Copy Today