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 died and survived person</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, j = -1;
var age1died = 0, age2died = 0, age3died = 0, age4died = 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]);
died = (theTD[2] == "died") ? true : false;
if (value >= 18 && value <= 34) {
if (died) age1died += 1;
else age1 += 1;
}
else if (value >= 35 && value <= 50) {
if (died) age2died += 1;
else age2 += 1;
}
else if (value >= 51 && value <= 69) {
if (died) age3died += 1;
else age3 += 1;
}
else if (value >= 70 && value <= 87) {
if (died) age4died += 1;
else age4 += 1;
}
}
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Stacked Column chart for Four Age Group in Titanic"
},
axisX: {
title: "Four Age group",
},
axisY: {
interval: 50
},
legend: {
fontSize: 20
},
theme: "dark2", //"light1", "light2", "dark1", "dark2"
data: [
{
// Change type to "stackedArea", "stackedColumn", "column", "doughnut", "line", "splineArea" etc.
type: "stackedColumn",
showInLegend: true,
legendText: "died",
dataPoints: [
{ label: "Millennials died", y: age1died },
{ label: "Gen X died", y: age2died },
{ label: "Baby Boomers died", y: age3died },
{ label: "Silent generation died", y: age4died }
]
}, {
// Change type to "stackedArea", "stackedColumn", "column", "doughnut", "line", "splineArea" etc.
type: "stackedColumn",
showInLegend: true,
legendText: "survived",
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