jQuery UI Widgets Forums Gauges and Maps Gauges Gauge properties

This topic contains 3 replies, has 3 voices, and was last updated by  Dimitar 4 years, 10 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Gauge properties #61400

    ngchagas
    Participant

    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,

    Gauge properties #61409

    Dimitar
    Participant

    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/

    Gauge properties #72326

    Aman_azmat
    Participant

    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 ….

    Gauge properties #72338

    Dimitar
    Participant

    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/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.