Dynamic data from xml into Jqplot for pie chart Options
I have been trying to create a pie chart using an array that extracts data from an xml file. It does display the pie chart but the size of the sectors do not correspond to the values in the array. Surprisingly, the code works if I use a static array.
This is the xml file:
<?xml version="1.0" ?>
<A>
<a1>a1</a1>
<a2>a2</a2>
<C>20</C>
<C>30</C>
<C>50</C>
<C>60</C>
<C>70</C>
</A>
This is the javascript file(I have written only the main code):
var x=xmlDoc.getElementsByTagName("A");
var myvalues=new Array();
var staticarray = {5,5,5};
for (i=0;i<x.length;i++)
{
myvalues[i]=x[i].getElementsByTagName("C")[0].childNodes[0].nodeValue;
}
$(document)开发者_开发知识库.ready(function(){
$.jqplot.config.enablePlugins=true;
plot1 = $.jqplot('chart1', [myvalues]); // Doesn't work
plot2 = $.jqplot('chart2', [staticarray]); // Works
Use parseInt() to convert the node value to an integer.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="js/plugins/jqplot.pieRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
</head>
<body>
<div class="jqPlot" id="chart1" style="height: 480px; width: 90%;"></div>
<script type="text/javascript">
$.jqplot.config.enablePlugins = true;
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","test.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("C");
var myvalues=new Array();
for (i=0;i<x.length;i++) {
myvalues[i]=parseInt(x[i].childNodes[0].nodeValue);
}
$(document).ready(function(){
$.jqplot.config.enablePlugins=true;
plot1 = $.jqplot('chart1', [myvalues], {
seriesDefaults:{renderer:$.jqplot.PieRenderer}
});
});
</script>
</body>
</html>
加载中,请稍侯......
精彩评论