GTU DV Lab -3- Develop Following Program Using HTML5 and JavaScript
3-F- Read the data XML file and draw Data Table
File Name-1= DV Lab3-f draw Data Table.html
Program Code:
<!DOCTYPE html>
<html>
<head>
<title>Chart using XML Data</title>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function() {
var dataPoints = [];
$.get("https://canvasjs.com/services/data/datapoints.php?xstart=5&ystart=10&length=10&type=xml", function(data) {
$(data).find("point").each(function () {
var $dataPoint = $(this);
var x = $dataPoint.find("x").text();
var y = $dataPoint.find("y").text();
dataPoints.push({x: parseFloat(x), y: parseFloat(y)});
});
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "GTU DV LAB-3-f-Chart Using XML Data",
},
data: [{
type: "column",
dataPoints: dataPoints,
}]
});
chart.render();
});
}
</script>
</head>
<body>
<div id="chartContainer" style="width:100%; height:300px;"></div>
</body>
</html>
Here we have to write 2-files.
Second file is XML file which is shown below.
File Name-2= DV Lab3-f XML file.xml
Program Code:
<?xml version="1.0"?>
<data>
<point>
<x>5</x>
<y>8</y>
</point>
<point>
<x>6</x>
<y>7</y>
</point>
<point>
<x>7</x>
<y>10</y>
</point>
<point>
<x>8</x>
<y>15</y>
</point>
<point>
<x>80</x>
<y>16</y>
</point>
<point>
<x>20</x>
<y>23</y>
</point>
<point>
<x>11</x>
<y>22</y>
</point>
<point>
<x>12</x>
<y>26</y>
</point>
<point>
<x>13</x>
<y>29</y>
</point>
<point>
<x>45</x>
<y>27</y>
</point>
</data>
Output:
No comments:
Post a Comment