SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2005
    0 Post(s)
    0 Thread(s)

    Javascript and XML

    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"/>
    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");
    		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.

  2. #2
    SitePoint Addict dAEk's Avatar
    Join Date
    Oct 2003
    Stockholm, Sweden
    0 Post(s)
    0 Thread(s)
    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:
    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:
    David Shamloo-Ekblad

    Go Habs! | For music addicts:, SongMeanings

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2005
    0 Post(s)
    0 Thread(s)
    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 ( under MIT License:
    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){
    			//Update flag
    			this.initialDataSet = true;
    			//Else, we update the chart data using External Interface
    			//Get reference to chart object
    			var chartObj = infosoftglobal.FusionChartsUtil.getChartObject(this.getAttribute('id'));
    	setDataXML: function(strDataXML){
    		//If being set initially
    		if (this.initialDataSet==false){
    			//This method sets the data XML for the chart INITIALLY.
    			//Update flag
    			this.initialDataSet = true;
    			//Else, we update the chart data using External Interface
    			//Get reference to chart object
    			var chartObj = infosoftglobal.FusionChartsUtil.getChartObject(this.getAttribute('id'));
    	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() {
    	} else {
    		window.onunload = infosoftglobal.FusionChartsUtil.cleanupSWFs;
    if (typeof window.onbeforeunload == 'function') {
    	var oldBeforeUnload = window.onbeforeunload;
    	window.onbeforeunload = function() {
    } 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;


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts