Creating gauges

This section describes how to create gauges with the Visualization API and qlik-visual.

In this example we create a basic radial gauge, containing one measure, with the titles switched off and a custom range

1. Create the chart

Create the container for the chart. The visualization type is gauge.

``````app.visualization.create(
'gauge',
[],
{}
)``````
``````<qlik-visual appid="Tutorial-Golf.qvf"
type="gauge"
cols='[]'
options='{}' >
</qlik-visual>``````
2. Define measure

Define the measure as a column. Note that the value of the measure is to be displayed in per cent.

Information noteIn a gauge you can only have one measure and no dimensions.
[ { "qDef": { "qFieldDefs": [ "=NetScoreName" ], "qFieldLabels": [ "Net result" ] }, "qNullSuppression": true }, { "qDef": { "qLabel": "Occurancies", "qDef": "Count(HoID)", "qNumFormat": { "qType": "F", "qnDec": 2, "qUseThou": 0 } } } ]
3. Disable the title in the options

Since the label of the measure by default is visible in the gauge visualization, we can switch off the titles.

{ "showTitles": false }
4. Set the range limit

Set a maximum range limit value of the measure to be equal to 100 per cent, that is "max": 1.

"measureAxis": { "min": 0, "max": 1 }
5. Define the gauge type

Since radial gauges are the default gauge type, "gaugetype": "radial" can be omitted from the definition but we are keeping it in this example.

Presentation and color settings

In this example we change the way the gauge is presented by adding gradient color segments and reducing the arc size. All these changes are set in the options.

Enable the usage of segments: "useSegments": true. Changes to the color segments are then set in the segmentInfo object.

In this example, we want to split the gauge into three color segments: 0 - 0.25, 0.25 - 0.5, and 0.5 - 1.

To achieve this, first set the measure axis value range.

"measureAxis": { "min": 0, "max": 1 }

Then add two segment limits to split the range into three segments. Note that the color segments are defined to be gradient.

"segmentInfo": { "limits": [ { "value": 0.25, "gradient": true }, { "value": 0.5, "gradient": true } ] }
2. Define the colors for the segments

Define the colors to be used for the three segments by adding a paletteColors object inside the segmentInfo object. Add a color for the first segment, that is values between measure axis minimum and the first segment limit. Then add a color for the second segment, that is values between the first and the second limit. Finally, add a color for the third segment, that is values between the second segment limit and the measure axis maximum.

"paletteColors": [ /*color for the first segment*/ { "color": "#ff7373", "index": -1 }, /*color for the second segment*/ { "color": "#fab761", "index": -1 }, /*color for the third segment*/ { "color": "#91c26a", "index": -1 } ]
3. Set the arc size

The arc size of radial gauges can be changed by setting the angle property. All gauges created with Qlik Sense by default sets "angle": 0.7 which means that 70 per cent of the arc is displayed. In this example, set "angle": 0.5, to display half of the arc.

Horizontal and vertical bars

In this example we want the gauge visualizations to be displayed as a vertical bar.

1. Change the gauge type

To display the gauge as a bar, set "gaugetype": "bar" in the options.

{ "gaugetype": "bar" }
2. Set vertical orientation

Bars are by default presented with horizontal orientation. In this example we want to set vertical orientation. First disable auto orientation: "autoOrientation": false and then set "orientation": "vertical".

{ "gaugetype": "bar", "autoOrientation": false, "orientation": "vertical" }