Multi traces not working (Data from three csv)

plotly.js
1

I can’t figure out, why this isnt working. I’m getting data from three CSV, files. CSV format is this:
Date,Usage
2018-09-12 16:02,21
2018-09-12 16:05,20
2018-09-12 16:12,20

I’m trying to create three traces to one plot, but it’s always empty.

If I use any of the traces alone, it looks ok:
Plotly.newPlot(‘myDiv’, trace1, layout);

image
image.png781×568 16.5 KB

But when all traces are being used, plot is empty and x-axis values look wrong:
var AllData =[trace1, trace2, trace3];
Plotly.newPlot(‘myDiv’, AllData, layout);

image
image.png779×541 5.7 KB

Any ideas are highly appreciated!

2

Judging by looking at at your snippets quickly, it looks like your trace1 is an array containing one {} object (otherwise Plotly.newPlot(gd, trace1, layout) wouldn’t have worked and [trace1, trace2, trace3] must then be a 2D array, which plotly.js doesn’t accept. So, Plotly.newPlot(gd, [trace1[0], trace2[0], trace[0]], layout)` should work.

3

Thank you! this worked perfectly :slight_smile:
If I may ask in this same topic, what would be the optimal way for live updating the graph that comes from a csv? I was able to do it so, that it runs this makeplot() every 1second, but it seems to use an unnecessary amount of processor. Using extendtraces might do the trick, but I can’t figure out how to implement it to a code below, that uses csv as data…

function makeplot() {
Plotly.d3.csv(“path to csv”, function(data){
Plotly.d3.csv(“path to csv”, function(data2){
Plotly.d3.csv(“path to csv”, function(data3){

var x1 = [], y1 = [];
var x2 = [], y2 = [];
var x3 = [], y3 = [];

for (var i=0; i<data.length; i++) {
    row = data[i];
    x1.push( row['Date'] );
    y1.push( row['Usage'] );
}

for (var i=0; i<data2.length; i++) {
    row = data_creo[i];
    x2.push( row['Date'] );
    y2.push( row['Usage'] );
}

for (var i=0; i<data3.length; i++) {
    row = data3[i];
    x3.push( row['Date'] );
    y3.push( row['Usage'] );
}


var trace1 = [{
    x: x1, 
    y: y1,
	name: "title1",
	mode: 'lines',

}];


var trace2 = [{
    x: x2, 
    y: y2,
	name: "title",
	mode: 'lines',


}];

var trace3 = [{
    x: x3, 
    y: y3,
	name: "Name",
	mode: 'lines'

}];


var layout = {
	title: 'Data',
	xaxis: {
		title: 'Date',
			},
			
	yaxis: {
		title: 'Usage'

			}

	
			
};

var AllData =[trace1[0], trace2[0], trace3[0]];			
Plotly.newPlot('myDiv', AllData, layout, {displayModeBar: false});	
	
}); 
});
});

};

makeplot();

4

Any ideas for the live update with csv?