I am currently experimenting with XML and JavaScript to generate a donut chart.
I attempted to implement this JS code. However, I am struggling to create XML that is compatible with the JS.
var SCIENCE = 0;
var ART = 0;
var MATH = 0;
$(document).ready(function() {
$.ajax({
type: "GET",
url: "abc.xml",
dataType: "xml",
success: function(xml) {
var prog = $(this).text();
$(xml).find('course').each(function() {
var prog = $(this).text();
if (prog == "SCIENCE") {
SCIENCE++;
} else if (prog == "ART") {
ART++;
} else if (prog == "MATH") {
MATH++;
}
});
visualizeIt();
},
error: function() {
alert("An error occurred while processing XML file.");
}
});
});
function visualizeIt() {
var total = SCIENCE + ART + MATH;
var pSCIENCE = (SCIENCE / total) * 100;
var pART = (ART / total) * 100;
var pMATH = (MATH / total) * 100;
var width = 960,
height = 500,
radius = Math.min(width, height) / 2;
var vis = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var cScale = d3.scale.linear().domain([0, 100]).range([0, 2 * Math.PI])
data = [
[0, pSCIENCE, "#3399FF", "SCIENCE"],
[pSCIENCE, pSCIENCE + pART, "#FF9966", "ART"],
[pSCIENCE + pART, 100, "#FF99FF", "MATH"]
]
var arc = d3.svg.arc()
.innerRadius(150)
.outerRadius(220)
.startAngle(function(d) {
return cScale(d[0]);
})
.endAngle(function(d) {
return cScale(d[1]);
});
var g = vis.selectAll(".arc")
.data(data)
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function(d) {
return d[2];
});
g.append("text")
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + " ) ";
})
.attr("dy", ".35em")
.style("text-anchor", "middle")
.text(function(d) {
return d[3];
});
}I am new to working with XML. I am uncertain about how to structure the XML code to interact with the JS.
Any guidance on this matter would be greatly appreciated.