Multiple Charts With Chrome

[systemservice]

We have a page where we have to display two separated graph (MSColumnLine3D.swf).

We are using different ChartId (1 and 2).

It works perfectly on Internet Explorer and Firefox but on Chrome we have a very strange result.

The first time we are be able to see Graph1, if we refresh the screen we can see Graph2 but Graph1 disapper!

It is like a toggle!

Any idea?

[Guest Sashibhusan]

Hi,

 

Please provide the relevant code snippet of how you are rendering the the graphs, to find the exact issue.

 

Awaiting inputs from your end.

[systemservice]

 

 

 

<div id=1> <!-- START Code Block for Chart 1 -->

 

 

 

<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="500" height="400" id="1">

 

 

 

<param name="allowScriptAccess" value="always" />

 

 

 

<param name="movie" value="/Charts/Column2D.swf"/>

 

 

 

<param name="FlashVars" value="&chartWidth=500&chartHeight=400&debugMode=0&dataXML=<chart caption='Monthly Revenue' xAxisName='Month' yAxisName='Revenue' numberPrefix='$' showValues='0'>

 

 

 

<set label='Jan' value='420000' />

 

 

 

<set label='Feb' value='910000' />

 

 

 

<set label='Mar' value='720000' />

 

 

 

<set label='Apr' value='550000' />

 

 

 

<set label='May' value='810000' />

 

 

 

<set label='Jun' value='510000' />

 

 

 

<set label='Jul' value='680000' />

 

 

 

<set label='Aug' value='620000' />

 

 

 

<set label='Sep' value='610000' />

 

 

 

<set label='Oct' value='490000' />

 

 

 

<set label='Nov' value='530000' />

 

 

 

<set label='Dec' value='330000' />

 

 

 

<trendLines>

 

 

 

<line startValue='700000' color='009933' displayvalue='Target' />

 

 

 

</trendLines>

 

 

 

<styles>

 

 

 

<definition>

 

 

 

<style name='CanvasAnim' type='animation' param='_xScale' start='0' duration='1' />

 

 

 

</definition>

 

 

 

<application>

 

 

 

<apply toObject='Canvas' styles='CanvasAnim' />

 

 

 

</application>

 

 

 

</styles>

 

 

 

</chart>" />

 

 

 

<param name="quality" value="high" />

 

 

 

<embed src="/Charts/Column2D.swf" FlashVars="&chartWidth=500&chartHeight=400&debugMode=0&dataXML=<chart caption='Monthly Revenue' xAxisName='Month' yAxisName='Revenue' numberPrefix='$' showValues='0'>

 

 

 

<set label='Jan' value='420000' />

 

 

 

<set label='Feb' value='910000' />

 

 

 

<set label='Mar' value='720000' />

 

 

 

<set label='Apr' value='550000' />

 

 

 

<set label='May' value='810000' />

 

 

 

<set label='Jun' value='510000' />

 

 

 

<set label='Jul' value='680000' />

 

 

 

<set label='Aug' value='620000' />

 

 

 

<set label='Sep' value='610000' />

 

 

 

<set label='Oct' value='490000' />

 

 

 

<set label='Nov' value='530000' />

 

 

 

<set label='Dec' value='330000' />

 

 

 

<trendLines>

 

 

 

<line startValue='700000' color='009933' displayvalue='Target' />

 

 

 

</trendLines>

 

 

 

<styles>

 

 

 

<definition>

 

 

 

<style name='CanvasAnim' type='animation' param='_xScale' start='0' duration='1' />

 

 

 

</definition>

 

 

 

<application>

 

 

 

<apply toObject='Canvas' styles='CanvasAnim' />

 

 

 

</application>

 

 

 

</styles>

 

 

 

</chart>" quality="high" width="500" height="400" name="1" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

 

 

 

</object>

 

 

 

<!-- END Code Block for Chart 1 --></div><div id=2> <!-- START Code Block for Chart 2 -->

 

 

 

<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="500" height="400" id="2">

 

 

 

<param name="allowScriptAccess" value="always" />

 

 

 

<param name="movie" value="/Charts/Column2D.swf"/>

 

 

 

<param name="FlashVars" value="&chartWidth=500&chartHeight=400&debugMode=0&dataXML=<chart caption='Yearly Revenue' xAxisName='Month' yAxisName='Revenue' numberPrefix='$' showValues='0'>

 

 

 

<set label='Jan' value='420000' />

 

 

 

<set label='Feb' value='910000' />

 

 

 

<set label='Mar' value='720000' />

 

 

 

<set label='Apr' value='550000' />

 

 

 

<set label='May' value='810000' />

 

 

 

<set label='Jun' value='510000' />

 

 

 

<set label='Jul' value='680000' />

 

 

 

<set label='Aug' value='620000' />

 

 

 

<set label='Sep' value='610000' />

 

 

 

<set label='Oct' value='490000' />

 

 

 

<set label='Nov' value='530000' />

 

 

 

<set label='Dec' value='330000' />

 

 

 

<trendLines>

 

 

 

<line startValue='700000' color='009933' displayvalue='Target' />

 

 

 

</trendLines>

 

 

 

<styles>

 

 

 

<definition>

 

 

 

<style name='CanvasAnim' type='animation' param='_xScale' start='0' duration='1' />

 

 

 

</definition>

 

 

 

<application>

 

 

 

<apply toObject='Canvas' styles='CanvasAnim' />

 

 

 

</application>

 

 

 

</styles>

 

 

 

</chart>" />

 

 

 

<param name="quality" value="high" />

 

 

 

<embed src="/Charts/Column2D.swf" FlashVars="&chartWidth=500&chartHeight=400&debugMode=0&dataXML=<chart caption='Yearly Revenue' xAxisName='Month' yAxisName='Revenue' numberPrefix='$' showValues='0'>

 

 

 

<set label='Jan' value='420000' />

 

 

 

<set label='Feb' value='910000' />

 

 

 

<set label='Mar' value='720000' />

 

 

 

<set label='Apr' value='550000' />

 

 

 

<set label='May' value='810000' />

 

 

 

<set label='Jun' value='510000' />

 

 

 

<set label='Jul' value='680000' />

 

 

 

<set label='Aug' value='620000' />

 

 

 

<set label='Sep' value='610000' />

 

 

 

<set label='Oct' value='490000' />

 

 

 

<set label='Nov' value='530000' />

 

 

 

<set label='Dec' value='330000' />

 

 

 

<trendLines>

 

 

 

<line startValue='700000' color='009933' displayvalue='Target' />

 

 

 

</trendLines>

 

 

 

<styles>

 

 

 

<definition>

 

 

 

<style name='CanvasAnim' type='animation' param='_xScale' start='0' duration='1' />

 

 

 

</definition>

 

 

 

<application>

 

 

 

<apply toObject='Canvas' styles='CanvasAnim' />

 

 

 

</application>

 

 

 

</styles>

 

 

 

</chart>" quality="high" width="500" height="400" name="2" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

 

 

 

</object>

 

 

 

<!-- END Code Block for Chart 2 --></div>

 

[systemservice]

I tried to solve in several ways. I created a simple php file.

 

<?php

 

require("FusionCharts.php");

 

echo "<div id=1>";

 

$strXML="<chart caption='Monthly Revenue' xAxisName='Month' yAxisName='Revenue' numberPrefix='$' showValues='0'>

   <set label='Jan' value='420000' />

   <set label='Feb' value='910000' />

   <set label='Mar' value='720000' />

   <set label='Apr' value='550000' />

   <set label='May' value='810000' />

   <set label='Jun' value='510000' />

   <set label='Jul' value='680000' />

   <set label='Aug' value='620000' />

   <set label='Sep' value='610000' />

   <set label='Oct' value='490000' />

   <set label='Nov' value='530000' />

   <set label='Dec' value='330000' />

   <trendLines>

      <line startValue='700000' color='009933' displayvalue='Target' /> 

   </trendLines>

   <styles>

      <definition>

         <style name='CanvasAnim' type='animation' param='_xScale' start='0' duration='1' />

      </definition>

      <application>

         <apply toObject='Canvas' styles='CanvasAnim' />

      </application>   

   </styles>

</chart>";

 

echo renderChartHTML("/Charts/Column2D.swf","1",$strXML,"1", 500, 400, false,false);

 

echo "</div><div id=2>";

 

 

$strXML="<chart caption='Yearly Revenue' xAxisName='Month' yAxisName='Revenue' numberPrefix='$' showValues='0'>

   <set label='Jan' value='420000' />

   <set label='Feb' value='910000' />

   <set label='Mar' value='720000' />

   <set label='Apr' value='550000' />

   <set label='May' value='810000' />

   <set label='Jun' value='510000' />

   <set label='Jul' value='680000' />

   <set label='Aug' value='620000' />

   <set label='Sep' value='610000' />

   <set label='Oct' value='490000' />

   <set label='Nov' value='530000' />

   <set label='Dec' value='330000' />

   <trendLines>

      <line startValue='700000' color='009933' displayvalue='Target' /> 

   </trendLines>

   <styles>

      <definition>

         <style name='CanvasAnim' type='animation' param='_xScale' start='0' duration='1' />

      </definition>

      <application>

         <apply toObject='Canvas' styles='CanvasAnim' />

      </application>   

   </styles>

</chart>";

 

echo renderChartHTML("/Charts/Column2D.swf","2",$strXML,"2", 500, 400, false,false);

 

echo "</div>";

[systemservice]

But with IE, Firefox and Safari works perfectly. With Chrome I can see only one graph.

[systemservice]

Any idea?

[atcorrih]

Any answers on this?

[Haritha]

Hi,

 

We have checked your code and following are our findings:

 

1. The method "renderChartHTML()" is deprecated. Please use "renderChart()" instead.

2. You need not pass anything to the second parameter since you are passing Data through String.

    Hence, you need to make your parameters look like this:

 

echo renderChart ("/Charts/Column2D.swf","",$strXML,"chart1", 500, 400, false,false);

 

Could you make the above the above changes and let us know if it works?