jQuery UI Widgets Forums Gauges and Maps Gauges How to change numbers on gauge

Tagged: , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 8 years ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • How to change numbers on gauge #19591

    jewjaw
    Member

    I want to change numbers on gauge.
    min =0
    max = 900

    $(document).ready(function () {
    var labels = { visible: true, position: ‘inside’ },
    theme = getDemoTheme();
    //Create jqxGauge
    $(‘#gauge’).jqxGauge({
    ranges: [{ startValue: 0, endValue: 90, style: { fill: ‘#e2e2e2’, stroke: ‘#e2e2e2’ }, startDistance: ‘5%’, endDistance: ‘5%’, endWidth: 13, startWidth: 13 },
    { startValue: 90, endValue: 140, style: { fill: ‘#f6de54’, stroke: ‘#f6de54’ }, startDistance: ‘5%’, endDistance: ‘5%’, endWidth: 13, startWidth: 13 },
    { startValue: 140, endValue: 180, style: { fill: ‘#db5016’, stroke: ‘#db5016’ }, startDistance: ‘5%’, endDistance: ‘5%’, endWidth: 13, startWidth: 13 },
    { startValue: 180, endValue: 220, style: { fill: ‘#d02841’, stroke: ‘#d02841’ }, startDistance: ‘5%’, endDistance: ‘5%’, endWidth: 13, startWidth: 13 }
    ],
    cap: { radius: 0.04 },
    caption: { offset: [0, -25], value: ‘jQWidgets’, position: ‘bottom’ },
    value: 0,
    style: { stroke: ‘#ffffff’, ‘stroke-width’: ‘1px’, fill: ‘#ffffff’ },
    animationDuration: 1500,
    colorScheme: ‘scheme04’,
    labels: labels,
    ticksMinor: { interval: 5, size: ‘5%’ },
    ticksMajor: { interval: 10, size: ‘10%’ }
    });
    //Initialize the Settings panel.
    $(‘#expander’).jqxExpander({ toggleMode: ‘none’, showArrow: false, width: 200, theme: theme });
    $(‘#insideRadio’).jqxRadioButton({ width: 150, checked: true, theme: theme });
    $(‘#outsideRadio’).jqxRadioButton({ width: 150, theme: theme });
    $(‘#showLabelsCheckbox’).jqxCheckBox({ width: 150, checked: true, theme: theme });
    $(‘#showRangesCheckbox’).jqxCheckBox({ width: 150, checked: true, theme: theme });
    $(‘#showBorderCheckbox’).jqxCheckBox({ width: 150, checked: true, theme: theme });
    //Binding to the widgets’s events
    $(‘#showLabelsCheckbox’).on(‘change’, function (e) {
    labels.visible = e.args.checked;
    $(‘#gauge’).jqxGauge(‘labels’, labels);
    });
    $(‘#showRangesCheckbox’).on(‘change’, function (e) {
    $(‘#gauge’).jqxGauge(‘showRanges’, e.args.checked);
    });
    $(‘#showBorderCheckbox’).on(‘change’, function (e) {
    $(‘#gauge’).jqxGauge(‘border’, { visible: e.args.checked });
    });
    $(‘#outsideRadio’).on(‘change’, function (e) {
    if (e.args.checked) {
    labels.position = ‘outside’;
    $(‘#gauge’).jqxGauge(‘labels’, labels);
    }
    });
    $(‘#insideRadio’).on(‘change’, function (e) {
    if (e.args.checked) {
    labels.position = ‘inside’;
    $(‘#gauge’).jqxGauge(‘labels’, labels);
    }
    });
    // set gauge’s value.
    $(‘#gauge’).jqxGauge(‘setValue’, 220);
    });

    • This topic was modified 8 years, 1 month ago by  jewjaw.
    How to change numbers on gauge #19757

    Dimitar
    Participant

    Hello jewjaw,

    Here is the solution:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgauge.js"></script>
    <style type="text/css">
    #gaugeValue
    {
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fafafa), color-stop(100%, #f3f3f3));
    background-image: -webkit-linear-gradient(#fafafa, #f3f3f3);
    background-image: -moz-linear-gradient(#fafafa, #f3f3f3);
    background-image: -o-linear-gradient(#fafafa, #f3f3f3);
    background-image: -ms-linear-gradient(#fafafa, #f3f3f3);
    background-image: linear-gradient(#fafafa, #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;
    }
    </style>
    <script type="text/javascript">
    $(document).ready(function () {
    $('#gaugeContainer').jqxGauge({
    ranges: [{ startValue: 0, endValue: 200, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
    { startValue: 200, endValue: 400, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
    { startValue: 400, endValue: 700, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
    { startValue: 700, endValue: 900, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13}],
    ticksMinor: { interval: 10, size: '5%' },
    ticksMajor: { interval: 20, size: '9%' },
    labels: { interval: 50 },
    value: 0,
    max: 900,
    colorScheme: 'scheme05',
    animationDuration: 1200
    });
    $('#gaugeContainer').jqxGauge('value', 500);
    });
    </script>
    </head>
    <body style="background: white;">
    <div id="demoWidget" style="position: relative;">
    <div style="float: left;" id="gaugeContainer">
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.