TypeError: s is undefined (jqxdraw.js) - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: div, dynamic, gauge, initialize, jqxgauge

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

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

Author

TypeError: s is undefined (jqxdraw.js) Posts

October 19, 2014 at 10:49 pm 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!

October 20, 2014 at 5:18 am 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/

Author

Posts

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

You must be logged in to reply to this topic.