InsideSales.com
InsideSales.com
InsideSales.com Menu

How to Build Gauge Components

Highlights

Component Gauge
Overview Use a variety of gauge styles to show progress towards a goal.
Key Features Customize the gauge using a variety of styles
Apply indicators to the Gauge
Apply multiple color ranges to the Gauge

Overview

The Gauge component allows you to compare a current value against a target value using a variety of styles, such as arc, semicircle, vertical, and horizontal gauges. You can use indicators to show when the current value has surpassed a threshold (or is not reaching a goal), or use color ranges to indicate a wider range of states (eg: cold, warm, hot).

Component Structure

This is an example of the structure of a Gauge component with a color range added (an optional component).

Tip! Add color ranges to the Gauge by using the buttons beside the Widget preview.

Key Features

This section provides examples of different ways to use the Gauge component.

Custom Style

You can customize the gauge style using the following options: horizontal, vertical, arc, semicircle, circle. Here is an example of a gauge using the Vertical style:

To change the gauge style

  1. Select the Gauge component from the tree.
  2. Use the Gauge Style menu to select an appropriate style.

Apply indicators

You can apply indicators to your gauge so that the colour of the gauge will change when the Current Value is in a specific state. This feature differs from the color range feature (below), in that the color shown with indicators depends on the threshold you have set, whereas the color(s) shown using color ranges will always appear on the gauge.

To apply indicators

  1. Select the Gauge component from the tree.
  2. Open the Indicators panel.
  3. Set up a predicate (eg: If x is greater than 1).
  4. Set up a reaction (eg: then change colour to green).
  5. Add multiple conditions to apply indicators for values in a variety of states.

Note: You can also apply indicators to the Current Value and Target Value components to change the color or display icon associated with those values.

Apply color ranges

You can apply color ranges to your gauge so that as your “needle” passes through certain ranges, you can assess what state it is in. In the example below, color ranges are used to indicate what occupancy rate is acceptable, and which is unacceptable.

To apply color ranges

  1. Click the + Range button beside the Widget preview.
  2. Select the Range 1 component from the tree.
  3. Use the Range Color menu to select an appropriate color for this range.
  4. Select the Start 1 component from the tree.
  5. Use the Data panel to enter an appropriate start value.
  6. Select the End 1 component from the tree.
  7. Use the Data panel to enter an appropriate end value.


Learn more

Now that you know a bit about the Gauge component, check out this tutorial:


Gauge component Source Code

You can use this Source Code to create multi-component Widget

 {
         "type": "gauge",
         "displayName": "Gauge",
         "size": 2,
         "fmtArgs": {},
         "vis": true,
         "components": [
            {
               "type": "label",
               "displayName": "Current Value",
               "size": 3,
               "fmt": "num",
               "fmtArgs": {
                  "reactionColour": "",
                  "iconDisplayed": false
               },
               "role": "current",
               "vis": true,
               "formulas": [
                  {
                     "txt": "50",
                     "src": {
                        "t": "expr",
                        "v": false,
                        "c": [
                           {
                              "t": "l",
                              "v": "50"
                           }
                        ]
                     }
                  }
               ],
               "data": [
                  [
                     50
                  ]
               ],
               "show_value": true,
               "font_style": "bold",
               "font_colour": "cx-color_444"
            },
            {
               "type": "label",
               "displayName": "Target Value",
               "size": 2,
               "fmt": "num",
               "fmtArgs": {
                  "reactionColour": "",
                  "iconDisplayed": false
               },
               "role": "target",
               "vis": true,
               "formulas": [
                  {
                     "txt": "80",
                     "src": {
                        "t": "expr",
                        "v": false,
                        "c": [
                           {
                              "t": "l",
                              "v": "80"
                           }
                        ]
                     }
                  }
               ],
               "data": [
                  [
                     80
                  ]
               ],
               "show_value": true,
               "font_style": "bold",
               "font_colour": "cx-color_888"
            },
            {
               "type": "label",
               "displayName": "Min Value",
               "size": 1,
               "fmt": "num",
               "fmtArgs": {
                  "reactionColour": "",
                  "iconDisplayed": false
               },
               "role": "min",
               "vis": true,
               "formulas": [
                  {
                     "txt": "0",
                     "src": {
                        "t": "expr",
                        "v": false,
                        "c": [
                           {
                              "t": "l",
                              "v": "0"
                           }
                        ]
                     }
                  }
               ],
               "data": [
                  [
                     0
                  ]
               ],
               "show_value": true,
               "font_style": "regular",
               "font_colour": "cx-color_888"
            },
            {
               "type": "label",
               "displayName": "Max Value",
               "size": 1,
               "fmt": "num",
               "fmtArgs": {
                  "reactionColour": "",
                  "iconDisplayed": false
               },
               "role": "max",
               "vis": true,
               "formulas": [
                  {
                     "txt": "100",
                     "src": {
                        "t": "expr",
                        "v": false,
                        "c": [
                           {
                              "t": "l",
                              "v": "100"
                           }
                        ]
                     }
                  }
               ],
               "data": [
                  [
                     100
                  ]
               ],
               "show_value": true,
               "font_style": "regular",
               "font_colour": "cx-color_888"
            }
         ],
         "gaugeStyle": "hg"
      }

Release Notes

Find our most recent release notes.

Forum

Our InsideSales.com community forum is coming soon.

Advanced Training Guides

Advanced training for the PowerDialer for Salesforce.

Have questions?

We're happy to help. An InsideSales.com expert is just a phone call away.

(866) 593-2807

Mon-Fri 6-7 MST

Back To Top

© 2004–2014 InsideSales.com, Inc. all rights reserved. Use of the InsideSales.com service and this Web site constitutes acceptance of our Terms of Use and Privacy Policy. InsideSales.com technology is protected by the following United States Patents: 8078605, 8325738, 8352389, 8510382, 8566419.