Turning Data into Intelligence with ChartsJS
Why use the ChartsJS Widget?
It is said that a picture is worth a thousand words, and this is especially true when it comes to digesting data in your Mendix applications. Smart use of charts to help aid in business decisions can save time, improve user experience, and reduce mistakes. The ChartsJS widget is a powerful package, and the Mendix widget utilizes these classes to add rich charts to your app.
What is ChartsJS?
The ChartsJS Widget available from the app store is a collection of widgets that can be dropped into a page in your project.
At the core of the ChartsJS widget is the ChartsJS open-source java script package. This powerful toolkit brings advanced charts into the hands of developers of all applications. It is modular, lightweight, and interactive and provides a lot of power for building great looking charts. Full information on the ChartsJS package can be found here. The Mendix ChartsJS widget is a wrapper for these packages, allowing you to access powerful functionality
What do you get with the ChartsJS Widget?
The charts widget contains a comprehensive feature list to make your charts really stand out. Some of the highlights are:
Multiple chart types
The ChartsJS widget contains separate widgets for many different chart types. Each one utilizes the same data framework but with varying options to simplify configuration.
- Stacked bar
The module package can be set to automatically resize depending on the viewing device. Now you can make one chart and have it look great across mobile, tablet, and desktop devices!
Interaction through microflows
ChartsJS supports interaction through microflows. On-click microflows can be engaged to allow users to interact with the data at runtime further enhance the experience of your users.
Configuring the Widget
After adding the widget for the chart you want to the page, you configure the chart through the modeler widget interface.
To populate the chart with data, you will need to write a microflow to retrieve the relevant data and populate a non-persistant entity. For a step-by-step process on how to get the chart working now, stay tuned for the arrival of a detailed How-to guide.
Find it on GitHub
Like much of our new App Store content, the ChartsJS widget has a GitHub repository here. Our active open-source community is constantly working to enhance existing widgets and create great new content together. Keep an eye on this widget in the future as additional functionality is on the way. If you are feeling full of initiative, download the repository and add new features yourself!