jQuery UI Widgets Forums Editors ProgressBar Fill vertical upwards

This topic contains 15 replies, has 2 voices, and was last updated by  Dimitar 6 years, 11 months ago.

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
  • Fill vertical upwards #8984

    carlo
    Participant

    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

    Fill vertical upwards #8986

    Dimitar
    Participant

    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/

    Fill vertical upwards #8988

    carlo
    Participant

    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

    Fill vertical upwards #8991

    Dimitar
    Participant

    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/

    Fill vertical upwards #8992

    carlo
    Participant

    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

    Fill vertical upwards #8993

    Dimitar
    Participant

    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/

    Fill vertical upwards #8994

    carlo
    Participant

    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

    Fill vertical upwards #9027

    Dimitar
    Participant

    Hi Karlheinz,

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

    Best Regards,
    Dimitar

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

    Fill vertical upwards #9028

    carlo
    Participant

    Hi Dimitar,

    so this is basic guage is really not possible:

    Best Regards
    Karlheinz

    Fill vertical upwards #9030

    Dimitar
    Participant

    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/

    Fill vertical upwards #9032

    carlo
    Participant

    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

    Fill vertical upwards #9033

    Dimitar
    Participant

    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/

    Fill vertical upwards #9034

    carlo
    Participant

    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

    Fill vertical upwards #9037

    Dimitar
    Participant

    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/

    Fill vertical upwards #9039

    carlo
    Participant

    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

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.