Turning Data into Intelligence with ChartsJS

on April 4, 2016

Share:

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.

finalChart

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.

ShowChart

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
Line, bar, and radar are just three of the chart options available

Line, bar, and radar are just three of the chart options available

Responsive design

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.

dataset2

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!

 

Subscribe to Our Blog

Receive Mendix platform tips, tricks, and other resources straight to your inbox every two weeks.

RSS Feed of the Mendix Blog
Robert Bond

About Robert Bond

Rob is an experienced technical consultant seeking to deliver functional, valuable enterprise software that makes businesses more efficient. Rob specializes in designing and delivering cutting edge applications and managing projects through all steps in the development lifecycle.