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:
This is a very informative and engaging blog post. The content is well-organized, easy to understand, and provides valuable insights for readers. I appreciate the effort put into explaining the topic with such clarity and detail. Students looking for english assignment help often benefit from accessing reliable resources and expert academic guidance to improve their writing and analytical skills. Thank you for sharing this helpful and educational content. I look forward to reading more insightful articles and learning from your future posts
ReplyDelete