jqxGauge control help

1

Help…
Trying to set up ranges on a jqxGauge control, but… I don’t know how to convert this to Basic. I am not a JS guy, all my attempts have failed. How can I do it? lines below came from the control docs.

$('#gaugeContainer').jqxGauge({
    ranges: [{ startValue: 0, endValue: 55, style: { fill: '#C9C9C9', stroke: '#C9C9C9' }, endWidth: 5, startWidth: 1 },
                { startValue: 55, endValue: 110, style: { fill: '#FCF06A', stroke: '#FCF06A' }, endWidth: 10, startWidth: 5 },
                { startValue: 110, endValue: 165, style: { fill: '#FCA76A', stroke: '#FCA76A' }, endWidth: 15, startWidth: 10 },
                { startValue: 165, endValue: 220, style: { fill: '#FC6A6A', stroke: '#FC6A6A' }, endWidth: 20, startWidth: 15}],
    ticksMinor: { interval: 5, size: '5%' },
    ticksMajor: { interval: 10, size: '9%' },
    value: 0,
    colorScheme: 'scheme03',
    animationDuration: 1200
});
2

you can also use Java Script in NS Basic. Just put at the begining of your block code

Javascript

And at the end

End JavaScript

3

Gonzo_Moco is correct - here is how the resulting code should look:

JavaScript
$('#gaugeContainer').jqxGauge({
    ranges: [{ startValue: 0, endValue: 55, style: { fill: '#C9C9C9', stroke: '#C9C9C9' }, endWidth: 5, startWidth: 1 },
                { startValue: 55, endValue: 110, style: { fill: '#FCF06A', stroke: '#FCF06A' }, endWidth: 10, startWidth: 5 },
                { startValue: 110, endValue: 165, style: { fill: '#FCA76A', stroke: '#FCA76A' }, endWidth: 15, startWidth: 10 },
                { startValue: 165, endValue: 220, style: { fill: '#FC6A6A', stroke: '#FC6A6A' }, endWidth: 20, startWidth: 15}],
    ticksMinor: { interval: 5, size: '5%' },
    ticksMajor: { interval: 10, size: '9%' },
    value: 0,
    colorScheme: 'scheme03',
    animationDuration: 1200
});
End JavaScript
4

Don’t know if this will help but this is my gauge code…

Function Form1_onshow()

'Cast Speed Gauge...
 $("#CastSpd").jqxGauge({ startAngle: 40, endAngle: 300 })
 $("#CastSpd").jqxGauge("max", 8)
 $("#CastSpd").jqxGauge({ labels: { position: "inside" }})
 $("#CastSpd").jqxGauge({ ticksDistance: "2px" })
 $("#CastSpd").jqxGauge({ labels:  { distance: "25px", interval: 1, position: "none", offset: [0, -10] }}) 
 $("#CastSpd").jqxGauge({ border: { showGradient: True, size: "10%", style: { fill: "#0A1CF5",stroke: "#F4F5FF"}, visible: True }})
 $("#CastSpd").jqxGauge({ style: { fill: "#E7E9FE", stroke: "#E7E9FE" }})
 $("#CastSpd").jqxGauge({ pointer: { pointerType: "default", style: { fill: "#ff0000", stroke: "#ff0000" }, length: "90%", width: "10%", visible: True }})
 $("#CastSpd").jqxGauge({ cap: { size: "10%", style: { fill: "#ff0000", stroke: "#00ff00" } , visible: True }})
 $("#CastSpd").jqxGauge({ ticksMinor: { size: "10%", interval: .5, style: { stroke: "#0A1CF5", "stroke-width": 1 }, visible: True }})  
 $("#CastSpd").jqxGauge({ ticksMajor: { size: "20%", interval: 1, style: { stroke: "#0A1CF5", "stroke-width": 2 }, visible: True }})  
 '$("#CastSpd").jqxGauge({ caption: { value: "2.2", position: "bottom", offset: [0, 5], visible: True }})
 '$("#CastSpd").jqxGauge("value", 2.2)

'Water Flow Gauge...
 $("#WaterFlow").jqxGauge({ startAngle: 40, endAngle: 300 })
 $("#WaterFlow").jqxGauge("max", 800)
 $("#WaterFlow").jqxGauge({ labels: { position: "inside" }})
 $("#WaterFlow").jqxGauge({ ticksDistance: "2px" })
 $("#WaterFlow").jqxGauge({ labels:  { distance: "25px", interval: 100, position: "none", offset: [0, -10] }}) 
 $("#WaterFlow").jqxGauge({ border: { showGradient: True, size: "10%", style: { fill: "#0A1CF5",stroke: "#F4F5FF"}, visible: True }})
 $("#WaterFlow").jqxGauge({ style: { fill: "#E7E9FE", stroke: "#E7E9FE" }})
 $("#WaterFlow").jqxGauge({ pointer: { pointerType: "default", style: { fill: "#ff0000", stroke: "#ff0000" }, length: "90%", width: "10%", visible: True }})
 $("#WaterFlow").jqxGauge({ cap: { size: "10%", style: { fill: "#ff0000", stroke: "#00ff00" } , visible: True }})
 $("#WaterFlow").jqxGauge({ ticksMinor: { size: "10%", interval: 50, style: { stroke: "#0A1CF5", "stroke-width": 1 }, visible: True }})  
 $("#WaterFlow").jqxGauge({ ticksMajor: { size: "20%", interval: 100, style: { stroke: "#0A1CF5", "stroke-width": 2 }, visible: True }})  
 '$("#WaterFlow").jqxGauge({ caption: { value: "550", position: "bottom", offset: [0, 5], visible: True }})
 '$("#WaterFlow").jqxGauge("value", 550)

and code goes on…

Then I call Ajax to get values from server…

 req=Ajax("getdata.php",done)

Then on Ajax done, I display values…

 $("#CastSpd").jqxGauge({ caption: { value: sValues(26), position: "bottom", offset: [0, 5], visible: True }})
 $("#CastSpd").jqxGauge("value", CSng(sValues(26)))

 $("#WaterFlow").jqxGauge({ caption: { value: sValues(27), position: "bottom", offset: [0, 5], visible: True }})
 $("#WaterFlow").jqxGauge("value", CSng(sValues(27)))

Rodney

5

Thanks for the help guys!