Acuity Brands Logo      DGLogik is now part of Acuity Brands, Inc.   Learn More >>

Creating Custom Gauges

Custom Gauges in DGLux5

In DGLux5, creating a custom gauge is as easy as grouping some components, editing some properties, and dragging and dropping a data point. In the video below, we take things a little further by making our gauge into a reusable symbol—and still, the process takes only a few minutes.

Video

There are as many ways to make gauges as there are DGLux5 users, and we hope this video will spark some inspiration for your dashboards.

The basics

Here are a few gauge basics that we mention in the video. Check out the wiki page for a step-by-step tutorial.

  • For a two-tone track, add two track components. Make one a “background” color and one a “filled” color.
    DGLux5 gauge
  • To make a gauge that reflects real-time data, drag a data point from the Metrics panel or Dataflow to the gauge properties. 
    DGLux5 gauge
  • Use text components to display a title and a value readout. Remember to include units of measure—the binding dialog can help with that.
    DGLux5 gauge
  • With gauges, the Scale dataflow block is your best friend. This block takes a number from one range (like 0 to 100 for a percentage figure) and translates it to the proportionate number in a new range (like −90 to 90 for the angle of rotation on a semicircular gauge).
    DGLux5 gauge
  • To change the length of a track, bind scaled data to the End Angle of the track.
    DGLux5 gauge
  • To change the rotation of a needle, bind scaled data to the Rotation property of the needle. (Be sure to use the Transform tool to move the needle’s anchor point to the gauge center!)
    DGLux5 gauge

More ideas

  • To make your dashboard even more responsive, use Horizontal layout for the Stage or parent group, and set the Flex-Shrink property of the symbol instances to 1.
    DGLux5 gauge
  • A gauge doesn’t need to be a circle or an arc! To create a linear gauge, set the Scale Type property of your gauge scale components to Linear. You could also try using rectangles with a variable width.
    DGLux5 gauge
  • Do you want the properties of your gauge to change according to the value? No problem. Just hold Control to open the binding dialog when you drag and drop values on the visual properties. You might also want to make use of If and Case blocks in the dataflow.
    DGLux5 gauge

Join the conversation

What are your custom gauge ideas? Brainstorm with other DGLux5 designers in the community forum, or share your thoughts in the comments.

Contact Us        Blog