How to load coordinates from xml into jqplot graph?
Hi all,
I'am new to Jquery and Jqplot. I have to create a website where a user can upload a xml file which should then
be shown as a graph. My main problem is that I dont't know how to extract the x/y-axis coordinates from the xml file and how I should put them into the Jqplot code..
I'm just trying right know and show you some Code I made... Dont't blame me^^ I'am doing this only for a few days..
Thats my very simple XML file with only x and y coordinates:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy® -->
<graph>
<note>
<x>2</x>
<y>5</y>
</note>
<note>
<x>3</x>
<y>5</y>
</note>
</graph>
Thats some Code I tried to read the coordinates and write them on the site. It worked but now I need to know how to use this for jqplot..:
<!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jqplot/jquery-1.4.4.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="jqplot/jquery.jqplot.css" />
</head>
<body>
<h1>Graphische Darstellung mit Hilfe von Jqplot</h1>
<br/>
<div id="chartdiv">
<br/>
<script type="text/javascript">
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",dname,false);
xhttp.send("");
return xhttp.responseXML;
}
xml=loadXMLDoc("graph2.xml");
path="//graph/note/x | //graph/note/y"
// code for IE
if (window.ActiveXObject)
{
var nodes=xml.selectNodes(path);
for (i=0;i<nodes.length;i++)
{
document.write(nodes[i].childNodes[0].nodeValue);
document.write("<br />");
}
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
{
var nodes=xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
var result=nodes.iterateNext();
while (result)
{
document.write(result.childNodes[0].nodeValue);
document.write("<br />");
result=nodes.iterateNext();
}
}
Well so far..
Thats how I would code the graph: The fix values for coordinates should know be replaced with the xml data.. maybe with the "result" variable?
$.jqplot('chartdiv' , [[[5, 2],[6,12],[7,120.1],[19,33.6]]],{ title:'Auswertung',
axes:{yaxis:{min:-10, max:240}},
series:[{color:'red'}]
});
Hope you can give me some good advice!
Thanks