Skip to main content Skip to complementary content
Qlik Resources

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

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

Result

Example gauge object

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.

  1. 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 } ] }
  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.

Result

Example gauge object with color gradient settings

Code examples

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" }

Result

Example gauge object with vertical orientation

Code examples

Did this page help you?

If you find any issues with this page or its content – a typo, a missing step, or a technical error – let us know how we can improve!

Leave your feedback here