 Wijmo Team Member | ChrisPWright posted on June 7, 2012 at 1:52 pm  I am calling $(“#gauge”).wijradialgauge(“option”, “value”, 100) after having already initializing and drawing the gauge previously. The problem is that whenever I update the value this way, the gauge disappears from the screen and I have to call the “redraw” function in order to show the gauge with it’s new value. I am using this widget for dash boarding purposes so I need to be able to update the value and have it animate to the new values without forcing redraws. | |
 Wijmo Team Member | dail posted on June 8, 2012 at 1:30 am Could you please paste your code to me, I have check the set value option in the latest version, it works fine. Thanks. Here is a demo for gauge. | Answer |
| Wijmo Team Member | ChrisPWright posted on June 8, 2012 at 2:10 pm I set up my gauge pretty much identically to how it is done in any of the provided examples. Then if I use the $(“#gauge”).wijradialgauge(“option”, “value”, 20); call at any other point of the script seems make the widget disappear and I have to call a redraw. I am not declaring any bindings like with the knockout integration example. | Answer |
| Wijmo Team Member | dail posted on June 11, 2012 at 1:03 am Here is the code I have tested, it works fine.
$(document).ready(function () {
$("#gauge").wijradialgauge({
value: 50,
max: 100,
min: 0,
startAngle: -45,
sweepAngle: 270,
radius: "auto",
islogarithmic: false,
origin: {
x: 0.5, y: 0.5
},
tickMinor: {
position: "inside",
offset: 30,
style: {
"height": 3,
"width": 10,
fill: "#1E395B",
stroke: "#E7EFF8"
},
interval: 2,
visible: true
},
tickMajor: {
position: "inside",
offset: 27,
style: {
fill: "#1E395B",
"height": 4,
"width": 20,
stroke: "#E7EFF8",
"stroke-width": 1.5
},
interval: 10,
visible: true
},
ranges: [
{
startWidth: 2,
endWidth: 5,
startValue: 0,
endValue: 10,
startDistance: 0.6,
endDistance: 0.58,
style: {
fill: "#7BA0CC",
stroke: "#7BA0CC",
"stroke-width": 0
}
},
{
startWidth: 5,
endWidth: 20,
startValue: 10,
endValue: 125,
startDistance: 0.58,
endDistance: 0.54,
style: {
fill: "0-#B4D5F0-#B4D5F0",
stroke: "#FFFFFF",
"stroke-width": 0
}
},
{
startWidth: 20,
endWidth: 25,
startValue: 125,
endValue: 150,
startDistance: 0.54,
endDistance: 0.5,
style: {
fill: "#7BA0CC",
stroke: "#7BA0CC",
"stroke-width": 0
}
}
],
face: {
style: {
fill: "r(0.9, 0.60)#FFFFFF-#D9E3F0",
stroke: "#7BA0CC",
"stroke-width": 4
}
},
pointer: {
length: 0.8,
offset: 0,
shape: "rect",
width: 6,
style: {
fill: "#1E395B",
stroke: "#1E395B"
}
},
cap: {
radius: 10,
style: {
fill: "#1E395B",
stroke: "#1E395B"
}
}
});
});
function change() {
var val = parseInt(Math.random() * 100);
$("#gauge").wijradialgauge("option", "value", val);
}
| Answer |
You must be logged in to reply to this topic.