Intro
The sage of me trying to get D3 to work continues. Now there are a lot of things that I have learned by failing to get this graph to work I would love to let everyone know my trial and error so they don't have to sit for hours banging their heads against a table all night
Data
Now the way you bring in your data is up to you just remember it matters a lot in the long run. I'm bringing it in from a PHP script which is talking to my SQL server. Now, this seemed like the common way to do it for me. A lot of the examples on the internet though were all importing their data from a file. A CSV one to be exact. I'm sure that I could create a CSV file from the data that I have but I would love to make mistakes like this and work with the JSON data that I'm bringing over.
Now when I was bringing my data in I always turned it into JSON to get the information that I needed in the way I wanted. Next, I have to clean the data with a function parsing out the numbers and dates to make sense. This was all done with a function.
Loading Data function
function loadData(data){
let dataframe = {
'exerciseArr': [],
'repArr': [],
'weightArr': [],
'dateArr': [],
'volArr': []
}
for (var i = 0; i < Object.keys(data).length; i++) {
if (data[i]['Rep'] != 0) {
dataframe['exerciseArr'].push(data[i]['Exercise']);
dataframe['repArr'].push(parseInt(data[i]['Rep']));
dataframe['weightArr'].push(parseInt(data[i]['Weight']));
dataframe['dateArr'].push(new Date(data[i]['Date']));
dataframe['volArr'].push(parseInt(data[i]['Rep'])*parseInt(data[i]['Weight']));
}
}
return dataframe;
}
After the data was cleaned I needed to transform the data into the scale that I was using. I ended up using a function to scale the date and give me a line for the graph.
Loading Data function
function loadData(data){
let dataframe = {
'exerciseArr': [],
'repArr': [],
'weightArr': [],
'dateArr': [],
'volArr': []
}
for (var i = 0; i < Object.keys(data).length; i++) {
if (data[i]['Rep'] != 0) {
dataframe['exerciseArr'].push(data[i]['Exercise']);
dataframe['repArr'].push(parseInt(data[i]['Rep']));
dataframe['weightArr'].push(parseInt(data[i]['Weight']));
dataframe['dateArr'].push(new Date(data[i]['Date']));
dataframe['volArr'].push(parseInt(data[i]['Rep'])*parseInt(data[i]['Weight']));
}
}
return dataframe;
}
After the data was cleaned I needed to transform the data into the scale that I was using. I ended up using a function to scale the date and give me a line for the graph.
