Make Gauge Smaller

[jorgemuydenParticipant]

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?

[DimitarParticipant]

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/

[jorgemuydenParticipant]

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.

[DimitarParticipant]

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/

[Author]

Posts