jQuery UI Widgets Forums Gauges and Maps Gauges Make Gauge Smaller

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Make Gauge Smaller #76922

    jorgemuyden
    Participant

    Hi there,

    How can i make my Gauge smaller?
    //My Code
    $(‘#idDiv’).jqxGauge({ style: { fill: ‘white’, stroke: ‘white’, width: ‘100’, height: ‘100’ }});

    That’s my code. But it doesn’t work. What can be the problem?

    • This topic was modified 4 years, 5 months ago by  jorgemuyden.
    Make Gauge Smaller #76954

    Dimitar
    Participant

    Hi jorgemuyden,

    As the jqxGauge API Documentation states, the width and height properties can only have numeric values, so please try setting them as follows:

    $('#idDiv').jqxGauge({
        style: {
            fill: 'white',
            stroke: 'white',
            width: 100,
            height: 100
        }
    });

    Best Regards,
    Dimitar

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

    Make Gauge Smaller #76991

    jorgemuyden
    Participant

    Hi Dimitar,

    Thank you for your reply. But what i see now is that my chartContainer gets a style with a width of 350px and a height of 350px. Why does that happens? And is there away to make the gauge responsive? I also want to use it on a mobile phone. I Am using Bootstrap. Here’s my full code:

    //Store
    $posts = $wpdb->get_results($sql);

    //Show Result

    $i=0;
    print(‘<div class=”container”><div id=”demoWidget” style=”position: relative;”><div class=”row”>’);
    foreach ($posts as $post)
    {
    $id = $post->user_id;
    $meterIdtext = ‘#gaugeContainer’.$id;
    $meterId = ‘gaugeContainer’.$id;
    $val = $post->value;
    $sqlT=”SELECT value FROM wp_bp_xprofile_data WHERE user_id=$id AND field_id=1″;
    $naam = $wpdb->get_var($sqlT);

    echo (‘<script type=”text/javascript”>’);
    echo (“$(document).ready(function () {
    var options = {
    ranges: [{ startValue: 0, endValue: 55, style: { fill: ‘#4bb648’, stroke: ‘#4bb648’ }, endWidth: 5, startWidth: 1 },
    { startValue: 55, endValue: 110, style: { fill: ‘#fbd109’, stroke: ‘#fbd109’ }, endWidth: 10, startWidth: 5 },
    { startValue: 110, endValue: 165, style: { fill: ‘#ff8000’, stroke: ‘#ff8000’ }, endWidth: 13, startWidth: 10 },
    { startValue: 165, endValue: 220, style: { fill: ‘#e02629’, stroke: ‘#e02629’ }, endWidth: 16, startWidth: 13}],
    ticksMinor: { interval: 5, size: ‘5%’ },
    ticksMajor: { interval: 10, size: ‘9%’ },
    value: 0,
    colorScheme: ‘scheme05’,
    animationDuration: 1200,

    border: {
    size: ‘20%’,
    style: {stroke: ‘#0000ff’},
    visible: false
    }};

    $(‘”.$meterIdtext.”‘).jqxGauge(options);
    $(‘”.$meterIdtext.”‘).jqxGauge({ style: {fill: ‘white’, stroke: ‘white’, width: 50, height: 50}});
    $(‘”.$meterIdtext.”‘).jqxGauge(‘value’, ‘”.$val.”‘);
    });
    </script>”);
    echo (‘<div class=”col-md-4 col-xs-12″><center><p class=”lead”>’.$naam.'</p></center><div id=”‘.$meterId.'”></div></div>’);

    $i++;
    if ($i%3 == 0) echo ‘</div><div class=”row top-buffer”>’;

    }
    print(‘</div></div></div>’);

    I’m using it on a WordPress page. The values for the Gauge meter is stored in the database it’s working perfectly but only the height and the width of the chart container. Do i have a error in my code?

    Thank you for your time 🙂
    I appreciate it.

    Make Gauge Smaller #77055

    Dimitar
    Participant

    Hi jorgemuyden,

    I am sorry, I have mislead you with my previous code snippet – width and height are not properties of the style object. Your code should be:

    var options = {
        width: 50,
        height: 50,
        ranges: [{
            startValue: 0,
            endValue: 55,
            style: {
                fill: '#4bb648',
                stroke: '#4bb648'
            },
            endWidth: 5,
            startWidth: 1
        }, {
            startValue: 55,
            endValue: 110,
            style: {
                fill: '#fbd109',
                stroke: '#fbd109'
            },
            endWidth: 10,
            startWidth: 5
        }, {
            startValue: 110,
            endValue: 165,
            style: {
                fill: '#ff8000',
                stroke: '#ff8000'
            },
            endWidth: 13,
            startWidth: 10
        }, {
            startValue: 165,
            endValue: 220,
            style: {
                fill: '#e02629',
                stroke: '#e02629'
            },
            endWidth: 16,
            startWidth: 13
        }],
        ticksMinor: {
            interval: 5,
            size: '5%'
        },
        ticksMajor: {
            interval: 10,
            size: '9%'
        },
        value: 0,
        colorScheme: 'scheme05',
        animationDuration: 1200,
    
        border: {
            size: '20%',
            style: {
                stroke: '#0000ff'
            },
            visible: false
        }
    };

    And here is a link to our jqxGauge Fluid Size demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgauge/gauge-fluid-size.htm?arctic. There is also a mobile demo with this widget. We hope these are helpful to you.

    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.