so I'm parsing CSV files into JSON then editing them so I can get arrays which jquery will use to make a graph.
I'm trying to make a dropdown menu so the user can select a CSV file from which the graph will be made. So far I've worked with local files so I used {}. I am new to jquery and a beginner in html so please explain what's going on in the solutions.
edit: the files directory is "CSV/Sheet1.csv", Sheet2.csv...
One way to do this is to write a function which opens a specific file when the dropdown menu is selected, but I'd rather just have a single function that takes input from my menu.
here's my html, style sheet and the javascript I want it linking to.
function handleFileSelect(evt) {
if ( !(evt.target && evt.target.files && evt.target.files[0]) ) {
return;
}
Papa.parse(evt.target.files[0], {
header: true,
dynamicTyping: true,
delimiter: ";",
complete: function (results) {
debugDataset(results);
renderDataset(results);
}
});
}
function debugDataset(dataset) {
var formatted = JSON.stringify(dataset, null, 2);
}
function renderDataset(dataset) {
var raw_data = dataset;
var formatted_data = {};
for(var i in raw_data.data) {
var keys = Object.keys(raw_data.data[i]);
for(var k = 0, len = keys.length; k < len; k++) {
if(typeof formatted_data[keys[k]] !== "undefined") {
formatted_data[keys[k]].push(raw_data.data[i][keys[k]]);
} else {
formatted_data[keys[k]] = new Array(raw_data.data[i][keys[k]]);
}
}
}
console.log(formatted_data);
}
$(function () {
$("#csv-file").change(handleFileSelect);
});
.graphbox {
width:500px;
height:500px;
border:1px solid black;
padding:5px;
margin:auto;
}
.dropdownmenubox {
width:500px;
height:23px;
margin:auto;
border:1px solid black;
padding:5px;
}
.dropdownmenu {
width:500px;
margin:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>grafi revije</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/libs/jquery/jquery.js"></script>
<script src="js/libs/PapaParse/papaparse.js"></script>
<script src="index.js"></script>
<link type="text/css" rel="stylesheet" href="index.css"/>
</head>
<body>
<div class="graphbox"></div>
<div class="dropdownmenubox">
<select class="dropdownmenu">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
</div>
</body>
</html>
so the solution I'm currently using is this, and it works: