Overview

Documentation

Description

Add a fancy customizable gauge chart based on the D3 library to your application. Features include: full formatting of the arc and needle, including color coding of different sections of the gauge, animating the way the pointer behaves, adding a microflow on click of the gauge and rounding of values

Typical usage scenario

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

Features and limitations

Features:

• Formatting of Arc
• Color coding sections of the gauge
• Formatting of Needle
• Animating the needle
• Adding an on click microflow

Limitations:

• Fully supported is a 180 degrees arc. 270 or 360 degrees arcs are not supported. 
• The chart is created as SVG, hence the feedback widget (HTML2Canvas library) can not grab this image.

Configuration

1. Create a non-persistent GaugeWrapper entity in which at least three Decimal type attributes should be present: Value, MinValue and MaxValue.
2. Add a dataview to your page, populated by a datasource microflow that creates this GaugeWrapper entity.
3. Configure the widget:

General Settings

• ​Chart Title: The title that will be displayed inside the arch
• Text Color: The color being used in the title, ticks and display value
• Size: The size of the gauge
• Value: The value the needle will be pointing at
• Display value: Decide whether the value will be displayed inside the arc or not.
• Rounding: Whether the decimal Value should be rounded to integer level (via Math.round)
• Minimum Value: Minimum value for the arc of the gauge
• Maximum Value: Maximum value for the arc of the gauge

Arc

• Color Gauge Sections: Set colors per sections of the gauge. Irrelevant of what minimum and maximum value are set, stick to a percentage from 0 to 100 here.
• Range Start: The starting percentage of this section of the gauge
• Range End: The ending percentage of this section of the gauge
• Color: The color for the section. Example colors: Red: #F02828, Orange: #FE6A00, Yellow: #E8DD11, Lightgreen: #82E042, Green: #089F50Sections Border: The size of the whitespace to appear next to each Gauge Section / Tick. 0 is none, default 1
• Ring Width: The width of the arc sections

Needle

• Needle Color: The color being used to fill the Needle
• Needle Length: The length of the Needle
• Neede Radius: The radius of the circle to appear at the bottom of the Needle

Animation:

• Easing: Determines which animation will be shown for the Needle at drawing of the Gauge. See http://bl.ocks.org/hunzy/9929724 for explanation.
• Easing Duration: The duration of the animation in ms. So, 1000 is 1 second.

Interaction:

• Microflow: The microflow to execute on click