Combining an area plot with a scatter plot using plotly.js

Question

I’m using plotly.js to build a quality control scatter plot. So essentially I calculate the mean and standard deviation of my data and create quality control confidence ranges. So the mean plus 2x the Standard Deviation will be the lower and higher thresholds respectively. So I have two examples of plots here, one that shades an area based on a yAxis variable here, and another that’s simple scatter plot here. Is it possible to combine these two plots together? Is there a better approach with plotly.js? I’m new using this library and not sure if this is even possible. All my attempts of combining these plots have failed so any help is greatly appreciated, thanks!

JS for scatter plot

var trace1 = {
  x: [1, 2, 3, 4, 5],
  y: [1, 6, 3, 6, 1],
  mode: 'markers+text',
  type: 'scatter',
  name: 'A',
  marker: { size: 10 }
};

var trace2 = {
  x: [1.5, 2.5, 3.5, 4.5, 5.5],
  y: [4, 1, 7, 1, 4],
  mode: 'markers+text',
  type: 'scatter',
  name: 'B',
  marker: { size: 10 }
};

var data = [ trace1, trace2 ];

var layout = {
  xaxis: {
    range: [ 0.75, 5.25 ]
  },
  yaxis: {
    range: [0, 8]
  },
  legend: {
    y: 0.5,
    yref: 'paper',
    font: {
      family: 'Times New Roman',
      size: 20,
      color: 'black',
    }
  },
  title:'Simple Scatter'
};

Plotly.newPlot('myDiv', data, layout, {displayModeBar: true});

JS for area coverage

var stacksDiv = document.getElementById("myDiv");
var traces = [
    {x: [1,2,3], y: [3,3,3], fill: 'tozeroy'},
    {x: [1,2,3], y: [2,2,2], fill: 'none'},
    {x: [1,2,3], y: [1,1,1], fill: 'tonexty'}
];
function stackedArea(traces) {
    for(var i=1; i<traces.length; i++) {
        for(var j=0; j<(Math.min(traces[i]['y'].length, traces[i-1]['y'].length)); j++) {
            traces[i]['y'][j] += traces[i-1]['y'][j];
        }
    }
    return traces;
}

Plotly.newPlot(stacksDiv, stackedArea(traces), {title: 'stacked and filled line chart'});

Rudresh Ajgaonkar Rudresh Ajgaonkar · Accepted Answer · 2016-06-21T21:35:17

var trace2 = {
    x: [-0.100387678599, -0.841098362432, -0.086900337279, -0.418153015989, -0.197122458852, 0.0391933774019, -0.759329967599, -1.29266640992, 0.950624526622, 1.52725553555, 2.25231901948, 1.84936962902, 0.833618714205, 2.42998331172, 1.73583322891, 3.19694965552, -0.909512478385, 0.983932265051, -0.992449424459, 2.349425425, -1.60550784046, 2.68216122416, 2.22665169157, -0.775707830008, 0.569030921894, 0.310849282625, 2.39935206131, -1.66045702411, 3.76747878057, 3.05333459172, -3.35932368186, 3.43730482552, -3.07611001807, -0.842850343527, 3.50008556345, 0.165085596719, -0.339561268287, -1.74747448536, 3.56148886503, 1.8353330132, -1.90428086596, -0.912688959871, -2.37825362991],
    y: [0.14252201109, 0.745253687488, 1.16250599725, 2.47176489125, -1.69476239552, -0.48991323684, 1.84409425219, 0.367526589193, -0.328695718905, 2.14081057301, 2.03064486378, -0.904917704389, -0.736099553953, -0.479945186555, 1.05076717167, 2.31045246862, 3.56214860102, -1.24356092573, 2.81251569105, 0.0354567947856, -0.764543463049, -0.463534094967, 0.121969881263, 3.10372387334, -3.07803266701, 3.94722158567, -2.3010720086, 0.522405164718, 2.09399114056, -0.206807957036, -0.102937553009, 1.93741482093, 2.13939929808, 2.31731711195, 2.04266966673, -2.83044062307, -1.29617222855, -0.0602624529294, -0.288215534329, 3.93478999833, 0.185708369263, -0.495944639256, -0.147527715708],
    z: [-0.0850216981743, 0.0772495602215, 0.822100957178, 0.234493023372, 1.32486987031, 1.35806542101, -0.737286816662, -0.563373179749, -0.0551875444142, -0.104727172455, 0.653748756692, 1.99993870003, 2.1181425229, 1.5259703198, -0.621228886025, 0.409865697587, 0.65584453111, 2.11519050918, 0.311775993159, 1.78321165695, 0.472856801961, 0.918408722859, 3.36357867891, 0.253121323865, 2.00494245448, 0.725818892026, -0.791414427718, 0.339800250917, 1.43633692227, -0.644759286391, 1.06252011487, -0.884604393579, 0.590838097803, -1.77517601605, 1.03386775027, -0.451081715245, 2.89900356475, 1.50485074307, -0.199970622936, 2.71850157406, -2.37896493905, -1.03295302469, 1.42318432732],
    text: ["size:4",  "size:9",  "size:6",  "size:5",  "size:1",  "size:1",  "size:5",  "size:6", "size:10",  "size:1", "size:11",  "size:5", "size:11",  "size:8",  "size:4",  "size:2",  "size:9",
            "size:11", "size:9",  "size:9",  "size:4",  "size:2",  "size:7",  "size:6",  "size:3",  "size:4",  "size:3",  "size:5", "size:10",  "size:9",  "size:3",  "size:7",  "size:5",  "size:5",
            "size:10",  "size:4",  "size:3",  "size:1",  "size:7", "size:11",  "size:5",  "size:3",  "size:4"],
    mode: 'markers',
    marker: {
        // color: ['blue', 'yellow', 'blue', 'blue', 'green', 'green', 'red', 'blue', 'blue', 'blue', 'red', 'blue', 'red', 'green', 'blue', 'green', 'green', 'blue', 'green', 'red', 'blue', 'green', 'red', 'green', 'yellow', 'green', 'yellow', 'yellow', 'green', 'yellow', 'green', 'red', 'blue', 'blue', 'red', 'blue', 'yellow', 'red', 'green', 'blue', 'green', 'red', 'red'],
        color : "green",
        size: [ 4,  9,  6,  5,  1,  1,  5,  6, 10,  1, 11,  5, 11,  8,  4,  2,  9,
                11,  9,  9,  4,  2,  7,  6,  3,  4,  3,  5, 10,  9,  3,  7,  5,  5,
                10,  4,  3,  1,  7, 11,  5,  3,  4],
        symbol: 'circle',
        line: {
            color: 'rgb(204, 204, 204)',
            width: 1
        },
        opacity: 0.9
    },
    type: 'scatter3d',
    name: 'category2',
    title:'title2',
};

var trace1 = {
        x: [2.0522699155, 1.60603507656, 3.98979463908, 0.800202189637, 4.16783956636, 2.95313983879, 5.0, 3.41759950759, 4.02288405655, 2.94010152597, 3.63034369928, 3.16032847173, 2.84232962045, 3.64970293361, 2.66786174731, 1.03749190769, 2.17855088691, 0.942208241258, 2.78224452996, 3.30213001295, 3.22296192645, 2.472764363, 3.00401653801, 2.63945959172, 1.9266212172],
        // y: [0.14252201109, 0.745253687488, 1.16250599725, 2.47176489125, -1.69476239552, -0.48991323684, 1.84409425219, 0.367526589193, -0.328695718905, 2.14081057301, 2.03064486378, -0.904917704389, -0.736099553953, -0.479945186555, 1.05076717167, 2.31045246862, 3.56214860102, -1.24356092573, 2.81251569105, 0.0354567947856, -0.764543463049, -0.463534094967, 0.121969881263, 3.10372387334, -3.07803266701, 3.94722158567, -2.3010720086, 0.522405164718, 2.09399114056, -0.206807957036, -0.102937553009, 1.93741482093, 2.13939929808, 2.31731711195, 2.04266966673, -2.83044062307, -1.29617222855, -0.0602624529294, -0.288215534329, 3.93478999833, 0.185708369263, -0.495944639256, -0.147527715708],
        y : [3.80802778444, 3.24303183309, 3.90459129274, 1.48507886338, 5.0, 3.21697257561, 0.0, 3.59728336393, 3.48023605288, 4.04693568382, 1.93203256347, 1.94519341179, 2.93007560776, 4.57633585255, 4.09858787614, 1.06912858064, 3.04012649902, 2.20718355604, 2.38150971107, 2.12206089387, 1.92348823442, 2.53393341278, 3.75945720171, 2.43140112455, 2.44696845761],
        // z: [-0.0850216981743, 0.0772495602215, 0.822100957178, 0.234493023372, 1.32486987031, 1.35806542101, -0.737286816662, -0.563373179749, -0.0551875444142, -0.104727172455, 0.653748756692, 1.99993870003, 2.1181425229, 1.5259703198, -0.621228886025, 0.409865697587, 0.65584453111, 2.11519050918, 0.311775993159, 1.78321165695, 0.472856801961, 0.918408722859, 3.36357867891, 0.253121323865, 2.00494245448, 0.725818892026, -0.791414427718, 0.339800250917, 1.43633692227, -0.644759286391, 1.06252011487, -0.884604393579, 0.590838097803, -1.77517601605, 1.03386775027, -0.451081715245, 2.89900356475, 1.50485074307, -0.199970622936, 2.71850157406, -2.37896493905, -1.03295302469, 1.42318432732],
        z : [3.97479986154, 2.20251587247, 1.91885091958, 3.06216739476, 3.37245559999, 2.23122564522, 2.35036121228, 2.62375347613, 1.71093693468, 1.23114425973, 1.67539170543, 0.807655555521, 4.26051739287, 2.32537114197, 3.5798240995, 2.15458204352, 2.75668482729, 1.17333051934, 2.41542282588, 1.87953707438, 2.57418967735, 1.83480174146, 1.65767515867, 4.02426576613, 3.67825997338],
        text: ["size:4",  "size:9",  "size:6",  "size:5",  "size:1",  "size:1",  "size:5",  "size:6", "size:10",  "size:1", "size:11",  "size:5", "size:11",  "size:8",  "size:4",  "size:2",  "size:9",
                "size:11", "size:9",  "size:9",  "size:4",  "size:2",  "size:7",  "size:6",  "size:3",  "size:4",  "size:3",  "size:5", "size:10",  "size:9",  "size:3",  "size:7",  "size:5",  "size:5",
                "size:10",  "size:4",  "size:3",  "size:1",  "size:7", "size:11",  "size:5",  "size:3",  "size:4"],
        mode: 'markers',
        marker: {
            //color: ['blue', 'yellow', 'blue', 'blue', 'green', 'green', 'red', 'blue', 'blue', 'blue', 'red', 'blue', 'red', 'green', 'blue', 'green', 'green', 'blue', 'green', 'red', 'blue', 'green', 'red', 'green', 'yellow', 'green', 'yellow', 'yellow', 'green', 'yellow', 'green', 'red', 'blue', 'blue', 'red', 'blue', 'yellow', 'red', 'green', 'blue', 'green', 'red', 'red'],
            color : "blue",
            size: [3, 1, 11, 9, 4, 9, 5, 8, 2, 3, 11, 9, 6, 2, 1, 10, 3, 9, 8, 1, 5, 10, 4, 10, 3],
            symbol: 'circle',
            line: {
                color: 'rgb(204, 204, 204)',
                width: 1
            },
            opacity: 0.9
        },
        type: 'scatter3d',
        name : 'category1',
        title: 'title1'

    };




var data = [trace1,trace2];
var layout = {margin: {
    l: 0,
    r: 0,
    b: 0,
    t: 0
}, showlegend : true};
Plotly.newPlot('myDiv2', data, layout, { modeBarButtonsToRemove: ['sendDataToCloud'], displaylogo : false } );

In this code i have tried to combine 2 plots.

All you need is to make 2 traces seperately like, trace1 -- scatter , trace 2 -- line

var data = [trace1,trace2];

and then in configuuration call the Plotly.new plot method as follows,

Plotly.newPlot('myDiv2', data, layout, { modeBarButtonsToRemove: ['sendDataToCloud'], displaylogo : false } );

Hope that helps!

Combining an area plot with a scatter plot using plotly.js

1 Answers