D3 Gauge

Content Type: Widget
Categories: User Interface

Overview

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

Documentation

D3Gauge

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 sopported 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

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

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: #089F50 Sections 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

Releases

Version: 1.4.0
Framework Version: 8.2.2
Release Notes: - Upgraded to Mendix 8 - Upgraded to D3 V4.13.0 (non-minified)
Version: 1.3.0
Framework Version: 7.5.0
Release Notes: * New Feature: Added Gradient Coloring as option; * Bugfix: Do not hide domNode anymore. In case of listview with DS MF update function was called twice, once not having a context object, hence hiding the domNode.
Version: 1.2.1
Framework Version: 7.5.0
Release Notes: Fix for non-zero minimum value of gauge
Version: 1.2.0
Framework Version: 7.5.0
Release Notes: Upgrade to Mendix 7. Fixed deprecation on store.caller in mx.data.action. Changed to origin: Fix for subscriptions trigger double creation of chart. Stripped Chart Title setting.