jQWidgets Forums

jQuery UI Widgets › Forums › Gauges and Maps › Gauges › 100% Gauges

This topic contains 3 replies, has 2 voices, and was last updated by  Minko 12 years, 9 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    100% Gauges Posts
  • July 18, 2012 at 12:50 pm 100% Gauges #6108

    tombeech
    Member

    Hey,

    Is it possible to have a gauge 100% width and height (for a responsive design)

    Tom

    July 18, 2012 at 1:09 pm 100% Gauges #6109

    Minko
    Blocked

    Hello Tom,

    here is how you can initialize jqxGauge with 100% width and height:

    JavaScript

    $('#gaugeContainer').jqxGauge({                
        ticksMinor: { interval: 5, size: '5%' },
        ticksMajor: { interval: 10, size: '9%' },
        width: '100%',
        height: '100%',
    });

    HTML

    <div id="gaugeContainer"></div>

    Best regards,
    Minko

    jQWidgets Team
    http://jqwidgets.com/

    July 18, 2012 at 1:16 pm 100% Gauges #6111

    tombeech
    Member

    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);
    });

    July 18, 2012 at 1:30 pm 100% Gauges #6113

    Minko
    Blocked

    Hello Tom,

    you have to check whether the parent of the jqxGauge container has height more than 0px.
    Here is complete source which have to show you the gauge with 100% height:

    CSS

    #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;
    }
    html, body
    {
        width: 100%;
        height: 100%;
    }

    JavaScript

    $(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);
    });

    HTML

    <body>
    <div id="gaugeContainer"></div>
    </body>

    Best regards,
    Minko

    jQWidgets Team
    http://jqwidgets.com/

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.