Archived Forum

I couldn't work out where to post this is the wiki, so I thought I'd add it here for discussion.  

I wanted to modify the temperature dial display but with more options in terms of colour gradient, but without breaking the others.

To achieve this you need to modify dial.js in Views/dashboard/js/widgets/

As always make sure you take a backup of the file before you change anything :-)

Looking at the top of the file you can see where the colours for the dial are stored.

e.g.

else if (type == 9)  //temperature dial blue-red,first segment blue should mean below freezing C
    {
      offset = 0;
      segment = ["#e94937","#da4130","#c43626","#ad2b1c","#992113","#86170a"];
    }

Scroll down this file until you see  the line  (Currently line 81 on github):

 var width = 0.785;

 Add // to the front of this line and add the line 

var width= 4.712385/(segment.length) ;

so it should look like:

//var width = 0.785;

var width= 4.712385/(segment.length) ;

So what does this line do?

The arcs are drawn in terms of radians.  
If you look at the normal dial display the background colours occupy 270 degrees. 270 degrees equates to 4.712385 radians. So this line counts the number of colours in the chosen dials segment variable and defines the arc in radians for each colour.

This allows you to modify the colours in the dial you want, but still works for the others that are already defined.