How to plot two plots in the same figure in plotly.js

Question

I want to plot 2 plots in the same figure using plotly.js. I have gone through the documentation of plotly.js but was unable to find it. Can any body help?

Here is the code snippet:

First Plot:

    var data4 = [ {
        z: z,
        x: x,
        y: y,
        type: 'contour'
    }
];

var layout = {
  title: 'Simple Contour Plot'
}

Plotly.newPlot('visualization2', data4, layout);

Second Plot:

 var trace = {
  x: x11,
  y: x21,
  mode: 'lines+markers'
};

var data3 = [ trace];

 var layout = {
  title:'Line and Scatter Plot',
  height: 400,
  width: 480
 };

Plotly.newPlot('visualization3', data3, layout);

I want to plot these two in one figure. Note: The first one is a contour plot and the second one is a Line plot.

Answer 1

You have the ability to put a number of traces into your data that you wish to plot and it will plot them.

You also can only have 1 title per graph, however, you can have multiple axis titles.

var firstPlotTrace = {
    z: z,
    x: x,
    y: y,
    type: 'contour'
    name: 'yaxis data'
};

var secondPlotTrace = {
    x: x11,
    y: x21,
    mode: 'lines+markers'
    name: 'yaxis2 data'
};

var plotData = [firstPlotTrace, secondPlotTrace];

var layout = {
    title: 'Double Plot Title',
    height: 400,
    width: 400,
    yaxis: {title: 'Simple Contour Plot Axis', range: [-20, 20]}
    yaxis2: {title: 'Line and Scatter Plot Axis', range: [-20, 20]}
};

Plotly.newPlot('plotDiv', plotData, layout);

HTML -

<div id="plotDiv" style="height: 400px; width: 400px;"></div>