redlightg20

Hello, we are currently using fusioncharts to display multiple charts and widgets on the screen. We are having an issue when displaying line and hbullet charts/widgets in IE7. When the chart is to be rendered by IE7, the browser locks up and displays a message -------------------- Stop running this script? A script on this page is causing Internet Explorer to run slowly. If it continues to run, your computer might become unresponsive. -------------------- This issue does not appear when using IE8 or Firefox. If I comment out the code to render the chart, the page comes up fine. Unfotunately, due to our environment, the users are forced to use IE7 only for the foreseeable future. I have also tried using the FusionCharts.js and Line.swf from the free FusionCharts package, but the result is still the same. The XML data is embedded in the HTML response. Here is what is rendered to create an hbullet chart. <script type="text/javascript"> var chart = new FusionCharts("/flash/fusion_widgets/HBullet.swf", "storage_pool_current_524216_flash", "100%", "100%", "0", "1" ); chart.setXMLData('<chart animation="1" autoScale="1" baseFontColor="D3D3D3" baseFontSize="12" bgAlpha="0" bgColor="000000" borderAlpha="100" borderThickness="1" bgRatio="0" canvasBorderAlpha="0" chartBottomMargin="4" chartLeftMargin="6" chartRightMargin="6" chartTopMargin="4" legendIconScale="1" legendBgColor="000000" manageResize="1" showBorder="0" showShadow="0" tooltipBgColor="000000" yAxisMinValue="0" lowerLimit="0" showTickMarks="0" showTickValues="0" colorRangeFillMix="" borderColor="303030" showValue="0" showLimits="0" plotFillColor="0376AF" plotFillPercent="50" adjustTM="1" upperLimit="64.2045" targetColor="FD7B03" numberSuffix=" GB"><colorRange><color minValue="0" maxValue="55.83" code="3E3E3E"/><color minValue="55.83" maxValue="64.2045" code="1F1F1F"/></colorRange><value>40.27</value><target>51.24</target></chart>'); chart.setTransparent(true); chart.render("storage_pool_current_524216"); </script> Any ideas?

Thanks for the response, Sumedh. Okay so I found the issue. Basically, the issue stems from the fact that I'm using percentages as my chart height (so it pulls the height/width of the parent element dynamically). Normally this works fine, but in this particular case, I am embedding charts inside of a table, where the parent element of the chart is a <td> (instead of <div> as exampled in the documentation). Since the size of the <td> elements are calculated dynamically, the code in FusionCharts.js that pulls the height and width of the parent element returns zero, causing the script to loop indefinitely until the specified message appears (perhaps it's waiting while the page is being rendered for the size of the element to change to something other than zero, I don't know). This issue apparently does not occur in IE8 or FF--the correct dimensions are passed to the chart object. To solve this, I ensured that in my CSS each chart's target <div> tag inside of a <td> tag have proper dimensions specified, and no longer rely on the dynamic dimensions that the browser specifies at the time of rendering the page. Perhaps in a future version, FusionCharts.js can be modified to silently end the loop when trying to pull the parent element's dimensions if it takes too long, and write out a detailed debug error instead looping until the browser decides to display this ugly message. IE is especially picky about table element dimensions, so developers should be aware of what occurs when using something other than a <div> as the parent element of a dynamically resized chart