jqxBarGauge: error: s is undefined

[George SParticipant]

Hello,

I am using jqxBargauge, and I am getting an error I can’t resolve. While the bargauage works with Google Chrome, the jqxBarGauge gives an error in Fireox (on 2 separate machines.)

The error I get is

	

...;var s;try{s=m.getBBox()}catch(p){}var n=a.jqx._rup(s.width);var c=a.jqx._rup(s....

TypeError: s is undefined… in file jqx-all.js (line 7, col 464079)

The code I am running is nearly verbatim copied from your examples. If I comment this out, I do NOT get my error (but also don’t get the BarGauage Graph).

var myTitle = 'Participation for ' + properNameFromEmail($v("USER_SELECTED"));   
         console.log(myTitle);
            
             $('#participation_Left').jqxBarGauge({colorScheme: "scheme05", width: 600, height: 600,
              title: {text:myTitle,  subtitle: {text:'Mouse Over to See Categories'}},
                values: [102, 115, 130, 137], max: 150, tooltip: {
                    visible: true, formatFunction: function (value)
                    {
                        var realVal = parseInt(value);
                        return ('Year: 2016<br/>Price Index:' + realVal);
                    },
                }
            });

I have been overly cautious with my inclusions…

#WORKSPACE_IMAGES#jqwidgets/jqx-all.js
#WORKSPACE_IMAGES#sweetalert2/sweetalert2.min.js
#WORKSPACE_IMAGES#justgage/raphael-2.1.4.min.js
#WORKSPACE_IMAGES#justgage/justgage.js
#WORKSPACE_IMAGES#javascript/rm_dashboard.js
...
#WORKSPACE_IMAGES#jqwidgets/styles/jqx.base.css
#WORKSPACE_IMAGES#jqwidgets/styles/jqx.energyblue.css
#WORKSPACE_IMAGES#jqwidgets/styles/jqx.arctic.css
#WORKSPACE_IMAGES#jqwidgets/styles/jqx.fresh.css
#WORKSPACE_IMAGES#jqwidgets/styles/jqx.dark.css
#WORKSPACE_IMAGES#sweetalert2/sweetalert2.css
#WORKSPACE_IMAGES#wst/wst.css

All other charts and graphs appear to work fine.

[HristoParticipant]

Hello George S,

We test example and work fine on Firefox and Edge (also Chrome).
Could you check variable ‘myTitle’ is it have correct value before set in the jqxBarGauge?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[George SParticipant]

I have found out a little more detail. If I take the above code that creates the Bargauage, and PUT IT in it’s own function, it works.

function buildParticipationBarGuage(){
    
            $('#participation_Left').jqxBarGauge({
                width: 600,
                height: 600,
                title: 'Participation For ' + $v("USER_SELECTED"),
                values:[60,40,40,80],
                baseValue: 0,
                max: 120,
                barSpacing: 9,
                animationDuration: 0,
                relativeInnerRadius: 0.2,
                startAngle: 0,
                endAngle: 360,
                colorScheme: 'scheme05',
                tooltip: {
                    visible: true}                 
            });
                          
}

Charts with hardcoded data are not very interesting. I am pulling my data via AJAX from Oracle database. When the above call is WITHIN the AJAX call, I get the error. When the buildParticipationBarGuage is OUTSIDE of the database call, it works. Note that I have a bunch of other charts pulling data from the database, and they all work fine. This is the only BarGauge I am using. I have changed variables, column names, database calls, etc and nothing helps.

This DOES NOT work.

 var respAnalysis = apex.server.process('GET_PARTICIPATION', {
            x01: $v("PEER_LIST_TERRITORY")
        }, {
            dataType: 'json'
        });

      

   // Register the function to call when the AJAX request is complete
    respAnalysis.done(function(data41) {
	console.log('AJAX call completed');	
	buildParticipationBarGuage(); 
	}

If I now move the buildParticipationBarGuage() OUTSIDE of the AJAX call, it works.

var respAnalysis = apex.server.process('GET_PARTICIPATION', {
            x01: $v("PEER_LIST_TERRITORY")
        }, {
            dataType: 'json'
        });

      

   // Register the function to call when the AJAX request is complete
        respAnalysis.done(function(data41) {
		console.log('AJAX call completed');		
	};
	
	buildParticipationBarGuage() ;

This totally has me confused.

Thanks

[George SParticipant]

Additional Info #2 – This has further been refined. The issue appears to be that this is visibility related. My webpage has a tab control. There are 4 tabs. (NOT jqwidgets tabs). Each tab has either one or two graphs. It appears that for Firefox, graphs cannot be updated UNLESS that graph is visible.

I have tried both ‘refresh’ and ‘update’ methods and neither help. Is there any way to change a graph data, while it is NOT visible, within Firefox? For example, if a tab control has 4 tabs… put a graph on each one. Update all 4 graphs, then switch to tab page 2 or 3 or 4, and the new data will be there. That does not appear to be happening in Firefox.

[HristoParticipant]

Hello George S,

We cannot give you advice for forigner widgets.
About jqxBarGauge you could try to initialize with some settings before ajax.
After this when you recieve data could set them on the existed BarGauge.
You could find more about the widget in our API Documentation and necessary type for each property.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[George SParticipant]

I tried that. I initialize the bargauge fine (and I am seeing this issue with other chart types). But if the bargauge is NOT visible, then I cannot update it. This is only in Firefox. Chrome and Edge do not have this issue. Is there a way (within Firefox) to update a chart when it is NOT visible, so that when it becomes visible, I see the new data. My code works fine IF the chart is visible.

[HristoParticipant]

Hello George S,

Please provide us an example that demonstrate this issue (https://www.jseditor.io/ or http://fiddle.jshell.net/).

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts