edit the following code to perform analysis on data file provided <!DOCTYPE html
ID: 3726331 • Letter: E
Question
edit the following code to perform analysis on data file provided
<!DOCTYPE html>
<html>
<head>
<title>hw</title>
<style>
body {
background-color: red;
font-family: 'timesnewroman', sans-serif;
text-align: center;
color: #FFF;
}
#section0 {
display: none;
}
#section2 {
display: none;
}
#section3 {
display: none;
}
#section4 {
display: none;
margin: auto;
width: 800px;
}
table {
border: 2px solid white;
}
td {
padding: 15px;
}
.center {
margin: auto;
width: 80%;
padding: 10px;
}
</style>
</head>
<body>
<h1>hw</h1>
<p>hw</p>
<hr>
<div class="center" id="section0">Select Analysis Parameters</div>
<div class="center" id="section1">
<input type='file' accept='text/plain'>
<br>
</div>
<div class="center" id="section2">
<form name="getUserSelectionForm">
<table class='center'>
<tr>
<th>Region</th>
<th>Store Number</th>
<th>Year</th>
<th>Product</th>
<th>Analysis Type</th>
</tr>
<tr>
<td>
<select name="region">
<option value="all">All</option>
<option value="north">North</option>
<option value="east">East</option>
<option value="south">South</option>
<option value="west">West</option>
</select>
</td>
<td>
<input type="text" name="storeNumber" value="All">
</td>
<td>
<select name="year">
<option value="All">All</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>
</td>
<td>
<select name="product">
<option value="all">All</option>
<option value="solar">Solar Panels</option>
<option value="wind">Wind Turbines</option>
<option value="dam">My Little Dam</option>
<option value="fusion">Mr. Fusion</option>
<option value="powerwall">Powerwall</option>
</select>
</td>
<td>
<select name="analysis">
<option value="total">Total</option>
<option value="average">Average</option>
<option value="analysis3">Analysis 3</option>
<option value="analysis4">Analysis 4</option>
<option value="analysis5">Analysis 5</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="button" name="reset" value="Reset">
</td>
<td colspan="3"></td>
<td>
<input type="button" name="execute" value="Go!">
</td>
</tr>
</table>
<br>
<br>
</form>
</div>
<div class="center" id="section3"></div>
<div class="center" id="section4"></div>
<script>
// start program code
var working2DArray; // Global variable to hold the processed data
var userFileText; // Global variable to hold the text file
document.getUserSelectionForm.execute.addEventListener('click', performAnalysis, false);
document.getUserSelectionForm.reset.addEventListener('click', resetForm, false);
function resetForm() {
var myForm = document.getUserSelectionForm;
myForm.region.value = 'all';
myForm.storeNumber.value = 'All';
myForm.year.value = 'all';
myForm.product.value = 'all';
myForm.analysis.value = 'total';
}
function performAnalysis() {
var myForm = document.getUserSelectionForm;
var userRegion = myForm.region.value;
var userStoreNumber = myForm.storeNumber.value;
var userYear = myForm.year.value;
var userProduct = myForm.product.value;
var userAnalysis = myForm.analysis.value;
document.getElementById('section3').innerHTML = "The user selected find the " + userAnalysis +
" " + "for " + userRegion + " region(s)," +
" " + userStoreNumber + " store(s)," +
" " + userYear + " year(s)," +
" " + userProduct + " product(s)," +
" ";
document.getElementById('section3').style.display = 'block';
var outputString = "";
switch (userAnalysis) {
case 'total':
outputString += "Total unit sales";
switch (userProduct) {
case 'all':
outputString += " for all products, all years, all stores: ";
var sum = 0;
for (var i = 1; i < working2DArray.length - 1; i++) { // account for header row
sum += parseFloat(working2DArray[i][3]); // add Solar Panels
sum += parseFloat(working2DArray[i][4]); // add Wind Turbines
sum += parseFloat(working2DArray[i][5]); // add My Little Dam
sum += parseFloat(working2DArray[i][6]); // add Mr. Fusion
sum += parseFloat(working2DArray[i][7]); // add Powerwall
} // for sum all loop
outputString += sum.toLocaleString();
break;
case 'solar':
outputString += " for Solar Panels, all years, all stores: ";
var sum = 0;
for (var i = 1; i < working2DArray.length - 1; i++) { // account for header row
sum += parseFloat(working2DArray[i][3]); // add Solar Panels
} // for sum solar panel loop
outputString += sum.toLocaleString();
break;
// Add more products here to...
// here, using the solar case above
default:
outputString = "That functionality has not been coded yet - product.";
} // end useProduct Switch
break;
// Add more analysis types (average for example) from here to...
// here, using the 'total' case above for an example.
default:
outputString = "That functionality has not been coded yet - analysis.";
} // end userAnalysis switch
document.getElementById('section4').innerHTML = outputString;
}
var openFile = function(event) {
var input = event.target;
var reader = new FileReader(); // create a new FileReader object
reader.readAsText(input.files[0]); // read only the first file in the files array as a text file
reader.onload = function() { // when the file finishes loading...
userFileText = reader.result; // put the file contents into the global text file variable
// pass that text to a function to get processed
document.getElementById('section4').innerHTML = put2DArrayInHTMLTable(processData(userFileText));
document.getElementById('section1').style.display = 'none';
document.getElementById('section0').style.display = 'block';
document.getElementById('section2').style.display = 'block';
document.getElementById('section4').style.display = 'block';
}; // end reader.onload function definition
}; // end of main program code
// processData breaks the file into rows and elements
// and puts those elements into an array for analysis
function processData(userTextFile) {
var userData = []; // create an array to hold the user data rows
var dataRows = userTextFile.split(/ /); // /.../ is regex; is new line
for (var i = 0; i < dataRows.length; i++) { // traverse the row array
userData[i] = dataRows[i].split(','); // split each row at the comma, put the array into userData[i]
} // end of for loop to add data to 2D array
working2DArray = userData;
return userData;
} //end function processData
function put2DArrayInHTMLTable(user2DArray) {
// var fileContentsHTMLOutput = "";
// var allTextLines = userTextFile.split(/ /); // use a regular expression and separate the CSV rows
// var singleTextLine; // a counter to parse each line
var table = '<table>'; // build an HTML table
for (var i = 0; i < user2DArray.length; i++) {
if (i == 0) {
table += '<thead>';
table += '<tr>';
} else {
table += '<tr>';
}
// var rowElements = userData[singleTextLine].split(',');
for (var j = 0; j < user2DArray[i].length; j++) {
if (i == 0) {
table += '<th>';
table += user2DArray[i][j];
table += '</th>';
} else {
table += '<td>';
table += user2DArray[i][j];
table += '</td>';
}
} // end row
if (i == 0) {
table += '</tr>';
table += '</thead>';
table += '<tbody>';
} else {
table += '</tr>';
}
}
table += '</tbody>';
table += '</table>';
return table;
} // close processData function
</script>
</body>
</html>
test data-
Region,Store Number,Report Date,Solar Panels,Wind Turbines,My Little Dam,Mr. Fusion,Powerwall
East,1001,2017,456,979,1395,1182,107
East,1002,2017,819,1374,1162,2190,54
East,1003,2017,863,882,664,984,71
East,1004,2017,778,863,946,1542,133
East,1005,2017,493,1081,805,1676,117
East,1006,2017,874,797,88,1089,50
East,1007,2017,584,1167,233,1968,101
East,1008,2017,780,1025,1069,1297,138
East,1009,2017,1074,1044,978,1085,77
East,1010,2017,783,1416,86,1726,110
East,1011,2017,859,916,1425,960,109
East,1012,2017,1144,981,288,1616,92
East,1013,2017,764,1148,1256,1792,63
East,1014,2017,1192,883,509,1776,71
East,1015,2017,966,1024,1223,2553,89
East,1016,2017,854,1384,1599,1680,100
East,1017,2017,774,805,349,1034,74
East,1018,2017,1008,944,734,1614,88
East,1019,2017,565,1025,1357,1391,77
East,1020,2017,913,1352,1251,2446,89
East,1021,2017,604,715,386,2592,92
East,1022,2017,496,650,1045,2435,61
East,1023,2017,490,718,269,839,51
East,1024,2017,989,776,957,1582,68
East,1025,2017,703,766,1423,1151,108
East,1026,2017,803,1215,89,2478,93
East,1027,2017,793,1243,487,888,59
East,1028,2017,611,817,994,2551,144
East,1029,2017,565,995,268,1559,61
East,1030,2017,824,829,1012,1976,102
North,1031,2017,952,1336,1460,1288,77
North,1032,2017,978,603,110,1230,75
North,1033,2017,602,1196,930,2010,93
North,1034,2017,782,1500,712,1226,90
North,1035,2017,706,782,928,2019,52
North,1036,2017,1084,1038,493,1143,150
North,1037,2017,1041,726,1196,1749,52
North,1038,2017,713,975,1551,914,131
North,1039,2017,728,1147,1600,2546,140
North,1040,2017,689,803,1359,969,118
North,1041,2017,1190,745,702,2428,78
North,1042,2017,1120,1185,1595,972,99
North,1043,2017,755,1109,141,2079,93
North,1044,2017,571,1491,661,980,144
North,1045,2017,579,873,1114,2047,119
North,1046,2017,1152,817,1417,2423,131
North,1047,2017,626,1201,832,2101,58
North,1048,2017,786,1059,928,803,100
North,1049,2017,1200,831,142,1191,96
North,1050,2017,829,1428,1247,2176,75
North,1051,2017,668,1219,1095,2152,121
North,1052,2017,1045,1031,1565,2520,122
North,1053,2017,987,1398,1072,1124,106
North,1054,2017,629,802,911,872,61
North,1055,2017,643,963,468,892,104
North,1056,2017,1011,1090,430,1543,89
North,1057,2017,1081,954,1556,2509,102
North,1058,2017,603,1212,986,1414,89
North,1059,2017,478,687,642,879,147
North,1060,2017,544,1015,1380,2500,139
South,1061,2017,534,1191,854,1993,132
South,1062,2017,987,1268,1277,1593,64
South,1063,2017,873,1317,1359,1160,58
South,1064,2017,537,1142,447,2294,140
South,1065,2017,1014,1118,1472,1025,114
South,1066,2017,1107,1372,356,1521,112
South,1067,2017,939,948,543,1230,68
South,1068,2017,630,830,1038,1529,60
South,1069,2017,667,682,1204,2589,134
South,1070,2017,1131,1238,800,2531,62
South,1071,2017,1014,892,365,2252,148
South,1072,2017,940,764,1599,1923,138
South,1073,2017,630,967,870,1260,109
South,1074,2017,713,1197,1208,1464,68
South,1075,2017,555,714,892,1273,104
South,1076,2017,809,825,1360,886,118
South,1077,2017,504,1071,663,1131,132
South,1078,2017,1149,874,1017,2263,107
South,1079,2017,1009,879,1169,1982,132
South,1080,2017,636,973,1201,1758,89
South,1081,2017,527,1415,1464,2089,116
South,1082,2017,1128,1044,924,1657,118
South,1083,2017,978,751,1460,1807,115
South,1084,2017,1169,1147,1424,2252,72
South,1085,2017,1016,1250,664,1090,143
South,1086,2017,1008,746,402,2154,132
South,1087,2017,1152,690,1199,1301,140
South,1088,2017,899,1412,708,978,108
South,1089,2017,1158,955,953,2386,147
South,1090,2017,685,700,515,1818,89
West,1091,2017,565,1172,231,1687,124
West,1092,2017,553,720,1215,1675,62
West,1093,2017,965,1341,977,1871,54
West,1094,2017,685,1432,140,1883,53
West,1095,2017,925,1058,1153,2294,60
West,1096,2017,1142,1020,1280,855,144
West,1097,2017,1163,841,704,1041,147
West,1098,2017,1023,630,207,1126,101
West,1099,2017,601,644,930,906,74
West,1100,2017,859,856,371,989,81
West,1101,2017,763,993,1521,1191,131
West,1102,2017,886,1015,1540,1746,139
West,1103,2017,548,1324,371,1194,70
West,1104,2017,725,648,722,877,117
West,1105,2017,779,1292,91,2225,64
West,1106,2017,1116,790,1211,2362,124
West,1107,2017,739,749,120,1879,76
West,1108,2017,907,834,638,2476,113
West,1109,2017,793,1308,722,1335,55
West,1110,2017,846,938,1572,1651,64
West,1111,2017,541,1407,823,1027,80
West,1112,2017,626,1349,1300,1263,98
West,1113,2017,911,882,789,1931,90
West,1114,2017,943,1276,1452,1009,140
West,1115,2017,1097,1088,1469,1057,115
West,1116,2017,653,832,1362,818,132
West,1117,2017,729,1138,184,2570,57
West,1118,2017,1177,1215,843,1384,150
West,1119,2017,736,1034,823,2352,83
West,1120,2017,630,1354,1029,1354,145
East,1001,2016,228,489.5,697.5,1182,86
East,1002,2016,409.5,1374,581,1095,71
East,1003,2016,431.5,441,664,984,132
East,1004,2016,778,863,946,771,146
East,1005,2016,493,540.5,805,838,108
East,1006,2016,437,398.5,44,1089,111
East,1007,2016,584,583.5,116.5,1968,67
East,1008,2016,780,512.5,534.5,648.5,51
East,1009,2016,537,1044,489,1085,72
East,1010,2016,391.5,1416,43,1726,90
East,1011,2016,859,458,1425,480,142
East,1012,2016,1144,981,288,808,105
East,1013,2016,382,1148,628,1792,147
East,1014,2016,596,441.5,509,1776,58
East,1015,2016,966,1024,611.5,2553,140
East,1016,2016,854,1384,799.5,1680,138
East,1017,2016,387,402.5,349,1034,124
East,1018,2016,1008,944,734,807,77
East,1019,2016,565,1025,1357,1391,61
East,1020,2016,913,1352,1251,2446,145
East,1021,2016,302,715,386,1296,130
East,1022,2016,496,325,1045,2435,58
East,1023,2016,490,718,269,419.5,56
East,1024,2016,989,776,478.5,1582,54
East,1025,2016,351.5,383,1423,575.5,94
East,1026,2016,803,607.5,44.5,2478,137
East,1027,2016,793,621.5,487,888,146
East,1028,2016,611,408.5,497,1275.5,56
East,1029,2016,282.5,497.5,268,1559,72
East,1030,2016,824,829,1012,988,135
North,1031,2016,952,1336,730,1288,146
North,1032,2016,489,301.5,110,1230,80
North,1033,2016,301,598,930,1005,119
North,1034,2016,782,1500,356,1226,121
North,1035,2016,353,782,464,1009.5,112
North,1036,2016,1084,1038,246.5,571.5,131
North,1037,2016,520.5,363,1196,874.5,137
North,1038,2016,713,975,1551,457,78
North,1039,2016,728,573.5,1600,1273,134
North,1040,2016,344.5,803,1359,484.5,78
North,1041,2016,595,745,351,1214,124
North,1042,2016,560,1185,797.5,486,104
North,1043,2016,755,554.5,141,1039.5,53
North,1044,2016,571,745.5,661,980,60
North,1045,2016,289.5,436.5,1114,2047,52
North,1046,2016,576,817,1417,1211.5,114
North,1047,2016,313,600.5,416,1050.5,128
North,1048,2016,786,529.5,464,803,124
North,1049,2016,600,415.5,71,1191,120
North,1050,2016,829,1428,623.5,2176,100
North,1051,2016,668,609.5,1095,2152,116
North,1052,2016,522.5,1031,782.5,1260,104
North,1053,2016,987,699,536,1124,63
North,1054,2016,314.5,802,455.5,436,58
North,1055,2016,643,963,234,892,54
North,1056,2016,505.5,545,215,1543,65
North,1057,2016,540.5,477,1556,2509,52
North,1058,2016,301.5,1212,986,1414,97
North,1059,2016,239,687,321,879,75
North,1060,2016,272,507.5,1380,2500,137
South,1061,2016,534,1191,427,996.5,68
South,1062,2016,987,1268,638.5,796.5,93
South,1063,2016,873,1317,1359,1160,57
South,1064,2016,537,1142,223.5,1147,104
South,1065,2016,1014,559,1472,1025,147
South,1066,2016,553.5,686,356,760.5,92
South,1067,2016,469.5,474,271.5,1230,129
South,1068,2016,630,830,519,1529,100
South,1069,2016,333.5,341,602,1294.5,97
South,1070,2016,1131,1238,400,1265.5,124
South,1071,2016,507,446,182.5,1126,74
South,1072,2016,940,764,1599,961.5,62
South,1073,2016,630,483.5,870,1260,84
South,1074,2016,713,1197,604,1464,139
South,1075,2016,555,714,446,1273,148
South,1076,2016,404.5,825,680,443,116
South,1077,2016,504,1071,663,565.5,97
South,1078,2016,574.5,874,1017,1131.5,66
South,1079,2016,1009,439.5,584.5,1982,91
South,1080,2016,318,973,1201,1758,72
South,1081,2016,527,1415,1464,1044.5,100
South,1082,2016,564,522,462,1657,66
South,1083,2016,978,751,730,1807,134
South,1084,2016,584.5,573.5,1424,2252,108
South,1085,2016,508,625,664,545,113
South,1086,2016,1008,746,402,1077,76
South,1087,2016,1152,345,599.5,650.5,116
South,1088,2016,449.5,1412,708,489,74
South,1089,2016,1158,955,953,2386,78
South,1090,2016,342.5,700,515,909,95
West,1091,2016,282.5,586,231,1687,89
West,1092,2016,553,360,607.5,837.5,81
West,1093,2016,965,670.5,488.5,935.5,117
West,1094,2016,685,1432,140,1883,134
West,1095,2016,925,529,1153,2294,64
West,1096,2016,1142,510,640,855,58
West,1097,2016,581.5,420.5,704,1041,90
West,1098,2016,1023,630,103.5,563,88
West,1099,2016,300.5,322,465,906,106
West,1100,2016,429.5,856,371,494.5,119
West,1101,2016,763,496.5,760.5,1191,129
West,1102,2016,443,507.5,770,1746,143
West,1103,2016,548,1324,185.5,597,93
West,1104,2016,725,324,361,438.5,146
West,1105,2016,779,1292,45.5,2225,80
West,1106,2016,1116,395,605.5,1181,103
West,1107,2016,369.5,749,120,1879,80
West,1108,2016,907,417,638,2476,77
West,1109,2016,793,654,361,667.5,104
West,1110,2016,423,938,786,825.5,72
West,1111,2016,541,1407,411.5,1027,140
West,1112,2016,626,674.5,1300,631.5,136
West,1113,2016,455.5,882,789,965.5,125
West,1114,2016,943,1276,1452,504.5,123
West,1115,2016,1097,544,734.5,1057,127
West,1116,2016,326.5,832,681,409,149
West,1117,2016,364.5,569,92,2570,56
West,1118,2016,588.5,607.5,421.5,1384,53
West,1119,2016,368,517,823,2352,111
West,1120,2016,630,677,514.5,677,62
chart code-
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2", // "light1", "light2", "dark1", "dark2"
title:{
text: "My Energy Company - Total Sales by Product"
},
axisY: {
title: "Total Sales"
},
data: [{
type: "column",
showInLegend: true,
legendMarkerColor: "grey",
legendText: "For Years 2016 and 2017",
dataPoints: [
{ y: 174920, label: "Solar Panels" },
{ y: 214822, label: "Wind Turbines" },
{ y: 188501.5, label: "My Little Dam" },
{ y: 343831, label: "Mr. Fusion" },
{ y: 23832, label: "Powerwall" },
]
}]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>
Explanation / Answer
I was drawn charts for all... if you need you can easily draw... using this....
chartData = [];
chartData.push({ y: 1234, label: "Solar Panels" });
chartData.push({ y: 1245, label: "Wind Turbines" });
chartData.push({ y: 1834, label: "Little Dam" });
chartData.push({ y: 7436, label: "Mr. Fusion" });
chartData.push({ y: 3845, label: "Powerwall" });
drawChart(chartData);
If you need any assistance... give me a comment...
<!DOCTYPE html>
<html>
<head>
<title>hw</title>
<style>
body {
background-color: red;
font-family: 'timesnewroman', sans-serif;
text-align: center;
color: #FFF;
}
#section0 {
display: none;
}
#section2 {
display: none;
}
#section3 {
display: none;
}
#section4 {
display: none;
margin: auto;
width: 800px;
}
table {
border: 2px solid white;
}
td {
padding: 15px;
}
.center {
margin: auto;
width: 80%;
padding: 10px;
}
</style>
</head>
<body>
<h1>hw</h1>
<p>hw</p>
<hr>
<div class="center" id="section0">Select Analysis Parameters</div>
<div class="center" id="section1">
<input type='file' accept='text/plain'>
<br>
</div>
<div class="center" id="section2">
<form name="getUserSelectionForm">
<table class='center'>
<tr>
<th>Region</th>
<th>Store Number</th>
<th>Year</th>
<th>Product</th>
<th>Analysis Type</th>
</tr>
<tr>
<td>
<select name="region">
<option value="all">All</option>
<option value="north">North</option>
<option value="east">East</option>
<option value="south">South</option>
<option value="west">West</option>
</select>
</td>
<td>
<input type="text" name="storeNumber" value="All">
</td>
<td>
<select name="year">
<option value="All">All</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>
</td>
<td>
<select name="product">
<option value="all">All</option>
<option value="solar">Solar Panels</option>
<option value="wind">Wind Turbines</option>
<option value="dam">My Little Dam</option>
<option value="fusion">Mr. Fusion</option>
<option value="powerwall">Powerwall</option>
</select>
</td>
<td>
<select name="analysis">
<option value="total">Total</option>
<option value="average">Average</option>
<option value="analysis3">Analysis 3</option>
<option value="analysis4">Analysis 4</option>
<option value="analysis5">Analysis 5</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="button" name="reset" value="Reset">
</td>
<td colspan="3"></td>
<td>
<input type="button" name="execute" value="Go!">
</td>
</tr>
</table>
<br>
<br>
</form>
</div>
<div class="center" id="section3"></div>
<div class="center" id="section4"></div>
<div id="chartContainer"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script>
// start program code
var working2DArray; // Global variable to hold the processed data
var chartData = [];
var userFileText; // Global variable to hold the text file
document.getUserSelectionForm.execute.addEventListener('click', performAnalysis, false);
document.getUserSelectionForm.reset.addEventListener('click', resetForm, false);
function drawChart(dat){
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2", // "light1", "light2", "dark1", "dark2"
title:{
text: "My Energy Company - Total Sales by Product"
},
axisY: {
title: "Total Sales"
},
data: [{
type: "column",
showInLegend: true,
legendMarkerColor: "grey",
legendText: "For Years 2016 and 2017",
dataPoints:dat
}]
});
chart.render();
}
function resetForm() {
var myForm = document.getUserSelectionForm;
myForm.region.value = 'all';
myForm.storeNumber.value = 'All';
myForm.year.value = 'all';
myForm.product.value = 'all';
myForm.analysis.value = 'total';
}
function performAnalysis() {
var myForm = document.getUserSelectionForm;
var userRegion = myForm.region.value;
var userStoreNumber = myForm.storeNumber.value;
var userYear = myForm.year.value;
var userProduct = myForm.product.value;
var userAnalysis = myForm.analysis.value;
document.getElementById('section3').innerHTML = "The user selected find the " + userAnalysis +
" " + "for " + userRegion + " region(s)," +
" " + userStoreNumber + " store(s)," +
" " + userYear + " year(s)," +
" " + userProduct + " product(s)," +
" ";
document.getElementById('section3').style.display = 'block';
var outputString = "";
switch (userAnalysis) {
case 'total':
outputString += "Total unit sales";
switch (userProduct) {
case 'all':
outputString += " for all products, all years, all stores: ";
var sum = 0;
solar = 0;
wind = 0;
dam =0;
fusion = 0;
powerwall = 0;
for (var i = 1; i < working2DArray.length - 1; i++) { // account for header row
solar += parseFloat(working2DArray[i][3]);
sum += parseFloat(working2DArray[i][3]); // add Solar Panels
wind+=parseFloat(working2DArray[i][4]);
sum += parseFloat(working2DArray[i][4]); // add Wind Turbines
dam += parseFloat(working2DArray[i][5]);
sum += parseFloat(working2DArray[i][5]); // add My Little Dam
fusion += parseFloat(working2DArray[i][6]);
sum += parseFloat(working2DArray[i][6]); // add Mr. Fusion
powerwall += parseFloat(working2DArray[i][7]);
sum += parseFloat(working2DArray[i][7]); // add Powerwall
} // for sum all loop
chartData.push({ y: solar, label: "Solar Panels" });
chartData.push({ y: wind, label: "Wind Turbines" });
chartData.push({ y: dam, label: "Little Dam" });
chartData.push({ y: fusion, label: "Mr. Fusion" });
chartData.push({ y: powerwall, label: "Powerwall" });
drawChart(chartData);
outputString += sum.toLocaleString();
break;
case 'solar':
outputString += " for Solar Panels, all years, all stores: ";
var sum = 0;
for (var i = 1; i < working2DArray.length - 1; i++) { // account for header row
sum += parseFloat(working2DArray[i][3]); // add Solar Panels
} // for sum solar panel loop
outputString += sum.toLocaleString();
break;
// Add more products here to...
// here, using the solar case above
default:
outputString = "That functionality has not been coded yet - product.";
} // end useProduct Switch
break;
// Add more analysis types (average for example) from here to...
// here, using the 'total' case above for an example.
default:
outputString = "That functionality has not been coded yet - analysis.";
} // end userAnalysis switch
document.getElementById('section4').innerHTML = outputString;
}
var openFile = function (event) {
var input = event.target;
var reader = new FileReader(); // create a new FileReader object
reader.readAsText(input.files[0]); // read only the first file in the files array as a text file
reader.onload = function () { // when the file finishes loading...
userFileText = reader.result; // put the file contents into the global text file variable
// pass that text to a function to get processed
document.getElementById('section4').innerHTML = put2DArrayInHTMLTable(processData(userFileText));
document.getElementById('section1').style.display = 'none';
document.getElementById('section0').style.display = 'block';
document.getElementById('section2').style.display = 'block';
document.getElementById('section4').style.display = 'block';
}; // end reader.onload function definition
}; // end of main program code
// processData breaks the file into rows and elements
// and puts those elements into an array for analysis
function processData(userTextFile) {
var userData = []; // create an array to hold the user data rows
var dataRows = userTextFile.split(/ /); // /.../ is regex; is new line
for (var i = 0; i < dataRows.length; i++) { // traverse the row array
userData[i] = dataRows[i].split(','); // split each row at the comma, put the array into userData[i]
} // end of for loop to add data to 2D array
working2DArray = userData;
return userData;
} //end function processData
function put2DArrayInHTMLTable(user2DArray) {
// var fileContentsHTMLOutput = "";
// var allTextLines = userTextFile.split(/ /); // use a regular expression and separate the CSV rows
// var singleTextLine; // a counter to parse each line
var table = '<table>'; // build an HTML table
for (var i = 0; i < user2DArray.length; i++) {
if (i == 0) {
table += '<thead>';
table += '<tr>';
} else {
table += '<tr>';
}
// var rowElements = userData[singleTextLine].split(',');
for (var j = 0; j < user2DArray[i].length; j++) {
if (i == 0) {
table += '<th>';
table += user2DArray[i][j];
table += '</th>';
} else {
table += '<td>';
table += user2DArray[i][j];
table += '</td>';
}
} // end row
if (i == 0) {
table += '</tr>';
table += '</thead>';
table += '<tbody>';
} else {
table += '</tr>';
}
}
table += '</tbody>';
table += '</table>';
return table;
} // close processData function
</script>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.