Gas gauge visualization

The sample gas gauge custom visualization has a circular arc and shows a single value that measures progress toward a target.

About this task

For more information about the gas gauge custom visualization sample on IBM Accelerator Catalog, see https://community.ibm.com/accelerators/catalog/content/Gas-gauge.

Gas gauges are a great choice if you want to:

  • Show progress toward a target.

  • Represent a percentile measure, like a key performance indicator (KPI).

  • Show the health of a single measure.

  • Display information that you can quickly scan and understand.

To view the source code and packed bundle (.zip file) for the gas gauge sample custom visualization, go to this public GitHub repository. To download the files, navigate to the root of this directory and click Clone or download.

Gas gauge visualizations are supported as of IBM® Cognos® Analytics with Watson 11.1.6

Note: This example was created for advanced custom visualization developers. It is a code sample with specific requirements and does not include all the features, interactivity, and properties of an out-of-the-box Cognos visualization. It is intended to provide a baseline for developers to extend their visualizations. If you are not an advanced visualization developer, Cognos Analytics already delivers a full set of fully-featured and powerful visualizations that are ready to use.

For more information about custom visualizations, see Developing custom visualizations. For an excellent tutorial to get you started, see Custom visualizations - tutorial.

There are two ways to use the custom visualization:
  • You can download the packed bundle (.zip file) and upload it directly into IBM Cognos Analytics with Watson.
  • You can download the source code to create your own version of it to pack and upload into Cognos Analytics.

The following steps demonstrate how to use the gas gauge visualization and populate it with data.

Procedure

  1. Create a dashboard and click the Visualization Change visualization icon icon in the toolbar.
  2. Click the Custom tab.
    If there are no custom visuals available, then you can add a custom visual by clicking the Add a custom visual Add a custom visual icon on the Custom tab.
  3. From the Custom visuals pane, select the gas gauge visualization.
  4. Upload Gas_gauge_sample_data.xlsx (https://public.dhe.ibm.com/software/data/sw-library/cognos/mobile/C11/custom_visualizations/data/Gas_gauge_sample_data.xlsx) and use it as the data source.
  5. Create the gas gauge visualization by dragging the following data items from Gas_gauge_sample_data.xlsx in the Sources pane Data icon:
    • Drag Actual value onto the Actual value field.
    • Drag Maximum value onto the Maximum axis value field.
    • Drag Target onto the Target field.
    • Drag Year onto the Repeat (column) field.
    • Drag Month onto the Repeat (row) field.
    Gas gauge custom visualization

What to do next

An explanation of the specific properties within this visualization that can be adjusted:

Property Purpose
Axis minimum value Set the minimum value of the axis.
Sweep angle Set the sweep angle of the axis.
Major ticks Sets the number of major ticks on the axis.
Minor ticks per interval Sets the number of minor ticks on the axis per interval.
Border size Sets the size of the border of the gas gauge.
Show border Shows or hides the boarder.
First arc interval start percentage Sets the percentage value of where the scale of the first arc starts.
First arc interval end percentage Sets the percentage value of where the scale of the first arc ends.
Second arc interval start percentage Sets the percentage value of where the scale of the second arc starts.
Second arc interval start percentage Sets the percentage value of where the scale of the second arc ends.
Third arc interval start percentage Sets the percentage value of where the scale of the second arc starts.
Third arc interval end percentage Sets the percentage value of where the scale of the third arc ends.
KPI label offset Sets the vertical position for the KPI label.
Value label offset Sets the vertical position for the value label.
Show major axis ticks labels Shows the major axis ticks labels.
Show pointer circle Shows the pointer circle.
Show target Shows the target.
Show KPI label Shows the KPI label.
Vertical offset Set the vertical offset of the KPI label.
Show value label Shows value label.
Vertical offset Set the vertical offset of the value label.