rendering 4 charts slow in IE9, but not in IE8

[Xiangjing Li]

Hi,

 

We are recently developing a dashboard including 4 charts (3 pie 3d charts and 1 column 3d chart). It is working well in IE8. But when we try to load the same page from the same host in IE9, charts rendering is much slower. In IE8, the 4 charts display within 2-3 seconds. In IE9, it would take more than 10 seconds. In a browser client, it even takes more than 20 seconds to show all charts. Please help review the XML data for 4 charts and the steps to render the 4 charts as below. 

 

Our Fusionchart version is :@version fusioncharts/3.3.1-sr2.19840

 

Looking forward to your feedback and suggestion.

 

Thanks,

Xiangjing

 

<steps>

1) using jQuery $.get to start a Ajax callback to request rending the 4 charts.

2) In backend Ajax response php function, 

    a) generate XML data as below

    call php function renderChart and echo its output, like:

 

        echo renderChart('./FusionChart/Pie3D.swf', '', $strXML, $render_div, $fw, 300, false, false);                    

         ......

        echo renderChart('./FusionChart/Column3D.swf', '', $chartXML, $render_div, $fw, 300, false, false);

 

    where:

      $strXML - is the xml data, 

      $render_div - is the div id

      $fw - is the width

 

 

3) When receiving Ajax callback, using jQuery html function to print out received data (output of function renderChart)

 

$('#div_graphs').html(data);

 

 

<XML data>

Pie chart 1:

 

<chart caption='LIM Status for All Clusters' palette='1' animation='1' showAboutMenuItem='0' pieYScale='20' pieRadius='100' formatNumberScale='1' numberPrefix='' pieSliceDepth='15' startingAngle='120' >  <set label='Load OK' value='4' isSliced='0' />  <set label='Load Busy' value='0' isSliced='0' /> <set label='Load Locked' value='0' isSliced='0' /> <set label='Load Other' value='8' isSliced='0' /> <styles> <definition> <style type='font' name='CaptionFont' color='666666' size='15' /> <style type='font' name='SubCaptionFont' bold='0' /> </definition> <application> <apply toObject='caption' styles='CaptionFont' /> <apply toObject='SubCaption' styles='SubCaptionFont' /> </application> </styles> </chart>

 

Pie chart 2:

 

<chart caption='Batch Status for All Clusters' palette='1' animation='1' showAboutMenuItem='0' pieYScale='20' pieRadius='100' formatNumberScale='1' numberPrefix='' pieSliceDepth='15' startingAngle='120' >  <set label='Batch OK' value='5' isSliced='0' /> <set label='Batch Closed' value='0' isSliced='0' /> <set label='Batch Other' value='7' isSliced='0' /> <styles> <definition> <style type='font' name='CaptionFont' color='666666' size='15' /> <style type='font' name='SubCaptionFont' bold='0' /> </definition> <application> <apply toObject='caption' styles='CaptionFont' /> <apply toObject='SubCaption' styles='SubCaptionFont' /> </application> </styles> </chart>

 

Pie chart 3:

 

<chart caption='Grid Status for All Clusters' palette='1' animation='1' showAboutMenuItem='0' pieYScale='20' pieRadius='100' formatNumberScale='1' numberPrefix='' pieSliceDepth='15' startingAngle='120' > <set label='Down/Diminished Hosts' value='8' isSliced='0' /> <set label='Busy/Closed Hosts' value='0' isSliced='0' /> <set label='Idle/Closed Hosts' value='0' isSliced='0' /> <set label='Low Resources Hosts' value='0' isSliced='0' /> <set label='Busy Hosts' value='1' isSliced='0' /> <set label='Idle w/Jobs Hosts' value='0' isSliced='0' /> <set label='Idle Hosts' value='3' isSliced='0' /> <set label='Starved Hosts' value='0' isSliced='0' /> <set label='Admin Down Hosts' value='0' isSliced='0' /> <styles> <definition> <style type='font' name='CaptionFont' color='666666' size='15' /> <style type='font' name='SubCaptionFont' bold='0' /> </definition> <application> <apply toObject='caption' styles='CaptionFont' /> <apply toObject='SubCaption' styles='SubCaptionFont' /> </application> </styles> </chart>

 

column chart 4:

 

<chart caption='Free Memory Slots Availability for All Clusters' palette='1' animation='1' formatNumberScale='0' numberPrefix='' labeldisplay='ROTATE' showValues='1' slantLabels='1' seriesNameInToolTip='0' sNumberSuffix='' plotSpacePercent='0' labelDisplay='STAGGER'><set label='Free 1G Slots' value='22' /><set label='Free 2G Slots' value='9' /><set label='Free 4G Slots' value='4' /><set label='Free 8G Slots' value='1' /><set label='Free 16G Slots' value='0' /><set label='Free 32G Slots' value='0' /><set label='Free 64G Slots' value='0' /><set label='Free 128G Slots' value='0' /><set label='Free 256g Slots' value='0' /><styles> <definition> <style type='font' name='CaptionFont' size='15' color='666666' /> <style type='font' name='SubCaptionFont' bold='0' /> </definition> <application> <apply toObject='caption' styles='CaptionFont' /> <apply toObject='SubCaption' styles='SubCaptionFont' /> </application>   </styles> </chart>

 

[Guest Sashibhusan]

Hi,

 

It seems the Ajax request/response for all the 4 charts, is taking more time, because of which the chart loading takes more time.

 

So, could you please check the below mentioned details, let me know your inputs?

 

a. Instead of getting back the PHP "renderChart()" output as Ajax response and executing the required JavaScript code from your HTML page in browser, will it be feasible for you to render the charts in the PHP file itself, like shown in our documentation: http://docs.fusioncharts.com/charts/contents/guide-for-web-developers/php/PHP_BasicExample.html

 

b. Please confirm, whether you are rendering Flash charts. If yes, please try once rendering in JavaScript mode and see if it helps. To render the charts in JavaScript mode, "FC_SetRenderer( "javascript" );" just before calling "renderChart()" PHP function.

 

c. Please confirm once, whether the data from server sent to browser in the code snippet "$('#div_graphs').html(data);" has only the XML data string that you have posted?

 

Awaiting your valuable response.

[Xiangjing Li]

Thanks for the suggestion. We did a code update and now rendering fusionchart is much faster in IE 9.

 

We used to start a AJax call call a backend php file to generate XML data and draw fusion charts. Then print out Ajax callback content to render fusionchart. It turned out a heavy task in IE 9.  

 

In the new process, we use fusionchart javascript API in browser to render charts by :

 

1) to create a new fusioncharts object

var myChart = new FusionCharts('./FusionChart/Pie3D.swf', fc_id, fw, 300);

 

2) set xml URL , strURL is a url for generating xml data 

myChart.setXMLUrl(strURL);

 

3)  render chart to a div id

myChart.render(div_id);

 

Now rendering chart in IE 9 is not slow. Thanks for the help!

[Guest Sashibhusan]

Glad that the suggestion was helpful for you.