jQuery UI Widgets › Forums › Gauges and Maps › Gauges › NaN error

Tagged: , , ,

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    NaN error Posts
  • June 10, 2013 at 12:04 pm NaN error #22878

    d0773d
    Member

    Hi all. I am attempting to get the Linear Gauge demo example to function properly, but I receive the following error:

    error:
    Error: Invalid value for attribute y=”NaN” jqxchart.js:7
    a.jqx.svgRenderer.attr jqxchart.js:7
    a._setRectAttrs jqxgauge.js:7
    a._performColumnPointerLayout jqxgauge.js:7
    a._setValue jqxgauge.js:7
    (anonymous function)

    my code:

    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    		<link rel="stylesheet" href="js/jqwidgets-ver2.8.3/jqwidgets/styles/jqx.base.css" type="text/css" />
    		<script type="text/javascript" src="js/jqwidgets-ver2.8.3/jqwidgets/jqxcore.js"></script>
    		<script type="text/javascript" src="js/jqwidgets-ver2.8.3/jqwidgets/jqxdata.js"></script>
    		<script type="text/javascript" src="js/jqwidgets-ver2.8.3/jqwidgets/jqxchart.js"></script>
    		<script type="text/javascript" src="js/jqwidgets-ver2.8.3/jqwidgets/jqxgauge.js"></script>
    		<script type="text/javascript" src="js/jqwidgets-ver2.8.3/jqwidgets/jqxbuttons.js"></script>
    		<script type="text/javascript">
    			$(document).ready(function() {
    				var i = 0;
    				$('#tempGauge').jqxLinearGauge({
    					max : 70,
    					min : 0,
    					pointer : {
    						size : '5%'
    					},
    					colorScheme : 'scheme02',
    					ticksMajor : {
    						size : '10%',
    						interval : 10
    					},
    					ticksMinor : {
    						size : '5%',
    						interval : 2.5,
    						style : {
    							'stroke-width' : 1,
    							stroke : '#aaaaaa'
    						}
    					},
    					ranges : [{
    						startValue : 20,
    						endValue : 45,
    						style : {
    							fill : '#FFA200',
    							stroke : '#FFA200'
    						}
    					}, {
    						startValue : 45,
    						endValue : 70,
    						style : {
    							fill : '#FF4800',
    							stroke : '#FF4800'
    						}
    					}],
    					value : 0
    				});
    				$('#tempGauge').jqxLinearGauge('value', 40);
    				$("#sendValue").click(function() {
    					var textValue = $("#vText").val();
    					$('#tempGauge').jqxLinearGauge({
    						value : textValue
    					});
    				});
                             });
               </script>

    I edited the demo to manually update the value of the gauge by typing in a decimal such as 75.56 and etc… then press the submit button. The value bar seems to function properly for the first couple of times, but then I receive the error that I stated above. I am not sure why I am receiving that error or how to fix my code.

    June 11, 2013 at 5:39 am NaN error #22932

    Dimitar
    Participant

    Hello

    We were not able to reproduce the reported error using the following code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../2.8.3/jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../2.8.3/scripts/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="../../2.8.3/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../2.8.3/jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../2.8.3/jqwidgets/jqxchart.js"></script>
        <script type="text/javascript" src="../../2.8.3/jqwidgets/jqxgauge.js"></script>
        <script type="text/javascript" src="../../2.8.3/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var i = 0;
                $('#tempGauge').jqxLinearGauge({
                    max: 70,
                    min: 0,
                    pointer: {
                        size: '5%'
                    },
                    colorScheme: 'scheme02',
                    ticksMajor: {
                        size: '10%',
                        interval: 10
                    },
                    ticksMinor: {
                        size: '5%',
                        interval: 2.5,
                        style: {
                            'stroke-width': 1,
                            stroke: '#aaaaaa'
                        }
                    },
                    ranges: [{
                        startValue: 20,
                        endValue: 45,
                        style: {
                            fill: '#FFA200',
                            stroke: '#FFA200'
                        }
                    }, {
                        startValue: 45,
                        endValue: 70,
                        style: {
                            fill: '#FF4800',
                            stroke: '#FF4800'
                        }
                    }],
                    value: 0
                });
                $('#tempGauge').jqxLinearGauge('value', 40);
                $("#sendValue").click(function () {
                    var textValue = $("#vText").val();
                    $('#tempGauge').jqxLinearGauge({
                        value: textValue
                    });
                });
            });
        </script>
    </head>
    <body style="background: white;">
        <div style="margin-left: 60px; float: left;" id="tempGauge">
        </div>
        <input type="text" id="vText" />
        <button id="sendValue">
            Send value</button>
    </body>
    </html>

    However, we noticed some animation issues when the value is changed and we will look into them.

    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.