Friday, March 11, 2022

DV Lab -3-A & C- Develop Following Program Using HTML5 and JavaScript

GTU DV Lab -3- Develop Following Program Using HTML5 and JavaScript



3-A- Develop the simple bar chart usingTML5 CANVAS

File Name= DV Lab3a JavaScript Bar Charts.html
Program Code:

<!DOCTYPE HTML>
<html>
<head>  
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text:"GTU DV Lab-3-a-Fortune 500 Companies by Country"
},
axisX:{
interval: 1
},
axisY2:{
interlacedColor: "rgba(1,77,101,.2)",
gridColor: "rgba(1,77,101,.1)",
title: "Number of Companies"
},
data: [{
type: "bar",
name: "companies",
axisYType: "secondary",
color: "#014D65",
dataPoints: [
{ y: 3, label: "Sweden" },
{ y: 7, label: "Taiwan" },
{ y: 5, label: "Russia" },
{ y: 9, label: "Spain" },
{ y: 7, label: "Brazil" },
{ y: 7, label: "India" },
{ y: 9, label: "Italy" },
{ y: 8, label: "Australia" },
{ y: 11, label: "Canada" },
{ y: 15, label: "South Korea" },
{ y: 12, label: "Netherlands" },
{ y: 15, label: "Switzerland" },
{ y: 25, label: "Britain" },
{ y: 28, label: "Germany" },
{ y: 29, label: "France" },
{ y: 52, label: "Japan" },
{ y: 103, label: "China" },
{ y: 134, label: "US" }
]
}]
});
chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

Output:





3-C- Read the data .txt file and draw Simple Bar Chart

File Name= DV Lab3c JavaScript Bar Charts.html
Program Code:

<!DOCTYPE HTML>
<html>
<head>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">

window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "GTU DV LAB-3-c-My First Chart in CanvasJS"              
},
data: [              
{
// Change type to "doughnut", "line", "splineArea", etc.
type: "column",
dataPoints: [
{ label: "apple",  y: 50  },
{ label: "orange", y: 15  },
{ label: "banana", y: 25  },
{ label: "mango",  y: 90  },
{ label: "grape",  y: 28  }
]
}
]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>


Output:




No comments:

Post a Comment