<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Column-Line Chart using XML Data
</
title
>
<
script
type
=
"text/javascript"
src
=
</
script
>
<
script
type
=
"text/javascript"
src
=
</
script
>
<
style
>
.canvasjs-chart-tooltip {
pointer-events: auto !important;
}
</
style
>
<
script
type
=
"text/javascript"
>
$(document).ready(function () {
$("#btnID").click(function () {
var myarray = [];
var myLinearray = [];
$.get("employee.xml", function (data) {
$(data).find("employee").each(function () {
// Access to the object it belongs to
var $thisDataPoint = $(this);
// Return the text content of the element.
var x = $thisDataPoint.find("firstname").html();
var x1 = $thisDataPoint.find("lastname").html();
var y = $thisDataPoint.find("total_projects").html();
var exProjects =
$thisDataPoint.find("expected_projects").html();
var name = x + " " + x1;
// Add one or more values to the end of the array.
myarray.push(
{
y: parseFloat(y),
label: String(x),
name: String(name)
}
);
myLinearray.push(
{
y: parseFloat(exProjects),
label: String(x),
name: String(name),
}
);
}); // End find
var chart = new CanvasJS.Chart("chartID", {
animationEnabled: true,
axisY: {
title: "Total projects done"
},
toolTip: {
enabled: true,
},
data: [{
type: "column",
name: "Total Projects",
showInLegend: true,
color: "green",
dataPointWidth: 30,
indexLabelOrientation: "horizontal",
dataPoints: myarray,
},
{
type: "line",
name: "Expected Projects",
showInLegend: true,
yValueFormatString: "###",
color: "red",
dataPoints: myLinearray
}
]// End data
});// End chart
chart.render();
});// End get
});// End button click
});// End document ready
</
script
>
</
head
>
<
body
>
<
div
style
=
"text-align:center"
>
<
h1
style
=
"color:green"
>
GeeksforGeeks
</
h1
>
<
h3
>
Canvas JS Column & Line chart using XML data
</
h3
>
</
div
>
<
center
>
<
button
id
=
"btnID"
>
Render Chart from XML data
</
button
>
</
center
>
<
div
id
=
"chartID"
style="height:400px;
max-width:950px;
margin:0px auto;">
</
div
>
</
body
>
</
html
>