Create a gauge with a scale containing different colors for specific ranges

Technote (FAQ)


Question

How to create a gauge with a scale containing different colors for specific ranges?

Answer

You need to create a custom gauge with multiple tracks then set a color for each track.
Through the IBM ILOG Gauge Wizard for Flash Builder or Eclipse, you can create this custom gauge. To launch the wizard, choose "File -> New -> Other -> IBM ILOG Elixir -> IBM ILOG Elixir Gauge". After launching the wizard, name and select the type of your gauge then click the "Next >" button. In the "Tracks and Markers" box, add a track for each color that you want to display on the scale by clicking the "Add Track" button. To define the range of the track, specify the "Start" and "End" property values. For example, if you specify the first track with a start value of 0 and end value of 20, this will define a range from 0 to 20 on the scale. Click the "Finish" button to create your gauge. For more details on the Gauge Wizard, please refer to the documentation under the section "Developing with IBM ILOG Elixir components > Gauges and indicators > Gauges > Building custom gauges with the Eclipse gauge wizard".

After creating your gauge, modify its skin file to specify the color for each track. In the skin file, modify the "fill" property of either the "Group" or "DonutSlice" to use a solid color to specify the track color. A track will use a "Group" for a horizontal or vertical gauge, while a "DonutSlice" will be used for a circular gauge. To identify the track, it will have an id with the track name followed by "_part_id".


A track for a horizontal or vertical gauge:


<s:Group id="track1_part_id">
     <s:Rect top="14" left="0" right="0" height="10">
          <s:fill>
               <s:SolidColor color="green" alpha=".7"/>
          </s:fill>
     </s:Rect>
</s:Group>


A track for a circular gauge:


<ibm:DonutSlice id="track1_part_id" width="88" height="88" horizontalCenter="0" verticalCenter="0" startThickness="5" endThickness="5" radius="43" mouseEnabled="false">
     <ibm:fill>
          <s:SolidColor color="green" alpha=".7"/>
     </ibm:fill>
</ibm:DonutSlice>


Here is a sample of a custom circular gauge with four tracks created by the Gauge Wizard where each track has its own color:

CustomCircularGauge_Skin.zip


In your .mxml application file, you can specify the custom gauge like this:


<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:ibm="http://www.ibm.com/xmlns/prod/ilog/elixir/2010" xmlns:gauges="gauges.*">
     <fx:Declarations>
         <!-- Place non-visual elements (e.g., services, value objects) here -->
     </fx:Declarations>
     <gauges:CustomCircularGauge x="0" y="0" skinClass="gauges.CustomCircularGauge_Skin" width="300" height="300"/>
</s:Application>


Cross reference information
Segment Product Component Platform Version Edition
Business Integration IBM ILOG Elixir Capability Linux, Mac OS X, Windows 3.0 All Editions

Rate this page:

(0 users)Average rating

Add comments

Document information


More support for:

IBM ILOG Elixir Enterprise
Capability

Software version:

3.5

Operating system(s):

Linux, Mac OS, Windows

Reference #:

1470755

Modified date:

2011-08-29

Translate my page

Machine Translation

Content navigation