FusionCharts Forum / FusionWidgets v3 (previously FusionGadgets) / Using FusionWidgets / Javascript Embedding for IS? / Latest Posts

RE: Javascript Embedding for IS?

raq — Thu, 14 Jun 2007 16:38:09 GMT

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

RE: Javascript Embedding for IS?

Pallav — Tue, 12 Jun 2007 00:02:33 GMT

Hi,

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

RE: Javascript Embedding for IS?

raq — Mon, 11 Jun 2007 17:00:40 GMT

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

 </td>
<td>
<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>

 </td>

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

 </td>
</tr>

RE: Javascript Embedding for IS?

Pallav — Thu, 07 Jun 2007 01:37:08 GMT

Hi,

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

RE: Javascript Embedding for IS?

raq — Wed, 06 Jun 2007 10:37:11 GMT

Here the source from the "view source" of Firefox.

[code]
<table cellspacing="2" border="0">
<tr>
<td>
<table>
<tr>
<td colspan="3" class="gaugeTitle">Sales</td>
<tr>

<td>
<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>
 </td>
<td>
<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>
 </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.

RE: Javascript Embedding for IS?

Pallav — Fri, 01 Jun 2007 22:41:51 GMT

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

RE: Javascript Embedding for IS?

raq — Fri, 01 Jun 2007 09:38:14 GMT

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

RE: Javascript Embedding for IS?

Pallav — Sun, 27 May 2007 23:24:29 GMT

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

RE: Javascript Embedding for IS?

raq — Fri, 25 May 2007 12:49:49 GMT

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

RE: Javascript Embedding for IS?

Pallav — Thu, 24 May 2007 00:32:10 GMT

Hi,

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

Javascript Embedding for IS?

raq — Wed, 23 May 2007 17:50:33 GMT

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>