Javascript and XML

[pgsjoe]

The Problem:
Trying to read the "toolText" value.

The XML:

<dataSet id="Cumulative Spend" seriesName="Cumulative Spend">
		<set id="setID130" x="130" y="10152.00" toolText="A, Balaji   Days:130   Spend:10152.00"/>
		<set id="setID191" x="191" y="7472.27" toolText="Amason, Joseph   Days:191   Spend:7472.27"/>
		<set id="setID73" x="73" y="3360.00" toolText="Ambati, Srikanth   Days:73   Spend:3360.00"/>
</dataset>

The Javascript:

		//Now generate a tabular format of data returned as array
		var arrData = ourChart.getData();
		//If no data has been selected return an error
		if (arrData.length==0){
			alert("Please select atleast one data point on chart by drawing a rectangle");
			return;
		}
		var i,j;
		//Now we'll generate an HTML string for it
		var strHTML = "<table width='100%' align='center' cellpadding='2' class='text'>";
		for (i=0; i<arrData.length; i++){
			//Iterate through each row of data
			//First column contains the dataset id.
			//Add dataset id
			var dataSetID = arrData[i][0];
			strHTML = strHTML + "<tr><td bgColor='#F1F1F1'><b>" + dataSetID + "</b></td><td>";
			var infoSet = arrData[i][1];
			alert (infoSet);
//arrData[i][0] returns the string "Cumulative Spend"
//arrData[i][1] returns the setID as a string
	
			//Iterate through all the data in this dataset
			for (j=1; j<arrData[i].length; j++){
				//Add data to HTML code
				strHTML = strHTML + arrData[i][j];
				//Add separator comma to all but last item
				if (j<arrData[i].length-1){
					strHTML = strHTML  + ", ";
				}				
			}
			strHTML = strHTML + "</td></tr>";
		}
		//Close table tag
		strHTML = strHTML + "</table>";
		//Write the data to the required div
		var tableDiv = document.getElementById('tableDataContainer');	
		tableDiv.innerHTML = strHTML;
	}

I want to pull out the info contained under toolText, but don't know how to access it. Tried using getAttribute, but not sure if that's the right call to use on an array element that's pulling XML. Thanks in advance.

[dAEk]

It's not clear how you get the XML, so...
If the XML is fetched from an Ajax-call you can and should make use of the DOM and .responseXML instead of what you are doing now. It's so much more readable! There are Javascript libraries such as Prototype, JQuery among others that simplifies this even further.

After you have made the request you can step through the XML with the DOM:

(Code is not complete)

var dataSetNodes = responseXML.getElementsByTagName("dataSet");

for (var i=0; i<dataSetNodes.length; i++) {
	var setNodes = dataSetNodes[i].getElementsByTagName("set");
	
	for (var n=0; n<setNodes.length; n++) {
		var setNode = setNodes[n];
		
		var id = setNode.getAttribute("id");
		var x  = setNode.getAttribute("x");
		var y  = setNode.getAttribute("y");
		var toolText = setNode.getAttribute("toolText");
		
		//TODO: create html element/s and append it/them to the document.
	}
	
}

If your code is not built on Ajax, check this out: http://www.w3schools.com/dom/tryit.a...te_parsertest2
I'm not sure if there's a better way of dealing with XML in Javascript without using the XMLHTTPRequest object than this? How about browser compatibility?

Edit: Actually, check this instead: http://www.quirksmode.org/dom/importxml.html

[pgsjoe]

so in evaluating further, it turns out my problem isn't in the script I provided, it's actually in this script....

It's working by feeding an XML document into an SWF which then charts the data, and when you select certain points, it returns the info about those points. So when it's returning the info, there is no DOM, so you can't use DOM scripting. Anybody? Help?

Here's the big script. Maybe you can pinpoint what needs to change as I've had no such luck.

/**
 * FusionCharts: Flash Player detection and Chart embed 
 * 
 * Morphed from SWFObject (http://blog.deconcept.com/swfobject/) under MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 *
 */
if(typeof infosoftglobal == "undefined") var infosoftglobal = new Object();
if(typeof infosoftglobal.FusionChartsUtil == "undefined") infosoftglobal.FusionChartsUtil = new Object();
infosoftglobal.FusionCharts = function(swf, id, w, h, debugMode, registerWithJS, c, scaleMode, lang){
	if (!document.getElementById) { return; }
	
	//Flag to see whether data has been set initially
	this.initialDataSet = false;
	
	//Create container objects
	this.params = new Object();
	this.variables = new Object();
	this.attributes = new Array();
	
	//Set attributes for the SWF
	if(swf) { this.setAttribute('swf', swf); }
	if(id) { this.setAttribute('id', id); }
	if(w) { this.setAttribute('width', w); }
	if(h) { this.setAttribute('height', h); }
	
	//Set background color
	if(c) { this.addParam('bgcolor', c); }
	
	//Set Quality	
	this.addParam('quality', 'high');
	
	//Add scripting access parameter
	this.addParam('allowScriptAccess', 'always');
	
	//Pass width and height to be appended as chartWidth and chartHeight
	this.addVariable('chartWidth', w);
	this.addVariable('chartHeight', h);

	//Whether in debug mode
	debugMode = debugMode ? debugMode : 0;
	this.addVariable('debugMode', debugMode);
	//Pass DOM ID to Chart
	this.addVariable('DOMId', id);
	//Whether to registed with JavaScript
	registerWithJS = registerWithJS ? registerWithJS : 0;
	this.addVariable('registerWithJS', registerWithJS);
	
	//Scale Mode of chart
	scaleMode = scaleMode ? scaleMode : 'noScale';
	this.addVariable('scaleMode', scaleMode);
	//Application Message Language
	lang = lang ? lang : 'EN';
	this.addVariable('lang', lang);
}

infosoftglobal.FusionCharts.prototype = {
	setAttribute: function(name, value){
		this.attributes[name] = value;
	},
	getAttribute: function(name){
		return this.attributes[name];
	},
	addParam: function(name, value){
		this.params[name] = value;
	},
	getParams: function(){
		return this.params;
	},
	addVariable: function(name, value){
		this.variables[name] = value;
	},
	getVariable: function(name){
		return this.variables[name];
	},
	getVariables: function(){
		return this.variables;
	},
	getVariablePairs: function(){
		var variablePairs = new Array();
		var key;
		var variables = this.getVariables();
		for(key in variables){
			variablePairs.push(key +"="+ variables[key]);
		}
		return variablePairs;
	},
	getSWFHTML: function() {
		var swfNode = "";
		if (navigator.plugins && navigator.mimeTypes && navigator.mimeTypes.length) { 
			// netscape plugin architecture			
			swfNode = '<embed type="application/x-shockwave-flash" src="'+ this.getAttribute('swf') +'" width="'+ this.getAttribute('width') +'" height="'+ this.getAttribute('height') +'"  ';
			swfNode += ' id="'+ this.getAttribute('id') +'" name="'+ this.getAttribute('id') +'" ';
			var params = this.getParams();
			 for(var key in params){ swfNode += [key] +'="'+ params[key] +'" '; }
			var pairs = this.getVariablePairs().join("&");
			 if (pairs.length > 0){ swfNode += 'flashvars="'+ pairs +'"'; }
			swfNode += '/>';
		} else { // PC IE			
			swfNode = '<object id="'+ this.getAttribute('id') +'" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'+ this.getAttribute('width') +'" height="'+ this.getAttribute('height') +'">';
			swfNode += '<param name="movie" value="'+ this.getAttribute('swf') +'" />';
			var params = this.getParams();
			for(var key in params) {
			 swfNode += '<param name="'+ key +'" value="'+ params[key] +'" />';
			}
			var pairs = this.getVariablePairs().join("&");			
			if(pairs.length > 0) {swfNode += '<param name="flashvars" value="'+ pairs +'" />';}
			swfNode += "</object>";
		}
		return swfNode;
	},
	setDataURL: function(strDataURL){
		//This method sets the data URL for the chart.
		//If being set initially
		if (this.initialDataSet==false){
			this.addVariable('dataURL',strDataURL);
			//Update flag
			this.initialDataSet = true;
		}else{
			//Else, we update the chart data using External Interface
			//Get reference to chart object
			var chartObj = infosoftglobal.FusionChartsUtil.getChartObject(this.getAttribute('id'));
			chartObj.setDataURL(strDataURL);
		}
	},
	setDataXML: function(strDataXML){
		//If being set initially
		if (this.initialDataSet==false){
			//This method sets the data XML for the chart INITIALLY.
			this.addVariable('dataXML',strDataXML);
			//Update flag
			this.initialDataSet = true;
		}else{
			//Else, we update the chart data using External Interface
			//Get reference to chart object
			var chartObj = infosoftglobal.FusionChartsUtil.getChartObject(this.getAttribute('id'));
			chartObj.setDataXML(strDataXML);
		}
	},
	render: function(elementId){
		var n = (typeof elementId == 'string') ? document.getElementById(elementId) : elementId;
		n.innerHTML = this.getSWFHTML();
		return true;		
	}
}

// ------------ Fix for Out of Memory Bug in IE in FP9 ---------------//
/* Fix for video streaming bug */
infosoftglobal.FusionChartsUtil.cleanupSWFs = function() {
	if (window.opera || !document.all) return;
	var objects = document.getElementsByTagName("OBJECT");
	for (var i=0; i < objects.length; i++) {
		objects[i].style.display = 'none';
		for (var x in objects[i]) {
			if (typeof objects[i][x] == 'function') {
				objects[i][x] = function(){};
			}
		}
	}
}
// Fixes bug in fp9
infosoftglobal.FusionChartsUtil.prepUnload = function() {
	__flash_unloadHandler = function(){};
	__flash_savedUnloadHandler = function(){};
	if (typeof window.onunload == 'function') {
		var oldUnload = window.onunload;
		window.onunload = function() {
			infosoftglobal.FusionChartsUtil.cleanupSWFs();
			oldUnload();
		}
	} else {
		window.onunload = infosoftglobal.FusionChartsUtil.cleanupSWFs;
	}
}
if (typeof window.onbeforeunload == 'function') {
	var oldBeforeUnload = window.onbeforeunload;
	window.onbeforeunload = function() {
		infosoftglobal.FusionChartsUtil.prepUnload();
		oldBeforeUnload();
	}
} else {
	window.onbeforeunload = infosoftglobal.FusionChartsUtil.prepUnload;
}

/* Add Array.push if needed (ie5) */
if (Array.prototype.push == null) { Array.prototype.push = function(item) { this[this.length] = item; return this.length; }}

/* Function to return Flash Object from ID */
infosoftglobal.FusionChartsUtil.getChartObject = function(id)
{
  if (window.document[id]) {
      return window.document[id];
  }
  if (navigator.appName.indexOf("Microsoft Internet")==-1) {
    if (document.embeds && document.embeds[id])
      return document.embeds[id]; 
  } else {
    return document.getElementById(id);
  }
}
/* Aliases for easy usage */
var getChartFromId = infosoftglobal.FusionChartsUtil.getChartObject;
var FusionCharts = infosoftglobal.FusionCharts;