Sign in to follow this  
jbdev

Can't Get A Chart To Display.

Recommended Posts

I'm very new to FusionCharts (yesterday) and I'm having problems with it. I went through the 'Creating My First Chart' in the documentation and couldn't get it to work. After playing with it for hours, I've finally got the code listed below. The SWF file is in the same directory as the web page. I not I'm loading the data correctly because the alert shows me all of the data correctly.

 

<html>
<head>
   <title>My First chart using FusionCharts</title>
   </script>

</head>
<body>
   <div id="chartContainer">
       FusionCharts will load here!
   </div>
       <script type="text/javascript" src="./StCol3D3.js" ></script>
     <script type="text/javascript">
    alert(dataString);
        var myChart = new FusionCharts("./Column3D.swf", "ChartId", "400", "300", "0", "0");
        mychart.setXMLData ( dataString );
        myChart.render("chartContainer");
   </script>
</body>
</html>

 

 

Can somebody please tell what I'm doing wrong.

 

TIA - Jeff.

Share this post


Link to post
Share on other sites
Guest Angshu

Hi,

Welcome to FusionCharts Forum! smile.gif

You would need to include FusionCharts.js i.e JavaScript class file in your HTML code to render the chart.

The JavaScript class file helps in embedding the chart SWF files into a web page, and also help in rendering JavaScript (HTML5) fallback charts. Additionally, it provides a JavaScript interface for controlling the chart.

Hope this helps.

Share this post


Link to post
Share on other sites

OK. I added the JavaScript file FushionChart.js so now my file looks like:

 

 

 

 

<html>
<head>
   <title>My First chart using FusionCharts</title>
   </script>

</head>
<body>
   <div id="chartContainer">
       FusionCharts will load here!
   </div>
       <script type="text/javascript" src="./StCol3D3.js" ></script>
       <script type="text/javascript" src="./FusionChart.js" ></script>
     <script type="text/javascript">
        var myChart = new FusionCharts("./Column3D.swf", "ChartId", "400", "300", "0", "0");
        mychart.setXMLData ( dataString );
        myChart.render("chartContainer");
   </script>
</body>
</html>

 

I still get no chart. Just the message FusionCharts will load here!

 

I'm using IE9 on Win 7.

 

Any thoughts?

 

 

 

 

 

Hi,

 

Welcome to FusionCharts Forum! smile.gif

 

You would need to include FusionCharts.js i.e JavaScript class file in your HTML code to render the chart.

 

The JavaScript class file helps in embedding the chart SWF files into a web page, and also help in rendering JavaScript (HTML5) fallback charts. Additionally, it provides a JavaScript interface for controlling the chart.

 

Hope this helps.

Share this post


Link to post
Share on other sites
Guest Angshu

Hi,

 

Thanks for your response.

 

If only the text "FusionCharts will load here!" is displayed, please check with the following:

 

1.Have you pasted the FusionCharts.js, jquery.min.js, FusionCharts.HC.js and FusionCharts.HC.Charts.js files in FusionCharts folder of MyFirstChart folder?

 

2. Have you included and provided the path of FusionCharts.js properly in your html page?

 

3. Are there any JavaScript syntax or runtime errors that might have halted the execution of FusionCharts functions?

 

4. Have you given different names for the chart's JavaScript variable and chart's ID?

Also, please set the last parameter of FusionCharts constructor to "1".

 

For ex: var myChart = new FusionCharts("./Column3D.swf", "ChartId", "400", "300", "0", "1");

 

Hope this helps.

Share this post


Link to post
Share on other sites

I'm having the same issue. I tried to follow the tutorial exactly.

 

My HTML (attached):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...ransitional.dtd">

<html> <head> <title>My First chart using FusionCharts</title> <script type="text/javascript" src="FusionCharts.js"> </script> </head> <body> <div id="chartContainer">FusionCharts will load here!</div> <script type="text/javascript"><!-- var myChart = new FusionCharts( "Column3D.swf", "myChartId", "400", "300", "0", "1" ); myChart.setXMLUrl("Data.xml"); myChart.render("chartContainer"); // --> </script> </body> </html>

 

My XML:

<?xml version="1.0" encoding="utf-8"?>

<chart caption='Weekly Sales Summary' xAxisName='Week' yAxisName='Sales' numberPrefix='$'> <set label='Week 1' value='14400' /> <set label='Week 2' value='19600' /> <set label='Week 3' value='24000' /> <set label='Week 4' value='15700' /> </chart>

 

 

jquery.min.js, FusionCharts.js, FusionCharts.HC.PowerCharts.js, FusionCharts.HC.js, Column3D.swf, Spline.swf, data.xml, weekly-sales.html are all in the "

Learning Fusion Charts\MyFirstChart\FusionCharts" folder

 

Please help! I'm sure there are many others users evaluating your product & not purchasing it due to this issue

 

Thanks

Share this post


Link to post
Share on other sites
Guest Angshu

Hi,

 

Welcome to FusionCharts Forum! smile.gif

 

It seems that you have not provided the correct path of FusionCharts. js and Column3D.swf file in your HTML page.

 

Please find the modified code below:

 

<html>
<head> <title>My First chart using FusionCharts</title> 
<script type="text/javascript" src="../FusionCharts/FusionCharts.js"> </script>
</head>
 <body> 
 <div id="chartContainer">FusionCharts will load here!</div>
  <script type="text/javascript">
var myChart = new FusionCharts("../FusionCharts/Column3D.swf", "myChartId", "400", "300", "0", "1" );
 myChart.setXMLUrl("Data.xml");
  myChart.render("chartContainer"); 
  </script>
   </body>
	</html>

 

 

Hope this works.

Share this post


Link to post
Share on other sites

Thanks that worked! The chart that I'm really interested in is the multi-level pie chart. I pasted the data from Gallery\Data\MLPie1.xml into data.xml and changed "Column3D.swf" to "MultiLevelPie.swf" and copied MultiLevelPie.swf into the folder in the hope that this would result in a working example, but it unfortunately didn't. My HTML (attached) now reads:

<html>

<head> <title>My First chart using FusionCharts</title>

<script type="text/javascript" src="../FusionCharts/FusionCharts.js"> </script>

</head>

<body>

<div id="chartContainer">FusionCharts will load here!</div>

<script type="text/javascript">

var myChart = new FusionCharts("../FusionCharts/MultiLevelPie.swf", "myChartId", "400", "300", "0", "1" );

myChart.setXMLUrl("data.xml");

myChart.render("chartContainer");

</script>

</body>

</html>

 

What should it be? Thanks

Manhattan_Organogram.html

Share this post


Link to post
Share on other sites
Guest Angshu

Hi,

 

Could you please send us the XML code to look into the issue?

 

Awaiting for your response.

Share this post


Link to post
Share on other sites

The XML (also attached) reads:

<?xml version="1.0" encoding="utf-8"?>

- <chart palette="2" piefillAlpha="34" pieBorderThickness="3" hoverFillColor="FDCEDA" pieBorderColor="FFFFFF" baseFontSize="9" useHoverColor="1" showLabels="1" caption="Organization Chart">

- <category label="CEO" hoverText="<B><U>Chief Technology Officer</U></B><BR>Mr. Lucas Smith<BR>Joined: 1988<BR>More details can come here..." fillColor="DBFF6C" link="n-http://www.InfoSoftGlobal.com/FusionCharts?Details=CTO">

- <category label="CTO" hoverText="<B><U>Chief Technology Officer</U></B><BR>Mr. Ed Harley<BR>Joined: 1988<BR>More details can come here..." fillColor="DBFF6C" link="n-http://www.InfoSoftGlobal.com/FusionCharts?Details=CTO">

- <category label="Proj. Manager" hoverText="<B><U>Project Manager</U></B><BR>Mr. Daniel Edwards">

<category label="Design" hoverText="<B><U>Design Team</U></B><BR><LI>Akhil Dhanuka<BR>Atrayee<BR>Samit Basak</LI>" />

<category label="Coding" hoverText="<B><U>Coding Team</U></B><BR><LI>Sanket Kumar<BR>Folko<BR>George Baker<BR>Andrew Hall<BR>Chris Schofield </LI>" />

<category label="Validate" hoverText="<B><U>Validation Team</U></B><BR><LI> Raju Sharma <BR>Ravi Srivastav </LI>" />

</category>

- <category label="Q & A Manager" hoverText="<B><U>Q & A Manager</U></B><BR>Mr. Lee Chong">

<category label="Testing Team" hoverText="<B><U>Testing Team</U></B><BR><LI> Nik Arora <BR>Jee Chou</LI>" />

</category>

- <category label="Architect" hoverText="<B><U>System Architecture Manager</U></B><BR>Mr. Rajiv Kumar">

<category label="Study" hoverText="<B><U>System Requirement Study Team</U></B><BR><LI> Raju Sharma <BR>Ravi Srivastav </LI>" />

<category label="Design" hoverText="<B><U>Design Team</U></B><BR><LI> Raju Sharma <BR>Ravi Srivastav <BR>Robin Smith <BR>Harry Tofel </LI>" />

</category>

</category>

- <category label="CFO" hoverText="<B><U>Chief Financial Officer</U></B><BR>Mr. John Smith<BR>Joined: 1987<BR>More details can come here..." fillColor="FBE299" link="n-http://www.InfoSoftGlobal.com/FusionCharts?Details=CFO">

- <category label="Payables" hoverText="Accounts Payable Team">

<category label="Salary" hoverText="Team for salary accounts maintenance and upkeep" />

<category label="Purchase" hoverText="Team for accounting of purchase of S/w and goods" />

<category label="Other" hoverText="Other Payments" />

</category>

- <category label="Receivables" hoverText="Accounts Receivables Team">

<category label="SW1" hoverText="Online Software Receipts Accounts" />

<category label="SW2" hoverText="Physical Software Receipts Accounts" />

<category label="SER1" hoverText="Services Collection" />

<category label="SER2" hoverText="Services Collection (Physical)" />

<category label="OTR" hoverText="Subscription and Other Collections" />

</category>

</category>

- <category label="CIO" hoverText="<B><U>Chief Information Officer</U></B><BR>Mr. David Brown<BR>Joined: 1992<BR>More details can come here..." fillColor="DAEDFC" link="n-http://www.InfoSoftGlobal.com/FusionCharts?Details=CIO">

- <category label="PR" hoverText="PR Team">

<category label="Packaging" hoverText="Packaging Staff" />

<category label="Inv Rel." hoverText="Investor Relations Upkeep" />

<category label="Marketing" hoverText="Marketing & Sales" />

</category>

- <category label="HR" hoverText="HR Team">

<category label="Selection" hoverText="Selection of Candidates" />

<category label="Deploying" hoverText="Deploying at required site" />

</category>

</category>

</category>

- <styles>

- <definition>

<style name="myHTMLFont" type="font" isHTML="1" />

<style name="captionFont" type="font" size="16" />

</definition>

- <application>

<apply toObject="TOOLTIP" styles="myHTMLFont" />

<apply toObject="CAPTION" styles="captionFont" />

</application>

</styles>

</chart>

 

Thanks

data.xml

Share this post


Link to post
Share on other sites

I copied the MultiPie.xml file to the "FusionCharts" folder and changed myChart.setXMLUrl("data.xml") to myChart.setXMLUrl("MultiPie.xml") in the HTML file (attached) which now reads:

<html>

<head> <title>My First chart using FusionCharts</title>

<script type="text/javascript" src="../FusionCharts/FusionCharts.js"> </script>

</head>

<body>

<div id="chartContainer">FusionCharts will load here!</div>

<script type="text/javascript">

var myChart = new FusionCharts("../FusionCharts/MultiLevelPie.swf", "myChartId", "400", "300", "0", "1" );

myChart.setXMLUrl("MultiPie.xml");

myChart.render("chartContainer");

</script>

</body>

</html>

 

But unfortunately it still doesn't display the chart. Any ideas why?

 

Thanks

Manhattan_Organogram.html

MultiPie.xml

Share this post


Link to post
Share on other sites
Guest Angshu

Hi,

 

I am afraid, we are unable to replicate the issue,as the code is working fine from our end.

 

Please find the screenshot attached for your reference.

 

Please make sure that you have provided correct path for FusionChart.js and MultiLevelPie.swf.

post-10517-0-61462100-1320673444_thumb.png

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