populate FusionCharts with XML data AJAX

[mwl707]

Hi I have a js file that uses ajax to get a XML doc from a php script . The XML file forms the data to draw a Fusion Chart. I know I am getting the XML data ok but FusionCharts will not draw it . The message where i would expect the chart is 'no data to display'

 

I would really appreciate any help , thanks

 

 

 

[ code ]

 

(FusionCharts.js is included earlier in my script)

 

 

 

if(XMLHttpRequestObject) {

 

 

 

XMLHttpRequestObject.open("GET", "chart.php?job="+job, true);

 

XMLHttpRequestObject.onreadystatechange = function() {

 

if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {

 

var xdoc = XMLHttpRequestObject.responseXML;

 

 

 

var chart1 = new FusionCharts("Pie3D.swf", "chart1Id", "400", "300", "0", "1");

 

chart1.setDataXML(xdoc);

 

chart1.render("chart1div");

 

[ / code ]

 

 

 

chart.php produces this XML data (I have removed the <> for display purposes

 

 

 

 

 

chart caption='ADI Chart Test '

 

set label='Driver' value='12.25' /

 

set label='Other Staff' value='223.21' /

 

set label='Equipment' value='0.00' /

 

set label='Additional Items' value='0.00' /

 

set label='Vehicle Fuel' value='0.00' /

 

set label='Accomodation' value='0.00' /

 

set label='Generator Fuel' value='0.00' /

 

/chart

[Guest Rajroop]

Hello,

 

 

 

Welcome to the Forum!

 

 

 

Could you please post as attachment your entire code so we may take a look?

 

 

 

Also, please check the following link and see if it helps!

 

Ref.- http://www.fusioncharts.com/docs/?Debug/Basic.html

 

 

 

Hope this helps. Looking forward to your reply.

[mwl707]

Thanks for your reply. I have the files but I am unable to upload them - the system will not let me so here are the JS and PHP file

 

function drawchart(job,type) {





// browser script 

var mozillaFlag = false; 

var XMLHttpRequestObject = false; 

if (window.XMLHttpRequest) {

       XMLHttpRequestObject = new XMLHttpRequest();

       XMLHttpRequestObject.overrideMimeType("text/xml");

	 mozillaFlag = true;

} else if (window.ActiveXObject) {

       XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");

}





if(XMLHttpRequestObject) {





XMLHttpRequestObject.open("GET", "chart.php?job="+job, true);



XMLHttpRequestObject.onreadystatechange = function() { 

if (XMLHttpRequestObject.readyState == 4 &&  XMLHttpRequestObject.status == 200) { 

var xdoc = XMLHttpRequestObject.responseXML;



        var chart1 = new FusionCharts("Pie3D.swf", "chart1Id", "400", "300", "0", "1" ); 

	 chart1.setDataXML(xdoc);

        chart1.render("chart1div");



} 

} 

XMLHttpRequestObject.send(null); 

}

} // end of function    

 

and here is the php file

 

 

 

<?php 

header ("Content-type: text/xml") ;

echo '<?xml version="1.0"?>';



$jobnumber = $_GET['job'] ;

$type = $_GET['type'] ;









// Make a MySQL Connection

include '../database_sql/dbconnect.php' ;



$result = mysql_query("SELECT * FROM event WHERE jobnumber = '$jobnumber' ")  ;



$row = mysql_fetch_array($result) ;







	// create XML data for fusion chart    



 		echo  "";



	$ar				  = array("driver", "staff", "equip", "addit", "fuel", "accom", "generator" ) ;

	$real_name = array("Driver", "Other Staff", "Equipment", "Additional Items", "Vehicle Fuel", "Accomodation", "Generator Fuel" ) ; 

	$leng = sizeof($ar) ; 

	for ($i= 0; $i< $leng; $i++) {

		$string = "cost_" .  $ar[$i] ;

		$readable  = $real_name[$i] ; 

		$value = $row[$string] ; 

	 	echo  "";



		} 

  echo "";	







?>

[Guest Madhumita]

Hello,

It seems that you have rendered the chart in chart1div , but you have not defined the div anywhere.

Please define a div with div id='chart1div' where the chart will render.

e.g. <div id="chart1div">Chart will render here</div>

Hope this helps.

[mwl707]

Hi Thanks for your help but I have another page which draws a table and does specify the div.

 

 

 

For the avoidance of doubt if i use this

 

 

 

xdoc = "" ;

 

 

 

prior to the

 

 

 

var chart1 = new FusionCharts("Pie3D.swf", "chart1Id", "400", "300", "0", "1" );

 

chart1.setDataXML(xdoc);

 

chart1.render("chart1div");

 

 

 

all is well and the chart displays fine. This problem is getting the generated code back using XML and Ajax

 

 

 

thanks

[mwl707]

Hi Thanks for your help but I have another page which draws a table and does specify the div.

 

 

 

For the avoidance of doubt if i use this

 

 

 

xdoc = "" 

 

 

 

prior to the

 

 

 

var chart1 = new FusionCharts("Pie3D.swf", "chart1Id", "400", "300", "0", "1" );

 

chart1.setDataXML(xdoc);

 

chart1.render("chart1div");

 

 

 

all is well and the chart displays fine. This problem is getting the generated code back using XML and Ajax

 

 

 

thanks

[mwl707]

Hi Thanks for your help but I have another page which draws a table and does specify the div.

 

 

 

For the avoidance of doubt if i use this

 

 

 

xdoc = "" 

 

 

 

prior to the

 

 

 

var chart1 = new FusionCharts("Pie3D.swf", "chart1Id", "400", "300", "0", "1" );

 

chart1.setDataXML(xdoc);

 

chart1.render("chart1div");

 

 

 

all is well and the chart displays fine. This problem is getting the generated code back using XML and Ajax

 

 

 

thanks

[rohit.kumar]

Hello,

 

 

 

Could you please use responseText instead of responseXML and try once?

 

 

 

Example:

 

var xdoc = XMLHttpRequestObject.responseText; in place of var xdoc = XMLHttpRequestObject.responseXML;.

 

 

 

Hope this helps.

 

 

 

Regards,

 

Rohit Kumar

[mwl707]

Hi Rohit,

 

 

 

Thanks very much for your help !. it now works a treat. But just out of interest why would the official xml formatting not work ??

 

 

 

Anyway thanks once again -

 

 

 

Mick

[rohit.kumar]

Hi,

 

 

 

Welcome, we are glad it helped.

 

The ResponseXML property returns an XML document object and responseText returns the HTTP response as a string. FusionCharts setDataXML need XML as a plane text to render.

 

 

 

 

 

Regards,

 

Rohit Kumar