jQWidgets Forums

i trying to put 3 radial gauges in the same row but always appear in 3 rows (1 per row)
like
(***) trying
(
*
*
*)this my code
<asp:content>
<script type=”text/javascript” language=”javascript”>
$(document).ready(function () {
$(‘#gaugeContainer’).jqxGauge({
ranges: [
{ startValue: 0, endValue: 25, style: { fill: ‘#FC6A6A’, stroke: ‘#FC6A6A’ }, endWidth: 8, startWidth: 3 },
{ startValue: 25, endValue: 50, style: { fill: ‘#FCF06A’, stroke: ‘#FCF06A’ }, endWidth: 13, startWidth: 8 },
{ startValue: 50, endValue: 75, style: { fill: ‘#FCA76A’, stroke: ‘#FCA76A’ }, endWidth: 8, startWidth: 13 },
{ startValue: 75, endValue: 100, style: { fill: ‘#C9C9C9’, stroke: ‘#C9C9C9’ }, endWidth: 3, startWidth: 8}],
ticksMinor: { interval: 5, size: ‘5%’ },
ticksMajor: { interval: 10, size: ‘9%’ },
value: 0,
colorScheme: ‘scheme05’,
caption: { value: ‘Calidad’, position: ‘bottom’, offset: [0, 10], visible: true },
width: ‘20%’, height: ‘30%’, radius: ‘50%’,
animationDuration: 1200
});
$(‘#gaugeRechazados’).jqxGauge({
ranges: [
{ startValue: 0, endValue: 25, style: { fill: ‘#FC6A6A’, stroke: ‘#FC6A6A’ }, endWidth: 8, startWidth: 3 },
{ startValue: 25, endValue: 50, style: { fill: ‘#FCF06A’, stroke: ‘#FCF06A’ }, endWidth: 13, startWidth: 8 },
{ startValue: 50, endValue: 75, style: { fill: ‘#FCA76A’, stroke: ‘#FCA76A’ }, endWidth: 8, startWidth: 13 },
{ startValue: 75, endValue: 100, style: { fill: ‘#C9C9C9’, stroke: ‘#C9C9C9’ }, endWidth: 3, startWidth: 8}],
ticksMinor: { interval: 5, size: ‘5%’ },
ticksMajor: { interval: 10, size: ‘9%’ },
value: 0,
colorScheme: ‘scheme05’,
caption: { value: ‘Rechazados’, position: ‘bottom’, offset: [0, 10], visible: true },
width: ‘20%’, height: ‘30%’, radius: ‘50%’,
animationDuration: 1200
});
$(‘#gaugeRevisados’).jqxGauge({
ranges: [
{ startValue: 0, endValue: 25, style: { fill: ‘#FC6A6A’, stroke: ‘#FC6A6A’ }, endWidth: 8, startWidth: 3 },
{ startValue: 25, endValue: 50, style: { fill: ‘#FCF06A’, stroke: ‘#FCF06A’ }, endWidth: 13, startWidth: 8 },
{ startValue: 50, endValue: 75, style: { fill: ‘#FCA76A’, stroke: ‘#FCA76A’ }, endWidth: 8, startWidth: 13 },
{ startValue: 75, endValue: 100, style: { fill: ‘#C9C9C9’, stroke: ‘#C9C9C9’ }, endWidth: 3, startWidth: 8}],
ticksMinor: { interval: 5, size: ‘5%’ },
ticksMajor: { interval: 10, size: ‘9%’ },
value: 0,
colorScheme: ‘scheme05’,
caption: { value: ‘Rechazados’, position: ‘bottom’, offset: [0, 10], visible: true },
width: ‘20%’, height: ‘30%’, radius: ‘50%’,
animationDuration: 1200
});

$(‘#gaugeContainer’).jqxGauge(‘value’, 30);
$(‘#gaugeRechazados’).jqxGauge(‘value’, 90);
$(‘#gaugeRevisados’).jqxGauge(‘value’, 10);
});
function cuanto() {
debugger;
var a=document.getElementById(‘gaugeContainer’);
alert(‘mide=’ + a.width);
}
</script>
<div id=”gaugeContainer” style=”border-color:Black;width:200px;border-width:medium;” ></div> <div id=”gaugeRechazados” ></div> <div id=”gaugeRevisados” ></div>
<input id=”Button1″ type=”button” value=”button” onclick=”cuanto();” />
</asp:Content>