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