raq

How does one use Javascript embedding to get around the IE "click to activate" problem with the Instrumentation Suite? The method described in the HOWTO works for FusionCharts but not IS. All I get is the default text (i.e. "Chart") when I try this. Here's the code from the browser: <div id='gauge_gwDiv' align='center'> Chart. </div> <script type="text/javascript"> var chart_gauge_gw = new FusionCharts("/flash/charts/FI2_Angular.swf", "gauge_gw", "160", "80", "0", "0"); chart_gauge_gw.setDataXML(" <chart upperLimit='30' lowerLimit='-30' numberSuffix='%25' decimalPrecision='0' majorTMNumber='7' majorTMHeight='5' majorTMThickness='1' majorTMColor='444444' minorTMNumber='4' minorTMColor='888888' minorTMHeight='3' pivotRadius='5' showBorder='0' gaugeOuterRadius='40' gaugeInnerRadius='5' gaugeAlpha='60' displayValueDistance='12' > <colorRange> <color minValue='-30' maxValue='-15' code='d3c0c0' /> <color minValue='-15' maxValue='5' code='dddddd' /> <color minValue='5' maxValue='30' code='e8f9e8'/> </colorRange> <dials> <dial value='0' bgColor='333300' borderAlpha='0' baseWidth='4' topWidth='1' radius='40'/> </dials> </chart> "); chart_gauge_gw.render("gauge_gwDiv"); </script>

Thanks Pallav. That helped me track it down. It turns out that the IS charts don't like newlines in the data xml. (If you're using setDataXML()) # this works (gsub deletes the newlines from the data XML string) renderChart("FI2_Angular.swf", "", getGaugeStr(val).gsub(/\n/, ''), 'gauge_'+id, 160, 80, false, false) # this does not renderChart("FI2_Angular.swf", "", getGaugeStr(val), 'gauge_'+id, 160, 80, false, false) Works now.

Yes, you're right, I flipped it back to using renderChartHtml to get it to show something. Here's the Javascript version: <table> <tr> <td colspan="3" class="gaugeTitle">Sales</td> <tr> <td><!-- START Script Block for Chart gauge_gw --> <div id='gauge_gwDiv' align='center'> Chart. </div> <script type="text/javascript"> var chart_gauge_gw = new FusionCharts("/flash/charts/FI2_Angular.swf", "gauge_gw", "160", "80", "0", "0"); chart_gauge_gw.setDataXML(" <chart upperLimit='30' lowerLimit='-30' numberSuffix='%25' decimalPrecision='0' majorTMNumber='7' majorTMHeight='5' majorTMThickness='1' majorTMColor='444444' minorTMNumber='4' minorTMColor='888888' minorTMHeight='3' pivotRadius='5' showBorder='0' gaugeOuterRadius='40' gaugeInnerRadius='5' gaugeAlpha='60' displayValueDistance='12' > <colorRange> <color minValue='-30' maxValue='-15' code='d3c0c0' /> <color minValue='-15' maxValue='5' code='dddddd' /> <color minValue='5' maxValue='30' code='e8f9e8'/> </colorRange> <dials> <dial value='0' bgColor='333300' borderAlpha='0' baseWidth='4' topWidth='1' radius='40'/> </dials> </chart> "); chart_gauge_gw.render("gauge_gwDiv"); </script> <!-- END Script Block for Chart gauge_gw --> </td> <td><!-- START Script Block for Chart gauge_gm --> <div id='gauge_gmDiv' align='center'> Chart. </div> <script type="text/javascript"> var chart_gauge_gm = new FusionCharts("/flash/charts/FI2_Angular.swf", "gauge_gm", "160", "80", "0", "0"); chart_gauge_gm.setDataXML(" <chart upperLimit='30' lowerLimit='-30' numberSuffix='%25' decimalPrecision='0' majorTMNumber='7' majorTMHeight='5' majorTMThickness='1' majorTMColor='444444' minorTMNumber='4' minorTMColor='888888' minorTMHeight='3' pivotRadius='5' showBorder='0' gaugeOuterRadius='40' gaugeInnerRadius='5' gaugeAlpha='60' displayValueDistance='12' > <colorRange> <color minValue='-30' maxValue='-15' code='d3c0c0' /> <color minValue='-15' maxValue='5' code='dddddd' /> <color minValue='5' maxValue='30' code='e8f9e8'/> </colorRange> <dials> <dial value='0' bgColor='333300' borderAlpha='0' baseWidth='4' topWidth='1' radius='40'/> </dials> </chart> "); chart_gauge_gm.render("gauge_gmDiv"); </script> <!-- END Script Block for Chart gauge_gm --> </td> <td><!-- START Script Block for Chart gauge_gy --> <div id='gauge_gyDiv' align='center'> Chart. </div> <script type="text/javascript"> var chart_gauge_gy = new FusionCharts("/flash/charts/FI2_Angular.swf", "gauge_gy", "160", "80", "0", "0"); chart_gauge_gy.setDataXML(" <chart upperLimit='30' lowerLimit='-30' numberSuffix='%25' decimalPrecision='0' majorTMNumber='7' majorTMHeight='5' majorTMThickness='1' majorTMColor='444444' minorTMNumber='4' minorTMColor='888888' minorTMHeight='3' pivotRadius='5' showBorder='0' gaugeOuterRadius='40' gaugeInnerRadius='5' gaugeAlpha='60' displayValueDistance='12' > <colorRange> <color minValue='-30' maxValue='-15' code='d3c0c0' /> <color minValue='-15' maxValue='5' code='dddddd' /> <color minValue='5' maxValue='30' code='e8f9e8'/> </colorRange> <dials> <dial value='0' bgColor='333300' borderAlpha='0' baseWidth='4' topWidth='1' radius='40'/> </dials> </chart> "); chart_gauge_gy.render("gauge_gyDiv"); </script> <!-- END Script Block for Chart gauge_gy --> </td> </tr>

Here the source from the "view source" of Firefox. <table cellspacing="2" border="0"> <tr> <td> <table> <tr> <td colspan="3" class="gaugeTitle">Sales</td> <tr> <td><!-- START Code Block for Chart gauge_gw --> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="160" height="80" id="gauge_gw"> <param name="allowScriptAccess" value="always" /> <param name="movie" value="/flash/charts/FI2_Angular.swf"/> <param name="FlashVars" value="&chartWidth=160&chartHeight=80&debugMode=0&dataXML= <chart upperLimit='30' lowerLimit='-30' numberSuffix='%25' decimalPrecision='0' majorTMNumber='7' majorTMHeight='5' majorTMThickness='1' majorTMColor='444444' minorTMNumber='4' minorTMColor='888888' minorTMHeight='3' pivotRadius='5' showBorder='0' gaugeOuterRadius='40' gaugeInnerRadius='5' gaugeAlpha='60' displayValueDistance='12' > <colorRange> <color minValue='-30' maxValue='-15' code='d3c0c0' /> <color minValue='-15' maxValue='5' code='dddddd' /> <color minValue='5' maxValue='30' code='e8f9e8'/> </colorRange> <dials> <dial value='0' bgColor='333300' borderAlpha='0' baseWidth='4' topWidth='1' radius='40'/> </dials> </chart> " /> <param name="quality" value="high" /> <embed src="/flash/charts/FI2_Angular.swf" FlashVars="&chartWidth=160&chartHeight=80&debugMode=0&dataXML= <chart upperLimit='30' lowerLimit='-30' numberSuffix='%25' decimalPrecision='0' majorTMNumber='7' majorTMHeight='5' majorTMThickness='1' majorTMColor='444444' minorTMNumber='4' minorTMColor='888888' minorTMHeight='3' pivotRadius='5' showBorder='0' gaugeOuterRadius='40' gaugeInnerRadius='5' gaugeAlpha='60' displayValueDistance='12' > <colorRange> <color minValue='-30' maxValue='-15' code='d3c0c0' /> <color minValue='-15' maxValue='5' code='dddddd' /> <color minValue='5' maxValue='30' code='e8f9e8'/> </colorRange> <dials> <dial value='0' bgColor='333300' borderAlpha='0' baseWidth='4' topWidth='1' radius='40'/> </dials> </chart> " quality="high" width="160" height="80" name="gauge_gw" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> <!-- END Code Block for Chart gauge_gw --> </td> <td><!-- START Code Block for Chart gauge_gm --> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="160" height="80" id="gauge_gm"> <param name="allowScriptAccess" value="always" /> <param name="movie" value="/flash/charts/FI2_Angular.swf"/> <param name="FlashVars" value="&chartWidth=160&chartHeight=80&debugMode=0&dataXML= <chart upperLimit='30' lowerLimit='-30' numberSuffix='%25' decimalPrecision='0' majorTMNumber='7' majorTMHeight='5' majorTMThickness='1' majorTMColor='444444' minorTMNumber='4' minorTMColor='888888' minorTMHeight='3' pivotRadius='5' showBorder='0' gaugeOuterRadius='40' gaugeInnerRadius='5' gaugeAlpha='60' displayValueDistance='12' > <colorRange> <color minValue='-30' maxValue='-15' code='d3c0c0' /> <color minValue='-15' maxValue='5' code='dddddd' /> <color minValue='5' maxValue='30' code='e8f9e8'/> </colorRange> <dials> <dial value='0' bgColor='333300' borderAlpha='0' baseWidth='4' topWidth='1' radius='40'/> </dials> </chart> " /> <param name="quality" value="high" /> <embed src="/flash/charts/FI2_Angular.swf" FlashVars="&chartWidth=160&chartHeight=80&debugMode=0&dataXML= <chart upperLimit='30' lowerLimit='-30' numberSuffix='%25' decimalPrecision='0' majorTMNumber='7' majorTMHeight='5' majorTMThickness='1' majorTMColor='444444' minorTMNumber='4' minorTMColor='888888' minorTMHeight='3' pivotRadius='5' showBorder='0' gaugeOuterRadius='40' gaugeInnerRadius='5' gaugeAlpha='60' displayValueDistance='12' > <colorRange> <color minValue='-30' maxValue='-15' code='d3c0c0' /> <color minValue='-15' maxValue='5' code='dddddd' /> <color minValue='5' maxValue='30' code='e8f9e8'/> </colorRange> <dials> <dial value='0' bgColor='333300' borderAlpha='0' baseWidth='4' topWidth='1' radius='40'/> </dials> </chart> " quality="high" width="160" height="80" name="gauge_gm" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> <!-- END Code Block for Chart gauge_gm --> </td> ...Etc... I have <script src="/javascripts/PowerMap.js?1161381164" type="text/javascript"> <script src="/javascripts/FusionCharts.js?1160006144" type="text/javascript"> in the section of the page.

I'm pretty sure I've got the .js file included because other, "regular" charts on the page work, just not the instrumentation gauges.

I don't get any errors, the chart just doesn't plot. All I see is the default text. ("Chart")