Data Visualization
( 3160717 )
Practical and Source Codes
<!DOCTYPE html>
<html lang="en-IN" dir="ltr">
<head>
<title>Read Text File to Data Table</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>
<style>
#mytable {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#mytable td, #mytable th {
border: 1px solid #ddd;
padding: 8px;
}
#mytable tr:nth-child(even){background-color: #f2f2f2;}
#mytable tr:hover {background-color: #ddd;}
#mytable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: cornflowerblue;
color: white;
}
</style>
</head>
<body>
<h1>Get data from text file</h1>
<table id="mytable">
</table>
</body>
<script>
var content = "";
$( document ).ready(function() {
//just change the name of .txt file to load file
$.get('data/data.txt', function(theData) {
theData = theData.replace(/\r/g,'');
theData = theData.replace(/\t/g,' ');
theData = theData.split('\n');
totalRows = theData.length;
theHead = theData[0].split(' ');
content += "<tr>";
theHead.forEach(TH);
content += "</tr>";
for(let i=1;i<totalRows;++i){
theTD = theData[i].split(' ');
content += "<tr>";
theTD.forEach(TD);
content += "</tr>";
}
$('#mytable').html(content);
});
});
function TH(value){
content += "<th>" + value + "</th>";
}
function TD(value){
content += "<td>" + value + "</td>";
}
</script>
</html>
Data.txt
month_number facecream facewash toothpaste bathingsoap shampoo moisturizer total_units total_profit
1 2500 1500 5200 9200 1200 1500 21100 211000
2 2630 1200 5100 6100 2100 1200 18330 183300
3 2140 1340 4550 9550 3550 1340 22470 224700
4 3400 1130 5870 8870 1870 1130 22270 222700
5 3600 1740 4560 7760 1560 1740 20960 209600
6 2760 1555 4890 7490 1890 1555 20140 201400
7 2980 1120 4780 8980 1780 1120 29550 295500
8 3700 1400 5860 9960 2860 1400 36140 361400
9 3540 1780 6100 8100 2100 1780 23400 234000
10 1990 1890 8300 10300 2300 1890 26670 266700
11 2340 2100 7300 13300 2400 2100 41280 412800
12 2900 1760 7400 14400 1800 1760 30020 300200
Go Back
1 comment:
the text file isnt getting loaded. could someone please suggest a solution?
Post a Comment