jQuery UI Widgets Forums Gauges and Maps Gauges jqxBarGauge too small?

This topic contains 4 replies, has 2 voices, and was last updated by  Todor 5 years, 6 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • jqxBarGauge too small? #104939

    robf
    Participant

    I am following the example for a simple jqxguage but when I run the sample the “dial” portion is microscopic in size. It is being loaded via AJAX into a div and inspection of the widget/canvas looks like THAT is big enough but the gauge is still tiny.
    My code is:

    <head>
    	<title id='Description'>Dashboard</title>
    	<link rel="stylesheet" href="css/font-awesome.css" />
    	<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    	<link rel="stylesheet" href="jqwidgets/styles/jqx.bootstrap.css" >
    	<link rel="stylesheet" href="jqwidgets/styles/jqx.arctic.css" type="text/css" />
    	<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    	   <script type="text/javascript" src="jqwidgets/jqxdraw.js"></script> 
        <script type="text/javascript" src="jqwidgets/jqxchart.core.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxchart.annotations.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxchart.api.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxbargauge.js"></script>
    	<script type="text/javascript" src="jqwidgets/globalization/globalize.js"></script>
        <script type="text/javascript" src="jqwidgets/demos.js"></script>
    
    	<script type="text/javascript">
            $(document).ready(function ()
            {
                $('#barGauge').jqxBarGauge({
                    colorScheme: "scheme02",
                    width: getWidth('barGauge'),
                    height: getHeight('barGauge'),
                    values: [102, 115, 130, 137], max: 150, tooltip: {
                        visible: true, formatFunction: function (value)
                        {
                            var realVal = parseInt(value);
                            return ('Year: 2019<br/>Price Index:' + realVal);
                        },
                    }
                });
            });
        </script>
    </head>
       
    
    <body>
    	<div class="row text-center">
    		<div class="col-md-12">
    			<h1>Dashboard</h1>		
    		</div>
    	</div>
    		
    	<div class="row">
    		<div class="col-md-6">
    			<div id="barGauge"></div>
    		</div>
    		
    	</div>
    
    </body>

    Pic is here: https://imgur.com/a/wOnLlBT

    Thanks

    jqxBarGauge too small? #104956

    robf
    Participant

    Have i hit a limit on question asked and answered during evaluation ?

    jqxBarGauge too small? #104963

    Todor
    Participant

    Hello robf,

    I would like to suggest comment out these two rows – width: getWidth(‘barGauge’) and height: getHeight(‘barGauge’).

    Best Regards,
    Todor

    jQWidgets Team
    https://www.jqwidgets.com

    jqxBarGauge too small? #104974

    robf
    Participant

    Hmm. Unfortunately there was no change. FYI: I use this feature with other, successfully rendered, widgets – e.g. grid, so it doesn’t appear to be a jquery compatibility issue. I am using jquery 3.3.1.

    jqxBarGauge too small? #104994

    Todor
    Participant

    Hello robf,

    Please, share a jsfiddle/codepen example with your code which demonstrates the issue then we would be able to properly investigate it.

    Best Regards,
    Todor

    jQWidgets Team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.