jQuery UI Widgets Forums Gauges and Maps Gauges Linear Gauge problem parsing NaN

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Linear Gauge problem parsing NaN #30371

    jclason
    Member

    I have a linear gauge set up with a range of -.5 to .5 with a couple of ranges. Whenever the value for this gauge changes, I get the following error in the console and Chrome says it hits over 100 occurrances:

    Error: Problem parsing d=”M 80.5 NaN L 106.5 NaN L 106.5 NaN” jqxchart.js:7
    a.jqx.svgRenderer.attr jqxchart.js:7
    a._performArrowPointerLayout jqxgauge.js:7
    a._setValue jqxgauge.js:7
    (anonymous function)

    I have four other gauges on the same page and they all work fine. None of them use negative or decimal values though, just positive whole numbers. Here is my initialization code and the code I am calling to update the gauge’s value:

    $(‘#gauge1’).jqxLinearGauge({
    orientation: ‘vertical’,
    labels: { interval: .5, position: ‘near’ },
    ticksMajor: { size: ‘10%’, interval: .2 },
    //ticksMinor: minorTicks,
    max: .5,
    min: -.5,
    value: GlassApp.viewModel.GaugeValue1(),
    height: ‘400px’,
    width: ‘180px’,
    pointer: { pointerType: ‘arrow’, size: ‘15%’, style: { fill: ‘#000000’, stroke: ‘#000000’ } },
    colorScheme: ‘scheme05’,
    background: { visible: false, showGradient: false },
    ranges: [
    { startValue: -.5, endValue: -.1, style: { fill: ‘#FF4800’, stroke: ‘#FF4800’ } },
    { startValue: -.1, endValue: .1, style: { fill: ‘#87ceeb’, stroke: ‘#87ceeb’ } },
    { startValue: .1, endValue: .5, style: { fill: ‘#FF4800’, stroke: ‘#FF4800’ } }]
    });

    And to update the gauge’s value I call: $(‘#gauge1’).val(Number(val).toFixed(3));

    Any idea what could be going on here?

    Linear Gauge problem parsing NaN #30402

    Dimitar
    Participant

    Hello jclason,

    We tested the following example, based on yours but encountered no issues:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgauge.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    $('#gaugeContainer').jqxLinearGauge({
    orientation: 'vertical',
    labels: { interval: .5, position: 'near' },
    ticksMajor: { size: '10%', interval: .2 },
    //ticksMinor: minorTicks,
    max: .5,
    min: -.5,
    value: 0,
    height: '400px',
    width: '180px',
    pointer: { pointerType: 'arrow', size: '15%', style: { fill: '#000000', stroke: '#000000'} },
    colorScheme: 'scheme05',
    background: { visible: false, showGradient: false },
    ranges: [
    { startValue: -.5, endValue: -.1, style: { fill: '#FF4800', stroke: '#FF4800'} },
    { startValue: -.1, endValue: .1, style: { fill: '#87ceeb', stroke: '#87ceeb'} },
    { startValue: .1, endValue: .5, style: { fill: '#FF4800', stroke: '#FF4800'}}]
    });
    $('#setValueButton').click(function () {
    $('#gaugeContainer').jqxLinearGauge('value', .25);
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id="gaugeContainer">
    </div>
    <br />
    <br />
    <button id="setValueButton" style="display: inline;">
    Set value</div>
    </body>
    </html>

    Please make sure you are using the latest versions of jQWidgets (3.0.3) and Chrome.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.