jQuery UI Widgets Forums Gauges and Maps Gauges Need to create an amps gauge

This topic contains 7 replies, has 2 voices, and was last updated by  Steve2106 4 years, 4 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • Need to create an amps gauge #89683

    Steve2106
    Participant

    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.

    Need to create an amps gauge #89686

    ivailo
    Participant

    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

    Need to create an amps gauge #89705

    Steve2106
    Participant

    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.

    Need to create an amps gauge #89745

    ivailo
    Participant

    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

    Need to create an amps gauge #90027

    Steve2106
    Participant

    Hi Ivailo,

    Looks good.
    Thanks I’ll have a play.

    Best Regards,

    Steve.

    Need to create an amps gauge #90028

    Steve2106
    Participant

    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.

    Need to create an amps gauge #90054

    ivailo
    Participant

    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

    Need to create an amps gauge #90065

    Steve2106
    Participant

    Hi Ivailo,

    That’s perfect, Thank you.

    It’s looking good now

    Best Regards,

    Steve.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.