jQuery UI Widgets Forums Gauges and Maps Gauges 100% Gauges

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    100% Gauges Posts
  • 100% Gauges #6108

    tombeech
    Member

    Hey,

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

    Tom

    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/

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

    • This reply was modified 8 years, 9 months ago by  tombeech.
    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/

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

You must be logged in to reply to this topic.