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

[Author]

Posts