Decimal numbers in ranges - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: decimal, gauge, jqxgauge, ranges

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

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

Author

Decimal numbers in ranges Posts

December 10, 2012 at 4:56 pm Decimal numbers in ranges #12121

kozto

Member

Hi:

In the property “ranges”, items “startValue” and “EndValue” can not have decimal numbers? not working, only take integer values

example:
{
ranges: [{startValue: 0, endValue: 0.5, style: {fill: ‘# 009900’, stroke: ‘# 000000’}, endWidth: 10, startWidth: 5},
{startValue: 0.5, endValue: 3, style: {fill: ‘# FF9900’, stroke: ‘# 000000’}, endWidth: 20, startWidth: 10},
{startValue: 3, endValue: 4.2, style: {fill: ‘# D9007E’, stroke: ‘# 000000’}, endWidth: 40, startWidth: 20}],
value: 1.5
}

Thanks

Kozto

December 11, 2012 at 6:34 am Decimal numbers in ranges #12140

Dimitar

Participant

Hello Kozto,

Unfortunately, jqxGauge does not support ranges with decimal values. They are, however, supported by jqxLinearGauge.

A possible workaround is multiplying all your values by 10 and then showing the real values with labels. An example is shown below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Gauge, Gauge, Radial Gauge, jqxGauge" />
    <meta name="description" content="In the following demo you can see how you can cuztomize jqxGauge's ranges. You can set range's start and end width, start and end distance from the gauge's bundaries and custom style." />
    <title id='Description'>jqxGauge displays an indicator within a range of values. Gauges
        can be used in a table or matrix to show the relative value of a field in a range
        of values in the data region, for example, as a KPI</title>
    <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: 5, style: { fill: '# 009900', stroke: '# 000000' }, endWidth: 10, startWidth: 5 },
                    { startValue: 5, endValue: 30, style: { fill: '# FF9900', stroke: '# 000000' }, endWidth: 20, startWidth: 10 },
                    { startValue: 30, endValue: 42, style: { fill: '# D9007E', stroke: '# 000000' }, endWidth: 40, startWidth: 20}],
                ticksMinor: { interval: 1, size: '5%' },
                ticksMajor: { interval: 5, size: '9%' },
                labels: { interval: 3, formatValue: function (value, position) {
                    return value / 10;
                }
                },
                value: 0,
                max: 42,
                colorScheme: 'scheme05',
                animationDuration: 1200
            });
            $('#gaugeContainer').jqxGauge('value', 15);
        });
    </script>
</head>
<body style="background: white;">
    <div style="float: left;" id="gaugeContainer">
    </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.