CODEWITHSUNDEEP
javascriptplotpolymerplotly
Tobias Etter
Tobias Etter

Reputation: 774

Plotly.js only one plot working when using multiple plots on same page

I'm trying to use Plotly to display multiple plots on the same page in my Polymer application.

Here you can see, how I add the plots:

var layout = {
    hovermode: 'closest',
    title: title,
    xaxis: {
        title: title,
        titlefont: {
            family: 'Arial, monospace',
            size: 20,
            color: '#7f7f7f'
        }
    },
    yaxis: {
        title: 'Trigger rate',
        titlefont: {
            family: 'Arial',
            size: 20,
            color: '#7f7f7f'
        }
    }
};


for(var i=0; i<25; i++) {

    var data = [{
        x: xtime,
        y: yrate,
        name: 'DM'+i,
        text: hints,
        type: 'Scatter+Lines'

    }];

    cname="plot"+i;
    appendDiv(cname);
    Plotly.newPlot(cname, data, layout, {showLink: false});

}

All of the plots are displayed correctly. But all the "functions" of Plotly like zooming or save as image do only work for the last plot. Same for the information on hovering.

I searched on several pages, but did not find a solution.

There is an issue on github with the same problem when using ioslides presentations. But I don't use isoslides. https://github.com/ropensci/plotly/issues/463

Does someone know, how to use multiple plotly plots on the same page with all the functionality?

thank you

Upvotes: 3

Views: 3181

Answers (1)

abalter
abalter

Reputation: 10393

Does this example help?

HTML:

<html>

  <head>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
  <script data-require="[email protected]" data-semver="1.0.0" src="https://cdn.plot.ly/plotly-latest.min.js" defer></script>
  <script src="script.js" defer></script>
  </body>

</html>

JAVASCRIPT:

var layout = 
{
    width: 500,
    height: 400,
    hovermode: 'closest',
    title: "title",
    xaxis: {
        title: "X",
        titlefont: {
            family: 'Arial, monospace',
            size: 20,
            color: '#7f7f7f'
        }
  },
  yaxis: {
      title: 'Y',
      titlefont: {
          family: 'Arial',
          size: 20,
          color: '#7f7f7f'
      }
  }
};

var x_vals = [];
for (var i = 0; i < 10; i++)
{
  x_vals.push(i);
}

function makeYVals(x)
{
    var y_vals = x.map(function(x)
  {
    return 2 + 1.3*x + (1 - 2*Math.random());
  });

  return y_vals;
}

for (var graph_num = 0 ; graph_num < 3; graph_num++)
{
  var graph_div = document.createElement("div");
  graph_div.id = "graph-" + graph_num;
  document.body.appendChild(graph_div);

  console.log(graph_div.id);

  var y_vals = makeYVals(x_vals);

  var data = 
  {
    x: x_vals,
    y: y_vals,
    mode: 'lines+markers',
    type: 'scatter'
  };

  layout.title = "Graph " + graph_num;

  console.log(data);

  Plotly.newPlot(graph_div, [data], layout);
}

http://plnkr.co/edit/XluyqzOLOYAtdzp9EevX?p=preview

Upvotes: 2

Related Questions