jQWidgets Forums

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

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

Author

How to change numbers on gauge Posts

April 19, 2013 at 4:51 am 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);
});

April 22, 2013 at 1:24 pm 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/

Author

Posts

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

You must be logged in to reply to this topic.