Styjun

I am trying to read data from a csv file, and I want to store the data of each column in an array as in the code below. The problem that I get and I didn't know how to fix is that all the values are defined inside the brackets, but once I try to deal with the arrays else where, the data is undefined. Any ideas about what is going wrong?
My version of D3 is v3.

<script>

var computerid = [];
var timestamp = [];
var percentage = [];

d3.csv("cpu-util.csv", function(data) 
 for (var i = 0; i < data.length; i++) 
 timestamp[i] = data[i].timestamp;
 computerid[i] = data[i].Computer_ID; 
 percentage[i] = data[i].Percentage;
 console.log(computerid[i]); //prints value
 console.log(timestamp[i]);
 console.log(percentage[i]);

 
);

console.log(computerid[1]); //here, it prints undefined although inside the loop it prints values

Part of the csv file:

Computer_ID, timestamp, value, Percentage

1, 01-07-11 0:00, 0.8, 8

Your CSV data needs to be in the correct format. There are a few unnecessary spaces which makes it difficult to parse as it includes the spaces in the header names on the basis of which it keeps the property names in the objects.

cpu-util.csv should be

Computer_ID,timestamp,value,Percentage
1,01-07-11 0:00,0.8,8

In addition d3.js parses the data keeping the header labels. therefore computerid array should be filled using the Computer_ID property of the data. Thus your code should be something like:

<script>
 var timestamp = [],
 computerid = [],
 percentage = [];

 d3.csv("cpu-util.csv", function(data) 
 console.log(data); //see the data structure
 for (var i = 0; i < data.length; i++) 
 timestamp[i] = data[i].timestamp; //use the property names.
 computerid[i] = data[i].Computer_ID; 
 percentage[i] = data[i].Percentage;
 console.log(computerid[i]);
 console.log(timestamp[i]);
 console.log(percentage[i]);
 
 console.log(computerid[0]); //this will appear as it is within the function and 
 //the array is filled by the time this line is run
 );

 console.log(computerid[0]); //this will be undefined due to the asynchronous nature of javascript. 
 //This line of code runs before the for loop within the function
</script>

If you see the console log, the console.log(computerid[0]) will appear first in the log before the other three in the function, due to the asynchronous nature of javascript. There are ways in which you can chain functions to make them synchronous using either Async/Await or Promises.

Also d3.js parses all the information as strings. So number values such as Percentage would need to be converted to number data types using a function. Just keep this in mind.