[tombeechMember]

Hey,
I gave that a go on one of the demo but it didn’t work. Here’s what I had:

In the following demo you can see how you can cuztomize the appearance of the jqxGauge's ranges.

#gaugeValue {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fefefe), color-stop(100%, #f3f3f3));
background-image: -webkit-linear-gradient(#fefefe, #f3f3f3);
background-image: -moz-linear-gradient(#fefefe, #f3f3f3);
background-image: -o-linear-gradient(#fefefe, #f3f3f3);
background-image: -ms-linear-gradient(#fefefe, #f3f3f3);
background-image: linear-gradient(#fefefe, #f3f3f3);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
padding: 10px;
}

$(document).ready(function () {
$('#gaugeContainer').jqxGauge({
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,
width: '100%',
height: '100%',
colorScheme: 'scheme05',
animationDuration: 1200
});

$('#gaugeContainer').bind('valueChanging', function (e) {
$('#gaugeValue').text(Math.round(e.args.value) + ' kph');
});

$('#gaugeContainer').jqxGauge('value', 140);
});

[tombeechMember]

Thanks for the speedy reply.

Is it something you’re looking to implement soon?

[Author]

Posts