I am currently working on a project where I need to extract data from a CSV file and display it on my website. The idea is to use two values as x and y coordinates, similar to a graph, and retrieve the data at that specific location.
Here is the HTML code I have implemented:
<form>
Width <input type="text" id="W">
Height <input type="text" id="H">
Length <input type="text" id="L">
<button type="button" onclick="f()">Calculate</button>
<b id="result"></b>
</form>
This is what my CSS code looks like:
function f()
{
var L = parseInt(document.querySelector("#L").value);
var W = parseInt(document.querySelector("#W").value);
var H = parseInt(document.querySelector("#H").value);
var A;
var B;
var calc;
// Define the X and Y values for reference
A = 2*(H+2)+W+5;
B = 2*(H+2)+L+5;
//calc = this variable will eventually store the data from the CSV file
document.querySelector("#result").innerHTML = calc;
}
Below is an example of the data format I am working with:
0 1 2 3 4 5 6 7 8
| | | | | | | | |
0--1 2 3 4 5 6 7 8 9
1--2 3 4 5 6 7 8 9 1
2--3 4 5 6 7 8 9 1 2
3--4 5 6 7 8 9 1 2 3
4--5 6 7 8 9 1 2 3 4
5--6 7 8 9 1 2 3 4 5
6--7 8 9 1 2 3 4 5 6
7--8 9 1 2 3 4 5 6 7
8--9 1 2 3 4 5 6 7 8
In essence, my goal is to load the CSV data into an array structure similar to a 2D array. Then, using the A and B values, I aim to fetch and display the data stored at those specific locations.