Need to create an amps gauge

[Steve2106Participant]

Hi There,

I need to create an amps gauge which goes from -30 to +30
Is there a way to create a semi-circular gauge? or does it have to be a full circle?

I do not have a clue how to go about this so your help would be really appreciated.

Best Regards,

Steve.

[ivailoParticipant]

Hi Steve,

Please, refer to the following amp gauge demo.
The gauge can be only circular, but you can wrap it into a container with smaller height and overflow hidden.
Via this workaround the gauge will look as a semi-circular.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[Steve2106Participant]

Hi Ivalio,
Thanks for the reply.

That is very close to what I need.
Is there a way to add a caption? on my other gauges I have:
caption: { offset: [0, 10], value: ‘Runner Bearing L (ºC)’, position: ‘bottom’ },
But it does not show on the amps gauge. Must be something to do with making it a half gauge and it’s being hidden.

I really appreciate the help.

Best Regards,

Steve.

[ivailoParticipant]

Hi Steve,

Yes, with these settings the caption is positioned into the hidden part of the gauge.
Please, try with these settings :
caption: { offset: [0, -70], value: 'Runner Bearing L (ºC)', position: 'bottom' },
and 200px about container’s height.

Here is the new gauge demo.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[Steve2106Participant]

Hi Ivailo,

Looks good.
Thanks I’ll have a play.

Best Regards,

Steve.

[Steve2106Participant]

Hi There,

Is there anyway of scaling down the gauge and colouring the pointer as I need it to blend in with my other gauges.

View gauges here: http://www.dotnet4site.com/miscimages/4JQWidgets.jpg

Thanks for the help.

Best Regards,

Steve.

[ivailoParticipant]

Hi Steve,

If you want to change pointer’s settings you have to set pointer and cap properties.
For example:

pointer: { style: { fill: '#ff0000' }, width: 5 },
cap: { size: '5%', style: { fill: '#ff0000', stroke: '#ff0000' } , visible: true },

If you want to change the gauge’s dimensions you can do it via width, height and radius properties.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[Steve2106Participant]

Hi Ivailo,

That’s perfect, Thank you.

It’s looking good now

Best Regards,

Steve.

[Author]

Posts