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.

Sorry for that! I have updated the question with my code. Please look into it — Skand Vishwanath Peri
– Skand Vishwanath Peri, Commented Jun 20, 2016 at 18:06

Adjit · Accepted Answer · 2016-06-22 15:08:45Z

4

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>

edited Jun 22, 2016 at 15:08

answered Jun 20, 2016 at 18:59

Adjit

10.3k13 gold badges57 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Skand Vishwanath Peri Over a year ago

I have tried this. It is showing both the plots but the contour is shifting the axis by some value. Do you have any idea why this is happening?

Adjit Over a year ago

@SkandVishwanathPeri what do you mean by that? Is there anyway you can replicate the issue somewhere?

Skand Vishwanath Peri Over a year ago

@Adijit here is the code for both the plots together link. The problem is that the lines plot must intersect at (2.-2) as shown in this plot link. In the first plot the line plot is being shifted by some value. Don't know why?

Adjit Over a year ago

@SkandVishwanathPeri You just need to make the range of both axes the same. If you look, the y-axis 0 on the right is in a different spot than the y-axis 0 on the left. So the y-axes are different for both lines. take a look at the edit. As a side note, if you hover your mouse over the axis you can click and drag to adjust. Since they are 2 different types of lines their axis values are independent of each other

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related