In this post, we will discuss using Chart.js for line plotting.
Examples from this post can be found in this repo.
Reading data from a CSV file
Here the full function we use to read in the data:
function parseCSV(csv) {
const lines = csv.split("\n");
const headers = lines[0].split(",");
const data = {
y_value: [],
ym_value: []
};
for (let i = 1; i < lines.length; i++) {
const currentLine = lines[i].split(",");
data.y_value.push(parseFloat(currentLine[10])); //THIS IS WHERE we choose which column to display
data.ym_value.push(parseFloat(currentLine[11]));
}
return data;
}
Let’s dissect this a bit. We’ll start with the first two lines:
const lines = csv.split("\n");
const headers = lines[0].split(",");
As you might imagine, our csv files contains rows and columns; each record is separated by a new line in our file, while each element of the record is separated by a comma (comma-separated-values, or csv). Hence in the above context, we are simply defining the lines and headers for later use.
const data = {
y_value: [],
ym_value: []
};
In this part, we are simply defining the structure of our data used for plotting. Since we are plotting two line values, we will store them as a dictionary of lists, where the first list we call “y_value” and the second “ym_value”.
for (let i = 1; i < lines.length; i++) {
const currentLine = lines[i].split(",");
data.y_value.push(parseFloat(currentLine[10])); //THIS IS WHERE we choose which column to display
data.ym_value.push(parseFloat(currentLine[11]));
}
return data;
Finally, we iterate over the total number of records (lines) from the csv file and extract the values we need. We use “data.y_value” to access the first list item of the data dictionary, from which we include “.push()” to append the specific column we desire. In the above case, for y_value, we’re using the 10th column and appending all those values into that list. This process is then repeated for ym_value, but with the 11th column. In the end, once the look in finished, we return the entire data dictionary for later use in our script.