jQuery Conflict and automatic loading of js files

[jitesh]

Hi,

 

We are an existing customer of Fusion Charts. We are in process of moving to the XT version so that we can make use of the javascript charts for iPad (in our hosted solution).

 

I read in the documentation that I do not need to include the files- jquery.min.js, FusionCharts.HC.js and FusionCharts.HC.Charts.js, explicitly as long as I have included FusionCharts.js and also these files are present in the same folder as FusionCharts.js.

 

This does not work for me. I checked in the console logs for web inspector (Safari) as well as the Firebug (Firefox). The url that FusionCharts.js tries to use to load the other javascript files is incorrect. I believe it's not able to resolve the url correctly or find the right url to use for resources (js, images etc.).
 

I workaround this problem by including the other 3 js files explicitly in my code.

 

Questions-

-------------

Does this explicit inclusion of these files have a downside?

Could this be fixed to dynamically load js files as stated in the documentation?

 

Now the more critical part: we are using jquery-1.10.2.js in our application for certain widgets/components/utilities. FusionCharts also has a jquery file: jquery.min.js.

 

I have no immediate way to test these together as these are developed in parallel and will be merged and released together. I have read a number of posts regarding similar scenarios on FusionCharts forum where people have complained about Charts not loading.

 

I am afraid we might hit the same issue.

 

Questions:

-------------

Is there a sure shot way of avoiding this?

Which verison of jquery is used by FusionCharts XT and will it conflict with 1.10.2 that we use?

Can I avoid including jquery.min.js from the FusionCharts XT package and just rely on jquery-1.10.2.js that is used and loaded in almost every page of the application?

 

Will really appreciate a quick response.

 

Regards,

Jitesh

Edited March 13, 2014 by jitesh

[Haritha]

Hi Jitesh,

 

Please find our response below:

 

1. I read in the documentation that I do not need to include the files- jquery.min.js, FusionCharts.HC.js and FusionCharts.HC.Charts.js, explicitly as long as I have included FusionCharts.js and also these files are present in the same folder as FusionCharts.js.

This does not work for me. I checked in the console logs for web inspector (Safari) as well as the Firebug (Firefox). The url that FusionCharts.js tries to use to load the other javascript files is incorrect. I believe it's not able to resolve the url correctly or find the right url to use for resources (js, images etc.).  I workaround this problem by including the other 3 js files explicitly in my code.Does this explicit inclusion of these files have a downside?  Could this be fixed to dynamically load js files as stated in the documentation?

 

>> FusionCharts.js file loads the other JS files automatically and you do not have to explicitly load all the files in your page. You may try creating a simple sample without using any external framework, to test this behavior. 

 

Regarding your problem of FusionCharts.js file not being able to load the required files automatically, we would not be able to comment about this without having a look at the implementations details. Hence, we would suggest you to send a mail to [email protected] along with a scaled down sample replicating this problem so that we can diagnose the problem at our end.

 

Also, the explicit inclusion of files does not have any downside. However, you need to specify the files in correct order ie. FusionCharts.js should precede inclusion of FusionCharts.HC.js and FusionCharts.HC.Charts.js.

 

2. Which verison of jquery is used by FusionCharts XT and will it conflict with 1.10.2 that we use?  Can I avoid including jquery.min.js from the FusionCharts XT package and just rely on jquery-1.10.2.js that is used and loaded in almost every page of the application?

 

>> The recent version of FusionCharts v3.3.1 Sr3 uses jQuery v1.7.1. If your application uses jQuery v1.10.2 then you may remove the "jquery.min.js" from the folder where JS files of FusionCharts are present and load your jQuery file explicitly in the page before loading FusionCharts.js.

 

Please find an attached sample which uses jQuery v1.10.2 to render charts and also the sample includes loading of only the file "FusionCharts.js" explicitly.

 

Awaiting your feedback.

Column 3D.zip

[monsieurmark]

Hi Jitesh,

I had the same problem, I tried using setRenderer('javascript'). No joy on pc or ipad.

I thought about explicity calling the files, but instead I solved this by putting {renderer:'javascript'} behind the two end flags of the mychart = new Fusioncharts line.

ie in php:   var mychart = new Fusioncharts('/Fusioncharts/Fusioncharts_XT_Developer/Charts/Zoomline.swf','Idoverview1','500','450','1','1',{renderer:'javascript'});

For some reason this kicked my files into action.

Mark

[Guest Sashibhusan]

Hi Mark,

 

Thank you for posting your findings. It will be helpful.

 

By setting {renderer:'javascript'} you are exclusively setting the renderer to JavaScript mode. So, even if the devide/machine has Flash player, it forcefully render the chart in JavaScript mode and hence the required JavaScript files loading automatically by "FusionCharts.js".

[jitesh]

Thanks Haritha.

 

I was finally able to get an environment with both the jQuery's in a page for my testing.

 

javascript chart rendered with jQuery v1.10.2 that our application already uses.

 

Interestingly, even if I don't remove the jquery.min.js that ships with FusionCharts XT package, there didn't seem to be an obvious conflict with the charting functionality, i.e. the chart did render fine in spite of both jquery javascripts on the page.

 

However, since I cannot be sure that nothing else that relies on our application's jquery is not broken, I would go with your suggestion of not including the fusionchart package's jquery.min.js.

 

Thanks for your help again.

[Haritha]