0
204
ViewsPlotly.js: Issue graphing two-type chart from CSV files
I've taken this Plotly Chart Studio .js code and have been trying to replace the x and y values so they are taken from CSV files.
var url1 ='https://raw.githubusercontent.com/cherryleh/testcsvs/main/RS01_ETaverage.csv';
var url2 = 'https://raw.githubusercontent.com/cherryleh/testcsvs/main/RS01_ETmonthlyavg.csv';
function makeplot() {
Plotly.d3.csv(url1, function(data){ processData(data) } );
Plotly.d3.csv(url2, function(data){ processData(data) } );
};
var x1 = [], y1 = [], x2 = [], y2 = [];
function processData(allRows) {
for (var i=0; i<allRows.length; i++) {
row = allRows[i];
if (row['Month1'] !== undefined) {
x1.push(row['Month1']);}
if (row['ET1'] !== undefined) {
y1.push(row['ET1']);}
if (row['Month2'] !== undefined) {
x2.push(row['Month2']);}
if (row['ET2'] !== undefined) {
y2.push(row['ET2']);}
}
trace1.x = x1;
trace1.y = y1;
trace2.x = x2;
trace2.y = y2;
console.log(trace1.y);
}
Whole code: https://jsfiddle.net/t2q8fzxn/
When I console log the x and y values they work fine, but the graph remains empty. Any thoughts to why?
1 answers
Answer question0
In your code, when you call your function makeplot which in turn calls the function processData, even though you modify the x and y properties of your objects trace1 and trace2 inside the processData function, these changes are only local to the processData function.
Once you are outside of the processData function, your trace1 and trace2 objects no longer have the x and y properties. And since your plotting code is outside of the scope of your processData function, your trace objects no longer have the properties x and y which is why your plots are blank.
If you want to see this for yourself, try running the following code after you run makeplot() and you'll see that the properties of the traces aren't changed:
makeplot();
console.log("here are the traces after makeplot has been run")
console.log(trace1)
console.log(trace2)
// the traces won't have the properties x or y
To get your plot to display correctly, what I did is make your processData function call another function called makePlotly which takes trace as an argument (similar to this example from the documentation). The structure of the function calls looks like this:
function processData(allRows) {
// process your csvs
// set properties for trace1 or trace2 depending on url1 or url2
// call a separate plotting function to plot each trace individually
var trace1 = {...}
var trace2 = {...}
if (condition) {
makePlotly(trace1)
}
else {
makePlotly(trace2)
}
function makePlotly(trace) {
var data = [trace];
var layout = {...}
Plotly.plot('plotly-div', data, layout);
}
To avoid any issues about the scope of trace1 and trace2, I defined them inside the processData function (it seems unnecessary to define the traces outside of the function since they won't be reused anyway). You can find my fiddle here, which produces the following plot.
