Gauge properties

[ngchagasParticipant]

Hi,
how can I use the “options” variable for various properties and specific values ​​for other properties ?
The code below in bold.
Regards,

var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function(edata, textStatus, jqXHR) {
$(“#loading”).hide();
var records = dataAdapter.records;
var length = records.length;
for (var i = 0; i < length; i++) {
var record = records[i];
var meta = new Intl.NumberFormat(“pt-BR”).format(record.cmp3/1000000);
var realizado = new Intl.NumberFormat(“pt-BR”).format(record.cmp4/1000000);
var options = {
min: 0,
max: 160,
cap: { radius: 0.04 },
style: { stroke: ‘#ffffff’, ‘stroke-width’: ’30px’, fill: ‘#ffffff’ },
ticksMinor: { interval: 5, size: ‘5%’ },
ticksMajor: { interval: 10, size: ‘10%’ },
pointer: { style: { fill: ‘#2e79bb’ }, width: 4},
labels: { position: ‘near’, interval: 10, offset: [0, -10], distance: ‘40%’ },
animationDuration: 1500,
// border: { size: ‘15%’, style: { stroke: ‘darkblue’}, visible: true, showGradient: false },
ranges:
[
{ startValue: 0, endValue: 95, style: { fill: ‘red’, stroke: ‘red’ }, startWidth: 7, endWidth: 7 },
{ startValue: 95, endValue: 100, style: { fill: ‘yellow’, stroke: ‘yellow’ }, startWidth: 7, endWidth: 7 },
{ startValue: 100, endValue: 160, style: { fill: ‘green’, stroke: ‘green’ }, startWidth: 7, endWidth: 7 }
],
value: record.cmp2
};

if (record.cmp1 == 999) {
if (record.cmp5 == 888) {
$(‘#g999_888’).jqxGauge(options,{
caption: {value: “Empresa” + “<br>” + “Meta R$ ” + meta + ” MM<br>” + “Realizado R$ ” + realizado + ” MM<br>” + “(” + record.cmp2 + “%)”,visible: true,offset: [0, 15]},
width: 240
})
}
if (record.cmp5 == 12) {
$(‘#g999_12’).jqxGauge(options,{
caption: {value: “Construção” + “<br>” + “Meta R$ ” + meta + ” MM<br>” + “Realizado R$ ” + realizado + ” MM<br>” + “(” + record.cmp2 + “%)”,visible: true,offset: [0, 15]},
width: 200
})

}
else if (record.cmp5 == 13) {
$(‘#g999_13’).jqxGauge(options, {
width: 200,

[DimitarParticipant]

Hello ngchagas,

This is not a correct way of setting properties. You can initialize the gauge with the common properties (options) first and then set the other, specific, properties in a separate call, i.e.:

$('#g999_888').jqxGauge(options); // initialization
$('#g999_888').jqxGauge({ /* specific properties */ });

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Aman_azmatParticipant]

Could you please tell me how can I change default Ranges visible on guage. I want to set my own range like 0 10 20 ….

[DimitarParticipant]

Hello Aman_azmat,

The gauge has a ranges property. With it, you can define the ranges however you wish (example).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts