GTU DV Lab -3- Develop Following Program Using HTML5 and JavaScript
3-G- Read the data XML file and draw Simple Chart
File Name-1= DV Lab3-g 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-G-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-g 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>9</x>
<y>16</y>
</point>
<point>
<x>10</x>
<y>21</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>14</x>
<y>27</y>
</point>
</data>
Output:
Great article! I really enjoyed reading your insights and found the information very helpful for students. Understanding complex physics concepts can be challenging, especially with tight academic deadlines. That's why many learners look for physics assignment help in Canada to improve their understanding and complete assignments with confidence. Your post highlights the importance of quality educational resources, and I appreciate the effort you've put into sharing such valuable knowledge. Keep up the excellent work!
ReplyDelete