DevExtreme: New client-side export for Charts and Data Visualization

DevExtreme comes with some really powerful Charting and other data visualization controls like Maps, Gauges and Range widgets. One of the issues faced in the pre-v16.1 versions of our suite was that exporting such a widget to e.g. PNG, JPG or PDF was a bit of a tedious job.

You would need the specific widget bound to a dxExporter widget on the client, and a specially customized PhantomJS instance configured on the server:

Besides the fact that you would need this extra server, you can imagine that this process takes some time to configure and test.

Exporting in v16.1

In our v16.1 release we have added export functionality to all the widgets. This means that there is no need for this custom PhantomJS server, and that it will work pretty much out of the box.

How does it work?

If you want to enable export functionality for a specific widget, the only thing you need to specify in the configuration object of the widget is:

options = {
    export: {
        enabled: true
    },
    ...
} 

What about customization?

Just like the older releases, v16.1 supports exporting as well as printing to JPG, PNG, GIF, PDF and SVG.

You can even specify a default filename of the export – even without extension – by specifying the fileName property. We’ll add the extension to the filename automatically depending on the chosen format.

options = {
    export: {
        fileName: "Sales2016ByMonth"
    },
    ...
}

In the v16.1 release, we added a number of additional features such as specifying the background color for an exported chart:

options = {
    export: {
        backgroundColor: "#282828"
    },
    ...
}

This is great for creating a uniform look or complying with your corporate identity.

Menu enhancements

In previous versions, the export menu was provided by the dxExporter class. To add this menu to your widget, you would add a reference to that visualization widget in the dxExporter configuration object. To specify a custom menu or to call exporting/printing via custom events on your page, you would have to use the dxExporter API.

We have made this way easier with v16.1. Since all the widgets have the export functionality included, they also include a default export menu. This menu will be shown automatically if exporting of the widget is enabled.

Because this menu is now part of the widget, we make sure that it is perfectly aligned and positioned inside the widget.

All this out-of-the-box behavior is part of the exporting API which comes with the visualization widgets. This gives you the possibility to customize and fine-tune several exporting options according to your needs.

chartInstance.exportTo("myExample", "pdf");

Conclusion

The new client-side exporting features in v16.1 are easier and faster to setup. They also allow you to change several aspects of the default export behavior.

Let me know what you think of this!

Free DevExpress Products – Get Your Copy Today