How to merge two plotly graphs plotted by using rest url for csv data?

plotly.js
1

I am trying to draw the graph like “https://plot.ly/javascript/ajax-call/” in which the CSV data are coming from URL but, I have two URL’S like same “https://raw.githubusercontent.com/plotly/datasets/master/2014_apple_stock.csv”. I can draw two different graphs in two different div’s of HTML.

My Question is: Whether it is possible to merge both graph in single plot in the same div element of HTML?
It is like similar to Multiple Y-Axis Graph : “https://plot.ly/javascript/multiple-axes/”. Then I will keep both graph in same chart with different color.
If it true then please somebody help me with code snippet.

2

Something like:

Plotly.d3.csv(url1, function(err, csvData1) {
  Plotly.d3.csv(url2, function(err, csvData2) {
    /* merge csvData1 and csvData2 into plotly 'data' and 'layout' */
    Plotly.newPlot('graph', data, layout);
  });
});

should work.

1 Like
3

Thank you Etienne. It’s working :slight_smile:
If we want to add multiple line graph then we need to go like,

/* Code */
Plotly.d3.csv(url1, function(err, csvData1) {
Plotly.d3.csv(url2, function(err, csvData2) {
Plotly.d3.csv(url3, function(err, csvData3) {
Plotly.d3.csv(url4, function(err, csvData3) {

 		/* First URL data */
 		var x1 = [], y1 = [];

	  	for (var i=0; i<csvData1.length; i++) {
	  		row1 = csvData1[i];
	  		x1.push( row1['appl_x'] );
	  		y1.push( row1['appl_y'] );
	  	}

		var traces1 = {
			x: x1, 
			y: y1,
			mode: 'lines',
			line: {
				color: 'red',
				size: 2
			}
		};

		/* Second URL data */
		var x2 = [], y2 = [];

	  	for (var i=0; i<csvData2.length; i++) {
	  		row1 = csvData2[i];
	  		x2.push( row1['appl_x'] );
	  		y2.push( row1['appl_y'] );
	  	}

		var traces2 = {
			x: x2, 
			y: y2,
			mode: 'lines',
			line: {
				color: 'blue',
				size: 2
			}
		};

		/* Third URL data */
 		var x3 = [], y3 = [];

	  	for (var i=0; i<csvData3.length; i++) {
	  		row1 = csvData3[i];
	  		x3.push( row1['appl_x'] );
	  		y3.push( row1['appl_y'] );
	  	}

		var traces2 = {
			x: x3, 
			y: y3,
			mode: 'lines',
			line: {
				color: 'green',
				size: 2
			}
		};

		/* Fourth URL data */
		var x4 = [], y4 = [];

	  	for (var i=0; i<csvData4.length; i++) {
	  		row1 = csvData4[i];
	  		x4.push( row1['appl_x'] );
	  		y4.push( row1['appl_y'] );
	  	}

		var traces2 = {
			x: x4, 
			y: y4,
			mode: 'lines',
			line: {
				color: 'yellow',
				size: 2
			}
		};

		data = [trace1, trace2, trace3, trace4];

		layout = {
		tittle : "Sample 4 CSV data plots"
		};

    Plotly.newPlot('graph', data, layout);
    
  });
});

});
});

My point is can we add all these in “for” loop and can we save the lines of repeated code here…?