David Harwood

Changing the Styling of a Widget

Reporting Gauge Tutorial

Difficulty: BASIC

Estimated Completion Time: 5 Mins

Version 1.8+

For each widget there is a “Chart Template” property, this can be altered to change the look and feel of any widget. In this tutorial we will show you some basic styling tips to change the appearance of the Angular Gauge widget. So let’s get started. You will first need to Login to the dashboard builder to start the tutorial.

Step 1 – Add an ‘Angular Gauge’ Widget to your Dashboard

Add a Angular Guage widget to the dashboard using the new widget button in the bottom left hand corner of the dashboard builder. Open the Angular Guage widget properties menu by clicking on the spanner button in the top right hand corner of the widget.

Once you have opened the Properties menu, scroll down to find the ‘Chart Template’ field.

Step 2 – Increasing the amount of ‘segments’ on the gauge

When you first load the Angular Gauge widget there will be three different segments on the gauge, one from 0-75, one from 75-90 and one from 90-100. For this example we will create another segment, so we have four equally sized segments. To do this in the Chart Template field locate the <colourRange> tag and replace it with the following:

[snippet id=”35″]

Step 3 – Changing the colour of the gauge

In the previous step we created four segments for the gauge, in this step we will assign them different colours. The colour can be changed by changeing the ‘code’ values in the <colourRange> tag, this code is a hexadecimal code and they can be found on a range of different websites. For this example we will change the colours to light blue, slate blue, beet and maroon:

[snippet id=”36″]

Step 4 – Configuring the gauges start and end angles

By default the Angular Gauge spans 180 degrees, it is possible to change this so you can draw the gauge from virtually any start angle to any end angle. At the very top of the Chart Template field there are two parameters (gaugeStartAngle=’180′ gaugeEndAngle=’0′). These two values signify where the gauge will start and end. Below are some images which depict how the Angular guage comprehends angles:


In this example we are going to make the gauge a full circle. This can be done in a number of ways (for example setting the gaugeStartAngle to 0 and the gaugeEndAngle to 360), however for this example we will set it so the start and end point of the gauge is on the left side of the widget. By following the image as a guide, to do this we will need to set the gaugeStartAngle value to 180 and set the gaugeEndAngle to -180.

Once you are finished, scroll to the bottom of the properties and press update. You can now close this dialog. This tutorial is now done. You can now view your dashbaord and you will have a differently styled angular gauge!

For extra information, guidance and troubleshooting consult: