jQuery UI Widgets Forums Gauges and Maps Gauges jqxGauge to make multiple gauges

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

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
  • jqxGauge to make multiple gauges #11285

    aryan verma
    Member

    hi

    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.

    • This topic was modified 7 years, 2 months ago by  aryan verma.
    • This topic was modified 7 years, 2 months ago by  aryan verma.
    • This topic was modified 7 years, 2 months ago by  Peter Stoev. Reason: Moved to Gauge Forum
    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/

    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…

    • This reply was modified 7 years, 2 months ago by  aryan verma.
    • This reply was modified 6 years, 2 months ago by  aryan verma.
    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/

    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….

    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…

    • This reply was modified 7 years, 2 months ago by  aryan verma.
    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/

    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.

    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/

    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.

    • This reply was modified 5 years, 1 month ago by  anasazeem. Reason: More explanation
    jqxGauge to make multiple gauges #64033

    Dimitar
    Participant
    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

    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/

    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

    jqxGauge to make multiple gauges #96573

    mdaslamknl
    Participant

    Hello Team

    I am looking like this chart

    http://justgage.com/

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

You must be logged in to reply to this topic.