warwickmc

Browser Freezes When Rendering In Javascript

Recommended Posts

Hi guys,

 

We're using the fusioncharts paid version and have a requirement to be able to display charts via iphone/ipad. The flash version works perfectly, however when we try and use setrenderer('javascript') the page completely locks up, and periodly bring up 'do you wish to stop this script' messages (In firefox, also doesnt render in other browsers). Firebug displays an error message 'Max Stack Size Exceeded'.

 

Here is the code that is causing this issue. It is running through the FusionCharts.php provided in the .zip that is placed within a drupal page if that helps. The XML is provided via the XMLstr as opposed to a straight up .xml file.

<div id="[url=""]SalesDiv[/url]">Chart</div> <script type="[url=""]text/javascript[/url]" ><!-- 	// Instantiate the Chart  	if ( FusionCharts("Sales") && FusionCharts("Sales").dispose ) FusionCharts("Sales").dispose(); 	var chart_Sales = new FusionCharts( {  "swfUrl" : "<path to fusioncharts>/Charts/MSColumnLine3D.swf",  "width" : "900",  "height" : "400",  "renderAt" : "SalesDiv",  "dataFormat" : "xml",  "id" : "Sales",  "wMode" : "transparent",  "dataSource" : "<chart caption='' xAxisName='' yAxisName='%' yAxisMaxValue='100' ><categories><category label='Jul' /><category label='Aug' /><category label='Sep' /><category label='Oct' /><category label='Nov' /><category label='Dec' /><category label='Jan' /><category label='Feb' /><category label='Mar' /><category label='Apr' /><category label='May' /><category label='Jun' /></categories><dataset seriesName='Actual YTD' showValues='0'><set value='' /><set value='' /><set value='' /><set value='' /><set value='' /><set value='' /><set value='' /><set value='40' /><set value='56' /><set value='' /><set value='' /><set value='' /></dataset><dataset seriesName='Bus Plan YTD' ParentYAxis='d' showValues='0'><set value='3.5' /><set value='6.3' /><set value='10.5' /><set value='15.4' /><set value='27' /><set value='39.1' /><set value='50.5' /><set value='59.7' /><set value='64' /><set value='77' /><set value='90' /><set value='100' /></dataset><dataset seriesName='Stretch' ParentYAxis='d' showValues='0'><set value='7' /><set value='13' /><set value='17' /><set value='25' /><set value='35' /><set value='46' /><set value='60' /><set value='68' /><set value='74' /><set value='90' /><set value='100' /><set value='100' /></dataset></chart>" } ).render(); // --></script> <!-- END Script Block for Chart Sales --> </div>

 

Any light you could shed on this would be much appreciated.

Share this post


Link to post
Share on other sites

Before I or anyone else looks further into it, I found that your XML has <dataset ParentYAxis='d' ...>. This is NOT a valid XML (even though it renders fine on flash.) For it to work properly, replace ParentYAxis='d' with renderAs='line'

 

Also, with your sample XML we could not reproduce the error. Are you using the latest FusionCharts release (3.2.2-SR3)? If not, could you please redownload the same from PUC.

 

The XMl that we are using (after fixing parentYAxis issue) is as below:

<chart caption='' xAxisName='' yAxisName='%' yAxisMaxValue='100' >
<categories>
<category label='Jul' /><category label='Aug' /><category label='Sep' /><category label='Oct' /><category label='Nov' /><category label='Dec' /><category label='Jan' /><category label='Feb' /><category label='Mar' /><category label='Apr' /><category label='May' /><category label='Jun' />
</categories>
<dataset seriesName='Actual YTD' showValues='0'><set value='' /><set value='' /><set value='' /><set value='' /><set value='' /><set value='' /><set value='' /><set value='40' /><set value='56' /><set value='' /><set value='' /><set value='' /></dataset>
<dataset seriesName='Bus Plan YTD' renderas='line' showValues='0'><set value='3.5' /><set value='6.3' /><set value='10.5' /><set value='15.4' /><set value='27' /><set value='39.1' /><set value='50.5' /><set value='59.7' /><set value='64' /><set value='77' /><set value='90' /><set value='100' /></dataset>
<dataset seriesName='Stretch' renderas='line' showValues='0'><set value='7' /><set value='13' /><set value='17' /><set value='25' /><set value='35' /><set value='46' /><set value='60' /><set value='68' /><set value='74' /><set value='90' /><set value='100' /><set value='100' /></dataset>
</chart>

 

PS: Ensure that you place all the JS files (FusionCharts.HC.js and FusionCharts.HC.Charts.js) in package alongside the main FusionCharts.js

Share this post


Link to post
Share on other sites

Hi there,

 

Thanks for the tip, i've adjusted the XML, still with the same result however.

 

I've run the page through chrome to pull out the exact JS error message, which is as follows:

 

  • Uncaught RangeError: Maximum call stack size exceeded
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend
    • o.extend.o.fn.extend

Hopefully this sheds some light on what might be happening with the setup.

Share this post


Link to post
Share on other sites

Hi there,

 

I discovered that this issue is caused by 2 versions of jQuery being called at the same time. As i'm using drupal the older version of jQuery is essential (it's 1.3.2).

 

Is there any chance of using an alias for the fusioncharts jQuery?

 

var $fusioncharts = jQuery.noConflict();

 

$fusioncharts(document).ready(function(){}....blah

 

I had a quick look at the fusioncharts js, but it's optimised which makes it fairly difficult to assess how complex that job would be.

 

Regards

Share this post


Link to post
Share on other sites

Hey,

 

As a suggestion, to avoid the conflict between jQuery 1.3 (used by Drupal) and jQuery 1.7 (used by FusionCharts) , try creating a custom scope individually.

 

The JavaScript files required by FusionCharts can be isolated and create a local scope to render FusionCharts to avoid conflict.

 

Hope this helps.

 

 

Share this post


Link to post
Share on other sites

Hey,

 

As a suggestion, to avoid the conflict between jQuery 1.3 (used by Drupal) and jQuery 1.7 (used by FusionCharts) , try creating a custom scope individually.

 

The JavaScript files required by FusionCharts can be isolated and create a local scope to render FusionCharts to avoid conflict.

 

Hope this helps.

 

 

 

I know this hasn't been posted on for awhile. But could you describe exactly what you mean by isolating Fusion Charts? I'm having a similar problem?

Share this post


Link to post
Share on other sites
Guest Sashibhusan

Hi,

 

If you are using FusionCharts in Drupal, please note that the older version of jQuery (V 1.3.2) is essential.

 

But FusionCharts.js file (the JavaScript file used for rendering the charts) internally calls "jquery.min.js" which is the latest version (V 1.7.1) and will not work for older version of jQuery V 1.3.2.

 

So, you need to put all the FusionCharts JavaScript files (FusionCharts.js, FusionCharts.HC.js, FusionCharts.HC.Charts.js and jquery.min.js) in one folder and isolate jQuery 1.3 (used by Drupal) from FusionCharts.js.

 

Hope I am able to clarify myself.

 

Share this post


Link to post
Share on other sites

Hi,

 

If you are using FusionCharts in Drupal, please note that the older version of jQuery (V 1.3.2) is essential.

 

But FusionCharts.js file (the JavaScript file used for rendering the charts) internally calls "jquery.min.js" which is the latest version (V 1.7.1) and will not work for older version of jQuery V 1.3.2.

 

So, you need to put all the FusionCharts JavaScript files (FusionCharts.js, FusionCharts.HC.js, FusionCharts.HC.Charts.js and jquery.min.js) in one folder and isolate jQuery 1.3 (used by Drupal) from FusionCharts.js.

 

Hope I am able to clarify myself.

 

 

Hi Sashibhusan,

 

What do you mean with "isolate jQuery 1.3"?

In my case, I use richfaces, and it comes with jQuery 1.3.2. I can't control when it's added in the page. Richfaces controls this.

 

All mu FusionCharts javascript files are in a folder, and i load the FusionCharts.js in my page. It automatically load the others?

And how FusionCharts use jQuery 1.7.1 reference and not jQuery 1.3.2?

 

Thanks..

Share this post


Link to post
Share on other sites
Guest Sashibhusan

Hi,

 

To use JQuery 1.7.1 forcefully by FusionCharts, you need to include it explicitly in your webpage just after including FusionCharts.js file.

 

Hope this helps !

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now