Turning Data into Actionable Intelligence with ChartsJS

Skip Navigation

Turning Data into Intelligence with ChartsJS

/ April 4, 2016

Our community is constantly adding cool new widgets and modules to the App Store. If you’re unsure what exists, check out our previous reviews on UI building blocks and the feedback widget.

This week, I’m highlighting the ChartJS widget collection. This powerful set of widget brings the ChartJS JavaScript classes into Mendix, allowing you to build and configure slick-looking charts right in the modeler.

Add great looking charts to your app 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.

Adding a chart is as simple as adding a widget

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.

  • Line
  • Bar
  • Stacked bar
  • Radar
  • Pie
  • Doughnut

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.

Configuring the chart is done through the familiar 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!


Happy Modeling!


Copy link