i'm using knob jQuery to create an interactive knob, that, allowing sunstantial to see how much energy is consuming its power grid
this is the code that generate the knob
$(function(){
$(".dial").knob({
'min':0,
'max':5000,
'readOnly': true,
'width': 120,
'height': 120,
'float' : 'left',
'fgColor': '#b9e672',
'dynamicDraw': true,
'thickness': 0.2,
'tickColorizeValues': true,
'skin':'tron'
})
// body...
});
and this is the input:
<input id='knobinput' type='text' value='75' class='dial'>
I would like to make sure that if the knob is less than 1500 is green, if between 1500 and 3000 yellow and red if above 3000.
how can I do this?
thanks
Try this:
var $dial = $('.dial');
var dialColour = '#C00';
if ($dial.val() < 3000) {
dialColour = '#CC0';
}
else if ($dial.val() < 1500) {
dialColour = '#0C0';
}
$dial.knob({
'min':0,
'max':5000,
'readOnly': true,
'width': 120,
'height': 120,
'float' : 'left',
'fgColor': dialColour,
'dynamicDraw': true,
'thickness': 0.2,
'tickColorizeValues': true,
'skin':'tron'
})