Sign in to follow this  
hscottm

Cannot display charts in .js code

Recommended Posts

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

Share this post


Link to post
Share on other sites
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. :)

Share this post


Link to post
Share on other sites
Guest Basundhara Ghosal

Hi,

Glad to help you.

Keep smiling and keep FusionCharting. :)

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
Sign in to follow this