Creating gauges
This section describes how to create gauges with the Visualization API and qlik-visual.
Creating a basic radial gauge
In this example we create a basic radial gauge, containing one measure, with the titles switched off and a custom range
- Create the chart
Create the container for the chart. The visualization type is gauge.
Visualization API
app.visualization.create( 'gauge', [], {} )qlik-visual
<qlik-visual appid="Tutorial-Golf.qvf" type="gauge" cols='[]' options='{}' > </qlik-visual> - 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 } } } ] - 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 } - 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 } - 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.
Result
Code examples
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.
- Add color segments
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 } ] } - 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 } ] - 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.
Result
Code examples
Horizontal and vertical bars
In this example we want the gauge visualizations to be displayed as a vertical bar.
- Change the gauge type
To display the gauge as a bar, set "gaugetype": "bar" in the options.
{ "gaugetype": "bar" } - 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" }
Result
