Changing the Millions\Thousands label on the Guage Element

3 posts / 0 new
Last post
tp5harp
Changing the Millions\Thousands label on the Guage Element

Hi All,

I have added a gauge to a Dashboard, which on most screens look fine.

Gauge

Gauge2

However when opening the dashboard up from within SuperOffice on smaller screens the Millions\Thousands label covers the numbers around the gauge.  I have been asked if this label can be re-positioned in any way.  May be with CSS or something.

Many thanks,

Trevor

Terje
Terje's picture
Move the gauge title

Hi

You can't move it using CSS, but you can move it using Javascript.

Follow these steps:

1) Right-click on the gauge and select "Edit elementcontainer". Go to the "Advanced" tab. There you see the element name. Find the part that sais "elContainer_" and remember the number in the end of the line. This is the unique id of the dashboard element.
In my example it is "elContainer_6".

Close the dialog.

2) Right-click on any dashboard element and select "Edit dashboard properites". Go to the "Advanced tab". Here you'll find three text boxes. In the textbox labeled "Script (JS) included in page header" put the following Javascript code:

$("body").on("dataElementRendered","#elContainer_6", function(evt,elRes){
 var container = $(this);
 container.find(".highcharts-yaxis-title").attr("y","150");
});

Change "#elContainer_6" with the ID of your container from step 1.
Then you can change the Y attribute (here 150) to move the title up or down. Greater number moves it downwards. 

You shold now be able to position the title where you want.

 

If you need to change the font size or the color, add this line in the CSS text box in the dashboard properties dialog:

.highcharts-yaxis-title { fill: red !important; font-size:2em;}

This will affect ALL gauges on that dashboard that displays the title. If you need to control just one spesific title, add your own unique class to the CSS code and in the element container dialog.

Example:

.gaugeTitle .highcharts-yaxis-title { fill: red !important; font-size:2em;}

Right-click the spesific gauge and select "Edit elementcontainer". In the field labeled "CSS class" add "gaugeTitle" (without the . ). Now only that gauge should be affected by the CSS.

 

This was a long answer, but I hope you got what you needed :)

 

tp5harp
Brilliant, thanks for this. 

Brilliant, thanks for this.  I will give this a go.

Trevor

Log in or register to post comments