RGraph Gauge Charts

Content Type: Widget
Categories: User Interface

Overview

Add an interactive Gauge chart based on the lightweight RGraph library to your Mendix application. Two types of gauges are supported: - Original (odometer-like); - Semicircular Progress

Documentation

Demo urlhttps://https://d3gaugechart.mxapps.io/index.html?profile=Responsive

Typical usage scenario

When reporting needs to be presented in a Mendix application for some key progress indicator.

Features and limitations

  1. Two different Gauge Types;
  2. SVG and Canvas supported;
  3. Styling customizations:  
    1. Coloured Sections; 
    2. Animations;
    3. Text formatting;
    4. On Click microflow;

Limitations

SVG only supported for the Semicircular Progress chart type.

Configuration

Step 1: Create a non-persistent GaugeWrapper entity in which at least three Decimal type attributes should be present: Value, MinValue and MaxValue.

Step 2: Add a dataview to your page, populated by a datasource microflow that creates this GaugeWrapper entity.

Step 3: Configure the widget

Configuring the widget is straightforward due to informative texts below settings. Some extra notes:

  • Always configure the Gauge Sections part.
  • If only one color is needed, let the range start at 0, end at 100 and have the color you want.
  • Based on the chosen Gauge Type in the General tab, you either configure the Semicircular OR the Original tab.

 

Releases