Pallav

Javascript Embedding for IS?

Recommended Posts

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 by Guest

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Hi,

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

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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.:)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now