You can add a wide range of charts to your app pages to display data series visually.
Basic Charts are included in Mendix starter apps based on Atlas UI. They can be included in other Mendix apps by downloading them from the Mendix App Store here: https://appstore.home.mendix.com/link/app/105695/.
Any Chart gives much more control and implements all the features of plotly.js. The Any chart widget can be included in your Mendix app by downloading it from the Mendix App Store here: https://appstore.home.mendix.com/link/app/106517/.
2 Basic Charts
With Mendix Charts you can quickly create beautiful charts. The following charts are included:
- Area chart – a line chart with a fill to the x axis
- Bar chart – horizontal bars, grouped or stacked
- Bubble chart – add a size dimension to your chart
- Column chart – vertical bars, grouped or stacked
- Heat map – show data values by color in a 2D matrix
- Line chart – straight or curved lines, with or without markers
- Pie chart – a pie or a doughnut chart
- Time series – show data ordered by time
The widgets contain several settings which can be changed in Studio Pro to customize the look and feel and also offer support for on click events and custom tooltips. See Chart Configuration to learn how to configure Mendix charts.
Dynamic Series Chart
From version 1.4 of the basic charts you can create charts with a variable number of data series. For instructions on how to do this, see How to Create a Dynamic Series Chart.
3 Any Chart
With Any Chart you can build all the chart types that are possible with Plotly.js. If you want to build a chart which is not available in the Basic charts, Any Chart is your friend.
The plotly charts require a configuration based on JSON, therefore Any Chart has JSON as input parameters. You can create this JSON dynamically in your microflow via a JSON Structure document and use this in the Any Chart configuration. It is also possible to define static JSON configuration which is combined with the dynamic JSON.
This module also contains several building blocks for inspiration and as starting point. If you want to create a new chart, we suggest you check out the plotly.js website.
See Any Chart Widgets to learn how to configure Any charts widgets.
4 Documents in This Section
The following documents explain how to use charts in more detail: