Fill vertical upwards

[carloParticipant]

Hi Peter,

is it possible to make the vertical progress bar filling upwards instead of downwards ? If not, can you tell me how we can make the jqxGauge pointer fill the whole cotaining div ? We want to display a colored rectangle which height depends on a value in realtime.

Best Regards,
Karlheinz Rafalski

[DimitarParticipant]

Hello Karlheinz Rafalski,

It is not possible to fill jqxProgressbar upwards. As for making jqxGauge’s pointer bigger, you may change the pointer property to:

pointer: { size: '100%', offset: -47 }

and then make the ticks, labels, ranges and background invisible as shown in this demo.

Best Regards,
Dimitar

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

[carloParticipant]

Hello Dimitar,

here you can see a gauge with a scale. The scale is very far from the left side. How can we move the scale to the left and make the pointer wider ?

 <img src="http://85.214.211.237/jqw/gauge.jpg" alt="" /> 

Best Regards,
Karlheinz Rafalski

[DimitarParticipant]

Hi Karlheinz Rafalski,

Have you tried the code snippet I posted? The offset property, if it is with a negative value, offsets the pointer to the left. Experiment with the value to find the one that suits you.

Best Regards,
Dimitar

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

[carloParticipant]

Hi Dimitar,

I tried setting the offset: ‘-150’. The pointer is increasing to the left. But how to move the scale to the left, so that its on the left side of the pointer and not in the middle ?

Best Regards,
Karlheinz

[DimitarParticipant]

Hi Karlheinz,

As you can see in the demo, you can also set labels and ticks position.

Best Regards,
Dimitar

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

[carloParticipant]

Hi Dimitar,

here the links to the demo: http://85.214.211.237/jqw/gaugetest.html

And here the source:

			var w = $('#gauge').css('width');
			var h = $('#gauge').css('height');	
			$('#gauge').jqxLinearGauge({
				animationDuration: 300,
				orientation: 'vertical',
				width: w,
				height: h,
				min: 0,
				max: 4,
				value: 2.5,
				showRanges: false,
				ticksPosition: 'near',			
				ticksMajor: { visible: true, interval: 1, size: '8%' },
				ticksMinor: { visible: true, interval: 0.5, size: '4%' },
				labels: { visible: true, interval: 1, position: 'near' },
				pointer: { size: '100%', offset: '-150', style:{ fill: "blue"} }
			});

The scale and ticks are still in the middle, although I specified ‘near’ as the labels and ticks position.

Best Regards,
Karlheinz

[DimitarParticipant]

Hi Karlheinz,

Unfortunately, jqxLinearGauge is not capable of showing ticks outside the actual widget.

Best Regards,
Dimitar

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

[carloParticipant]

Hi Dimitar,

so this is basic guage is really not possible:

Best Regards
Karlheinz

[DimitarParticipant]

Hi Karlheinz,

If you do not set the offset property to pointer you get a gauge that looks identical to the one you have shown. You can also make the body invisible as shown in the Linear Gauge Settings demo.

All the features available to jQWidgets are showcased in the Demo section of the website.

Best Regards,
Dimitar

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

[carloParticipant]

Hi Dimitri,

here is the gauge according to your advices:

The yellow colored part is the div containing the gauge. As you can see there is much yellow room on the left side. How can I move the gauge to the left side of the containing div ?

Best Regards,
Karlheinz

[DimitarParticipant]

Hi Karlheinz,

This is all that can be done on the matter. The scale cannot go to the left or right side of the widget body.

Best Regards,
Dimitar

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

[carloParticipant]

Hi Dimitri,

I do not want the scale to be outside the DIV but be positioned at the left edge of the DIV. I think the widget is using the whole div for drawing. So why can’t the scale be more left ?

Best Regards,
Karlheinz

[DimitarParticipant]

Hi Karlheinz,

This was all we could offer as help on this matter. By design, the scale appears in the centre of the widget.

Best Regards,
Dimitar

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

[carloParticipant]

Hi Dimitrit,

thank you for your explanations. So I have a feature request:

Feature: An option to position the scale at the left edge of the DIV.
Reason: I think thats the natural postion of a gauge scale, and not somewhere in the middle of the DIV.

Best Regards,
Karlheinz

[Author]

Posts