GTU DV Lab -3- Develop Following Program Using HTML5 and JavaScript
3-H- Read JSON Data and draw Data Table
File Name-1= DV Lab3h JavaScript Bar Charts json1.html
Program Code:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "GTU DV LAB-3-H-Fruits sold in First & Second Quarter"
},
data: [ //array of dataSeries
{ //dataSeries - first quarter
/*** Change type "column" to "bar", "area", "line" or "pie"***/
type: "column",
name: "First Quarter",
dataPoints: [
{ label: "banana", y: 58 },
{ label: "orange", y: 29 },
{ label: "apple", y: 80 },
{ label: "mango", y: 74 },
{ label: "grape", y: 64 }
]
},
{ //dataSeries - second quarter
type: "column",
name: "Second Quarter",
dataPoints: [
{ label: "banana", y: 63 },
{ label: "orange", y: 73 },
{ label: "apple", y: 88 },
{ label: "mango", y: 77 },
{ label: "grape", y: 60 }
]
}
]
});
chart.render();
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
</body>
</html>
Output:
No comments:
Post a Comment