jQuery UI Widgets Forums Gauges and Maps Gauges TypeError: s is undefined (jqxdraw.js)

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • TypeError: s is undefined (jqxdraw.js) #61342

    patsuhiko
    Participant

    Hello,

    i have a problem with gauges when generating the DIV of the gauges with .html(xxx)

    html = '';
    len = 10;
    for(var i = 0; i < len; i++)
    {
      html += '<div id="' + i + '-gaugeContainer" style="position: absolute; top: 110px; right: 5px;"></div>';
    }
    $("#div1").html(html);
    
    for(var i = 0; i < len; i++)
    {
      $('#' + i + '-gaugeContainer').jqxGauge({
                  ranges: [{ startValue: 100, endValue: 1000, style: { fill: '#c89932', stroke: '#4bb648' }, endWidth: 10, startWidth: 10 },
                           { startValue: 1000, endValue: 2000, style: { fill: '#e6b422', stroke: '#fbd109' }, endWidth: 10, startWidth: 0 },
                           { startValue: 2000, endValue: 4000, style: { fill: '#fbca4d', stroke: '#ff8000' }, endWidth: 10, startWidth: 10 },
                           { startValue: 4000, endValue: 5000, style: { fill: '#c1e4e9', stroke: '#ff8000' }, endWidth: 10, startWidth: 10 },
                           { startValue: 5000, endValue: 7000, style: { fill: '#89c3eb', stroke: '#e02629' }, endWidth: 10, startWidth: 10 },
                           { startValue: 7000, endValue: 9000, style: { fill: '#84a2d4', stroke: '#e02629' }, endWidth: 10, startWidth: 10 },
                           { startValue: 9000, endValue: 12000, style: { fill: '#007bbb', stroke: '#e02629' }, endWidth: 10, startWidth: 10 },
                           { startValue: 12000, endValue: 15000, style: { fill: '#19448e', stroke: '#e02629' }, endWidth: 10, startWidth: 10 }],
                  ticksMinor: { interval: 500, size: '5%' },
                  ticksMajor: { interval: 1000, size: '9%' },
                  labels: { interval: 1500, distance: '50px' },
                  value: 400,
                  min: 100,
                  max: 15000,
                  colorScheme: 'scheme05',
                  animationDuration: 100,
                  radius: 100
                });
    }

    If i create a static DIV with the unique ID in the BODY of HTML, then the gauge is working!
    Maybe someone has a solution for my problem.

    Thank you!

    TypeError: s is undefined (jqxdraw.js) #61346

    Dimitar
    Participant

    Hello patsuhiko,

    We tested your example with the latest version of jQWidgets (3.5.0) and no error is thrown on our side (all gauges are stacked because the absolute positions of their divs are the same):

    <!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.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgauge.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                html = '';
                len = 10;
                for (var i = 0; i < len; i++) {
                    html += '<div id="' + i + '-gaugeContainer" style="position: absolute; top: 110px; right: 5px;"></div>';
                }
                $("#div1").html(html);
    
                for (var i = 0; i < len; i++) {
                    $('#' + i + '-gaugeContainer').jqxGauge({
                        ranges: [{ startValue: 100, endValue: 1000, style: { fill: '#c89932', stroke: '#4bb648' }, endWidth: 10, startWidth: 10 },
                           { startValue: 1000, endValue: 2000, style: { fill: '#e6b422', stroke: '#fbd109' }, endWidth: 10, startWidth: 0 },
                           { startValue: 2000, endValue: 4000, style: { fill: '#fbca4d', stroke: '#ff8000' }, endWidth: 10, startWidth: 10 },
                           { startValue: 4000, endValue: 5000, style: { fill: '#c1e4e9', stroke: '#ff8000' }, endWidth: 10, startWidth: 10 },
                           { startValue: 5000, endValue: 7000, style: { fill: '#89c3eb', stroke: '#e02629' }, endWidth: 10, startWidth: 10 },
                           { startValue: 7000, endValue: 9000, style: { fill: '#84a2d4', stroke: '#e02629' }, endWidth: 10, startWidth: 10 },
                           { startValue: 9000, endValue: 12000, style: { fill: '#007bbb', stroke: '#e02629' }, endWidth: 10, startWidth: 10 },
                           { startValue: 12000, endValue: 15000, style: { fill: '#19448e', stroke: '#e02629' }, endWidth: 10, startWidth: 10}],
                        ticksMinor: { interval: 500, size: '5%' },
                        ticksMajor: { interval: 1000, size: '9%' },
                        labels: { interval: 1500, distance: '50px' },
                        value: 400,
                        min: 100,
                        max: 15000,
                        colorScheme: 'scheme05',
                        animationDuration: 100,
                        radius: 100
                    });
                }
            });
        </script>
    </head>
    <body style="background: white;">
        <div id="div1">
        </div>
    </body>
    </html>

    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.