Data Visualization
(
3160717 )
Practical and Source Codes
<!DOCTYPE HTML>
<html>
<head>
<title>Showing the Data as a column chart for four age group</title>
<meta charset="utf-8">
<meta name="author" content="SidPro" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="Data visualization using javaScript and HTML" />
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/canvasjs.min.js"></script>
</head>
<body>
<h2>Showing the Data as a column chart for four age group</h2>
<div id="chartContainer" style="height: 600px; width: 100%;"></div>
</body>
<script type="text/javascript">
// Millennials = ages of 18 to 34
// Gen X = ages of 35 to 50
// Baby Boomers = ages of 51 to 69
// Silent generation = ages of 70 to 87
var age1 = 0, age2 = 0, age3 = 0, age4 = 0;
window.onload = function () {
//just change the name of .csv file to load file
$.get('data/titanic.csv', function (theData) {
theData = theData.replace(/"/g, '');
theData = theData.split(/\r?\n|\r/);
totalRows = theData.length;
for (let i = 1; i < totalRows; ++i) {
theTD = theData[i].split(',');
value = parseInt(theTD[4]);
if (value >= 18 && value <= 34) age1 += 1;
else if (value >= 35 && value <= 50) age2 += 1;
else if (value >= 51 && value <= 69) age3 += 1;
else if (value >= 70 && value <= 87) age4 += 1;
}
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Column chart for Four Age Group in Titanic"
},
theme: "dark1", //"light1", "light2", "dark1", "dark2"
data: [
{
// Change type to "column", "doughnut", "line", "splineArea", etc.
type: "column",
dataPoints: [
{ label: "Millennials", y: age1 },
{ label: "Gen X", y: age2 },
{ label: "Baby Boomers", y: age3 },
{ label: "Silent generation", y: age4 }
]
}
]
});
chart.render();
});
}
</script>
</html>
Go Back
No comments:
Post a Comment