jqxGauge to make multiple gauges - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: bar gauge, gauge, jqxbargauge, jqxgauge, percent, semicircle

This topic contains 15 replies, has 4 voices, and was last updated by Dimitar 7 years, 6 months ago.

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

Author

jqxGauge to make multiple gauges Posts

November 21, 2012 at 9:29 am jqxGauge to make multiple gauges #11285

Member

i am creating a gauge using jqxGauge plugin. when i am trying to create three gauges on the same page, it is creating a problem. it is accepting the values but the labels for all the three gauges are appearing on the same gauge. can u tell me what am i doing wrong.

November 21, 2012 at 12:42 pm jqxGauge to make multiple gauges #11303

Dimitar

Participant

Hello aryan verma,

We were not able to reproduce the reported issue. Could you, please, provide us with a code snippet so that we may see what causes the behaviour?

Best Regards,
Dimitar

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

November 27, 2012 at 9:26 am jqxGauge to make multiple gauges #11526

aryan verma

Member

javascript code:

$(document).ready(function () {
$(‘#gaugeContainer1’).jqxGauge({
ranges: [{ startValue: 0, endValue: 55, style: { fill: ‘#4bb648’, stroke: ‘#4bb648’ }, endWidth: 5, startWidth: 1 },
{ startValue: 55, endValue: 100, style: { fill: ‘#fbd109’, stroke: ‘#fbd109’ }, endWidth: 10, startWidth: 5 },],
ticksMinor: { interval: 5, size: ‘5%’ },
ticksMajor: { interval: 10, size: ‘9%’ },
value: 0,
colorScheme: ‘scheme05’,
animationDuration: 1200
});

$(‘#gaugeContainer’).bind(‘valueChanging’, function (e) {
$(‘#gaugeValue’).text(Math.round(e.args.value) + ‘ %’);
});
$(‘#gaugeContainer1’).bind(‘valueChanging’, function (e1) {
$(‘#gaugeValue1’).text(Math.round(e1.args.value) + ‘ %’);
});

var a=50;
var b=60;
$(‘#gaugeContainer’).jqxGauge(‘value’, a);
$(‘#gaugeContainer1’).jqxGauge(‘value’, b);
});

html code:

its is showing the label on the first gauge i.e the value of the first gauge is also appearing on the first gauge and can u also tell me how can i view a decimal value like 55.71 or 88.92…

November 27, 2012 at 10:21 am jqxGauge to make multiple gauges #11535

Dimitar

Participant

Hi aryan verma,

Please have a look at the following example:

<!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.2.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 () {
            var options = {
                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,
                colorScheme: 'scheme05',
                animationDuration: 1200
            };
            $('#gaugeContainer1').jqxGauge(options);
            $('#gaugeContainer2').jqxGauge(options);
            $('#gaugeContainer3').jqxGauge(options);
            $('#gaugeContainer1').bind('valueChanging', function (e) {
                $('#gaugeValue1').text(Math.round(e.args.value) + ' kph');
            });
            $('#gaugeContainer2').bind('valueChanging', function (e) {
                $('#gaugeValue2').text(Math.round(e.args.value) + ' kph');
            });
            $('#gaugeContainer3').bind('valueChanging', function (e) {
                $('#gaugeValue3').text(Math.round(e.args.value) + ' kph');
            });
            $('#gaugeContainer1').jqxGauge('value', 100);
            $('#gaugeContainer2').jqxGauge('value', 120);
            $('#gaugeContainer3').jqxGauge('value', 140);
        });
    </script>
</head>
<body style="background: white;">
    <div id="demoWidget" style="position: relative;">
        <div style="float: left;" id="gaugeContainer1">
        </div>
        <div id="gaugeValue1" style="position: absolute; top: 235px; left: 132px; font-family: Sans-Serif;
            text-align: center; font-size: 17px; width: 70px;">
        </div>
        <div style="float: left;" id="gaugeContainer2">
        </div>
        <div id="gaugeValue2" style="position: absolute; top: 235px; left: 492px; font-family: Sans-Serif;
            text-align: center; font-size: 17px; width: 70px;">
        </div>
        <div style="float: left;" id="gaugeContainer3">
        </div>
        <div id="gaugeValue3" style="position: absolute; top: 235px; left: 842px; font-family: Sans-Serif;
            text-align: center; font-size: 17px; width: 70px;">
        </div>
    </div>
</body>
</html>

Remember that the positions of the value labels depend on the style.

Best Regards,
Dimitar

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

November 27, 2012 at 10:50 am jqxGauge to make multiple gauges #11537

aryan verma

Member

Hi Team,

in the above example, the value of second gauge is coming in the second gauge but again the third one is not in its place, i have tried all many things but i am unable to make it appear inside the third gauge.. can u please tell me how can it be done

also how to view percentage value in the gauge like 88.33% or 55.55%..

thanks in advance….

November 27, 2012 at 11:31 am jqxGauge to make multiple gauges #11541

aryan verma

Member

Hi team

by manipulating some of the properties, i am able to make the values to appear inside their respective gauges..

but i am not able to view the percentage value like 55.55%.. can you please tell me how to do it…

November 28, 2012 at 6:35 am jqxGauge to make multiple gauges #11574

Dimitar

Participant

Hi aryan verma,

Here is how to use percentage values in jqxGauge:

<!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.2.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: 25, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
                         { startValue: 25, endValue: 50, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
                         { startValue: 50, endValue: 75, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
                         { startValue: 75, endValue: 100, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13}],
                ticksMinor: { interval: 5, size: '5%' },
                ticksMajor: { interval: 10, size: '9%' },
                value: 0,
                colorScheme: 'scheme05',
                animationDuration: 1200,
                labels: { interval: 10, formatValue: function (value, position) {
                    return value + '%';
                }
                },
                max: 100
            });
            $('#gaugeContainer').bind('valueChanging', function (e) {
                $('#gaugeValue').text(Math.round(e.args.value) + ' %');
            });
            $('#gaugeContainer').jqxGauge('value', 70);
        });
    </script>
</head>
<body style="background: white;">
    <div id="demoWidget" style="position: relative;">
        <div style="float: left;" id="gaugeContainer">
        </div>
        <div id="gaugeValue" style="position: absolute; top: 235px; left: 132px; font-family: Sans-Serif;
            text-align: center; font-size: 17px; width: 70px;">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

November 28, 2012 at 6:56 am jqxGauge to make multiple gauges #11576

aryan verma

Member

Hi Dimitar

the above example is displaying just a single int value i.e. 70%. what i am asking is that is it possible to display a decimal or float value like 55.55% inside the gauge. if yes, how to do it..

thanks in advance.

November 28, 2012 at 7:31 am jqxGauge to make multiple gauges #11581

Dimitar

Participant

Hi aryan verma,

Here is what you need to change in the above code so that decimal or float values will be displayed:

            $('#gaugeContainer').bind('valueChanging', function (e) {
                var value = e.args.value.toFixed(2);
                $('#gaugeValue').text(value + ' %');
            });
            $('#gaugeContainer').jqxGauge('value', 55.55);

Best Regards,
Dimitar

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

December 10, 2014 at 11:05 am jqxGauge to make multiple gauges #64025

anasazeem

Participant

Hi Dimitar,
Can you please tell me how to change the ranges from solid colors to gradient? A customizable gradient similar to the border of the Gauge.

December 10, 2014 at 12:22 pm jqxGauge to make multiple gauges #64033

Dimitar

Participant

Duplicate post: http://www.jqwidgets.com/community/topic/can-i-have-a-gradient-in-ranges/.

October 6, 2017 at 4:08 pm jqxGauge to make multiple gauges #96551

mdaslamknl

Participant

Hello Team,

Thanks for your response for semi circle donut or gauge chart implementation.

Please check the below URL for our requirement of donut chart / guage

I need a charts like this below link
https://www.dropbox.com/s/f32o6slpge5mksm/Semi%20Circle%20Chart.png?dl=0

But from your end have provided example with the below URL

http://jsfiddle.net/mdaslamknl/cdpmc7Lu/8/

which will not meet our requirement. Please check the URL we have provided and provide the required sample ASAP.

Thanks
Aslam

October 9, 2017 at 4:54 am jqxGauge to make multiple gauges #96562

Dimitar

Participant

Hello Aslam,

You may be able to achieve your requirement using our jqxBarGauge widget. Please refer to its demos to see its capabilities: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxbargauge/index.htm. Of particular interest to you may be the example Auto change value.

Best Regards,
Dimitar

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

October 9, 2017 at 7:03 am jqxGauge to make multiple gauges #96563

mdaslamknl

Participant

Hello Team

Thanks for the response, I go through the example provided.

my requirement is little different i have 3 values Low,Medium and High and i want to display the Low,Medium and high labels also and Medium value should be display in center of the chart like i provided the image in dropbox.

From below like example which i able to change the angle and display the value but i need to display Left side ‘Low’ value and in center ‘Medium’ and in right ‘High’ and in center i want to display the exact value.

Exactly i am looking like this from jqwidgets is it possible or not.
https://www.dropbox.com/s/f32o6slpge5mksm/Semi%20Circle%20Chart.png?dl=0

Below is the link which we try to do settings

https://jsfiddle.net/mdaslamknl/6haLemtw/23/

Best Regards,
Md Aslam

October 9, 2017 at 1:18 pm jqxGauge to make multiple gauges #96573

mdaslamknl

Participant

Hello Team

I am looking like this chart

http://justgage.com/

Author

Posts

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

You must be logged in to reply to this topic.