Chart is shrinked..

[erezharari]

from time to time my charts is drawn shrinked..

 

this happens randomly, especially when i use javascript to replace only the chart (and not the complete page).

 

 

 

please find a sample code.

 

please find a photo.

 

 

 

please note that the shrinked chart object is large as the sorrounding div. however, the chart is not drawn with the correct scale..

 

 

 

please help :-)

charts.zip

[Pallav]

You seem to be using our own JS code for rendering the HTML of chart. Please append the chartWidth and chartHeight attribute as we've done in our FusionCharts.js

[erezharari]

i am using FusionChart.js..

i urge you to try the samples..

[erezharari]

here is the fix:

 

This bug seems to have been fixed with the help of HBR Labs ?

 

By looking into the flash code, they noticed that with and height parameters are not passed to the FlashVars parameter.

 

 

 

The quick fix was to send these values with the xml:

 

urlToXml = "dataURL="+xml+"&chartwidth="+size[0]+"&chartheight="+size[1];

 

 

 

The correct solution is to fix it within FusionCharts.js. the code here does try to pass relevant parameters to the FlashVars parameter:

 

//Pass width and height to be appended as chartWidth and chartHeight

 

this.addVariable('chartWidth', w);

 

this.addVariable('chartHeight', h);

 

 

 

However, in the getSWFHTML () method the implementation is bad and does not append it to the parameter sent from the client

 

 

 

In getSWFHTML: function() {

 

 

 

} else { // PC IE

 

swfNode = '';

 

swfNode += '';

 

var params = this.getParams();

 

for(var key in params) {

 

swfNode += '';

 

}

 

var pairs = this.getVariablePairs().join("&");

 

if(pairs.length > 0) {swfNode += '';}

 

swfNode += "";

 

}

 

 

 

- flashvars is lowercase

 

- if the client passes a FlashVars param they are not appended.

 

 

 

The fix (done on MBM and BIT):

 

?

 

getSWFHTML: function() {

 

var swfNode = "";

 

if (navigator.plugins && navigator.mimeTypes && navigator.mimeTypes.length) {

 

// netscape plugin architecture

 

swfNode = '

 

swfNode += ' id="'+ this.getAttribute('id') +'" name="'+ this.getAttribute('id') +'" ';

 

var params = this.getParams();

 

var pairs = this.getVariablePairs().join("&");

 

for(var key in params) {

 

/*

 

HBR fix - pass variables to the FlashVars parameter

 

*/

 

//handle FlashVars

 

if("FlashVars"==key)

 

pairs += "&" + params[key];

 

else

 

swfNode += [key] +'="'+ params[key] +'" ';

 

}

 

//handle FlashVars

 

if(pairs.length > 0)

 

swfNode += 'FlashVars="'+ pairs +'"';

 

 

 

swfNode += '/>';

 

} else { // PC IE

 

swfNode = '';

 

swfNode += '';

 

var params = this.getParams();

 

var pairs = this.getVariablePairs().join("&");

 

for(var key in params) {

 

/*

 

HBR fix - pass variables to the FlashVars parameter

 

*/

 

//handle FlashVars

 

if("FlashVars"==key)

 

pairs += "&" + params[key];

 

else

 

swfNode += '';

 

}

 

//handle FlashVars

 

if(pairs.length > 0)

 

swfNode += '';

 

swfNode += "";

 

}

 

alert(swfNode);

 

return swfNode;

 

},

[FusionCharts Support]

Hi erez,

Thanks for the code that you have sent.

I have gone through your code and found that :

You are using this code:

var urlToXml = '';

 urlToXml = "&dataURL="+xml;

 so.addParam("type", "application/x-shockwave-flash");

   so.addParam("FlashVars", urlToXml);

   so.addParam("quality", "high");

   so.addParam("menu", "true");

   so.addParam("wmode", "opaque");

   so.addParam("pluginurl", "http://www.macromedia.com/go/getflashplayer");

 so.render(div.id);

* Please note we have provided FusionCharts.js to ease implementaion, Hence, instead of so many lines of code that you use, you can try using this which would ease your coding:

  so = new FusionCharts("swf/FusionCharts/" + swfFileName, charId , size[0], size[1], "1", "1");

  so.setDataURL(xml);

so.render(div.id);

This would add the chartWidth, chartHeight, DOMId, registerWithJS etc. in the FlashVars automatically. Hence, you might not pain yourself to manually build the FlashVars and assign it using addParam. This might break some implementaions that FusionCharts.js does and in some cases the charts might not work properly as expected.

* For special cases ofcourse you can add parameters like this in reverse way:

so.addParam("menu", "false");

This always comes true, by default. So, no need to specify this.

* You can use so.setTransparent(false) to set the chart opaque.

But, of course, many thanks for the enhancement code the that you provided, we won't call it a bug fix though.

It seems that you are using % sizes. If so, please render() the chart after the page gets loaded using window.onload or attachEvent/addEventListener etc. This would slove the issue in IE. I hope this issue does not occur in Firefox.