SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
Thread: Javascript and XML
-
Aug 22, 2007, 13:27 #1
- Join Date
- Dec 2005
- Posts
- 47
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Javascript and XML
The Problem:
Trying to read the "toolText" value.
The XML:
Code:<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>
Code://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; }
-
Aug 22, 2007, 15:02 #2
- Join Date
- Oct 2003
- Location
- Stockholm, Sweden
- Posts
- 224
- Mentioned
- 0 Post(s)
- Tagged
- 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:(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. } }
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
-
Aug 24, 2007, 15:01 #3
- Join Date
- Dec 2005
- Posts
- 47
- Mentioned
- 0 Post(s)
- Tagged
- 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.
Code:/** * 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;
Bookmarks