One of our developer user at a Bank emailed asking if there was a way to use Text labels for the Dials instead of the numeric ones?

It was a strange request as I did not see any dial implementations on a digital dashboard/scorecard where you would show Text labels instead of the 0,10,20,.. and so on.

Image

It seemed impractical but the developer had orders from the senior management and was ready to use brute force by overlapping with text labels instead of the numbers.

My question was which dashboard software is going to help you build a dial with text labels. Leaving all the argument details aside, the first step was to look into the dial class and see if there was any way to provide a text labels.

As it turns, complex things at the surface can be sometimes damn easy to implement and this one was implemented without creating any UI complexity.

How do the text labels look like?

Image

So basically the user wanted to replace all the numeric labels with text alternatives

Through some clever implementation, you can now show hybrid of both numbers and text on the dial.

Image

  • Double click the Dial chart
  • Scroll to the bottom of the definition
  • "use data labels" : "N" , change this to "Y"
  • In the row above, "data_labels", provide a list of text labels
  • If you provide a null/empty value like "" then the corresponding number value will be displayed.

This simple enhancement adds some super coolness to the Gauge chart but don't include it if your Dashboard software or the platform on which you will build the real dashboard does not support it.

Related posts:

  1. How to mockup dials, speedometer, gauges for Dashboards
  2. How to add Icons inside any Text component
  3. Mockups
  4. How to use text widgets in Wireframes
  5. How to add colors to your mockup Charts and Dashboards

Posted in Tutorials