Cannot display charts in .js code

[hscottm]

I have been using the "EMBEDDED OBJECT" html method to display my graphs, but there are still problems with IE, so I have been trying to switch to the other javascript method shown in the documentation which I have seen will fix this problem.

 

 

 

In my HTML file I have:

 

 

 

<div id="graph"></div>

 

 

 

I can make the charts appear no problem if I directly type in the script-based code into the HTML and the render/etc methods in a new div, for example:

 

 

 

<div id="chartdiv" align="left">Chart will appear here in div</div><script type="text/javascript">

 

var chart1 = new FusionCharts("../joe/Charts/FC_2_3_Pie2D.swf", "myChartID", "400", "250", "1", "0");

 

chart1.setDataURL("models/$model/maps/$shortoutfile.xml");

 

chart1.render("chartdiv");

 

</script>

 

 

 

 

 

however, the way my charts work is that the user presses a button on my HTML page, and there is an onClick=showGraph function call, where showGraph is in a separate "display.js" file.

 

 

 

If I use the basic <OBJECT> method within this display.js file, it works fine, like this:

 

 

 

var newHTML = "<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-44455354

 

0000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swfla

 

sh.cab#version=6,0,0,0" WIDTH="400" HEIGHT="200" id="FC_2_3_Pie3D"><PARA

 

M NAME=movie VALUE="../joe/Charts/FC_2_3_Pie3D.swf"><PARAM NAME="FlashVars"

 

VALUE="&dataURL=" + "path1/" + path2 + "/path3/" + xmlfile + ".xml&chartWidth

 

=400&chartHeight=200"><PARAM NAME=quality VALUE=high><PARAM NAME=bgcolor VALUE

 

=#FFFFFF><EMBED src="../joe/Charts/FC_2_3_Pie2D.swf" FlashVars="&dataURL=" +

 

"path1/" + path2 + "/path3/" + xmlfile + ".xml&chartWidth=400&chartHeight=200

 

" quality=high bgcolor=#FFFFFF WIDTH="400" HEIGHT="200" NAME="FC_2_3_Pie2D

 

" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.c

 

om/go/getflashplayer"></EMBED></OBJECT>";

 

 

 

graph.innerHTML = newHTML; (which puts this into the graph div defined above)

 

 

 

 

However when I try to incorporate the alternate JS code within the display.js file, like this:

 

 

 

graph.innerHTML = ('<div id="chartdiv">Chart will appear here</div><script type="text/javascript"> var chart1 = new FusionCharts("../joe/Charts/FC_2_3_Pie2D.swf", "myChartID", "400", "250", "1", "0"); chart1.setDataURL("path1/path2/path3/chart.xml"); chart1.render("chartdiv"); </script>');

 

 

 

nothing happens - the div's "chart will appear here" text is never replaced - I dont even get the usual errors (eg error loading XML) .. same thing if I take out the div id=chartdiv code..

 

 

 

Is there a code example available for how to do this that I have missed? Any ideas?

Edited July 30, 2010 by Guest

[hscottm]

no ideas? anyone from fusion charts team? I am happy to email whole code..

[Guest Basundhara Ghosal]

Hi,

Please try using the code mentioned below in your display.js file :-

Ref.- var chart1 = new FusionCharts("../joe/Charts/FC_2_3_Pie2D.swf", "myChartID", "400", "250", "1", "0");

  chart1.setDataURL("path1/path2/path3/chart.xml");

  chart1.render(graph);

I hope this helps.

[hscottm]

wow, that was a really dumb oversight on my part - that of course does exactly what it should.

 

 

 

thanks for the support.

 

 

 

-scott

[Guest Basundhara Ghosal]

Hi,

Glad to help you.

Keep smiling and keep FusionCharting.