Javascript Embedding for IS?

[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>

Edited May 23, 2007 by Guest

[Pallav]

Hi,

The same JS can work with IS too. What error are you getting?

[raq]

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

[Pallav]

Can you make sure you've included FusionCharts.js in the page?

[raq]

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

[Pallav]

Can you please fwd me a copy of your output HTML?

[raq]

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.

[Pallav]

Hi,

This HTML doesn't seem to be using the JavaScript method of embedding - am I interpreting something wrong here?

[raq]

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>

[Pallav]

Hi,

I've just created a basic sample for you using Instrumentation Chart and FusionCharts JavaScript class. Please see the attachment.

ISChart.zip

[raq]

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.