CODEWITHSUNDEEP
javascriptplotly
WCMC
WCMC

Reputation: 1791

Javascript Plotly. How to create a plot but not actually plot it.

I am using plotly javascript to draw some plots. But what I actually need is the url and I don’t really need the ploly to draw it on the web.

Here is an example, https://codepen.io/slfan2013/pen/xpWMyW. What I really need is the url and I don’t want the plot show on the website. How to do that? Thanks!

Upvotes: 0

Views: 1117

Answers (2)

BHAVYA BHUSHAN
BHAVYA BHUSHAN

Reputation: 114

You don't need to actually plot the plot, you can pass the plotting data in Plotly.toImage, like:

var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  mode: 'markers'
};

var trace2 = {
  x: [2, 3, 4, 5],
  y: [16, 5, 11, 10],
  mode: 'lines'
};

var trace3 = {
  x: [1, 2, 3, 4],
  y: [12, 9, 15, 12],
  mode: 'lines+markers'
};

var data = [trace1, trace2, trace3];

var layout = {
  title: 'Line and Scatter Plot'
};

Plotly.toImage({
    data: data,
    layout: layout
  }, {
    height: 600,
    width: 800
  })
  .then(
    function(url) {
      console.log(url) // this is what i really need!! I dont want it to be ploted~!

    }
  );
<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  <div id="myDiv">
    <!-- Plotly chart will be drawn inside this DIV -->
  </div>
  <script>
    <!-- JAVASCRIPT CODE GOES HERE -->
  </script>
</body>

let me know if it helped !!!

Upvotes: 1

Naren Murali
Naren Murali

Reputation: 56650

Here is my solution, you can set the div CSS property display:none so that the graph is not shown. Then use plotly.purge() to remove the generated graph after the required content is obtained!

So to summarize, the graph is created(but not visible), the url is obtained, then the graph is purged!

var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  mode: 'markers'
};

var trace2 = {
  x: [2, 3, 4, 5],
  y: [16, 5, 11, 10],
  mode: 'lines'
};

var trace3 = {
  x: [1, 2, 3, 4],
  y: [12, 9, 15, 12],
  mode: 'lines+markers'
};

var data = [trace1, trace2, trace3];

var layout = {
  title: 'Line and Scatter Plot'
};

Plotly.newPlot('myDiv', data, layout).then(
  function(gd) {
    Plotly.toImage(gd, {
        height: 600,
        width: 800
      })
      .then(
        function(url) {
          console.log(url); // this is what i really need!! I dont want it to be ploted~!
          Plotly.purge('myDiv');

        }
      )
  });;
#myDiv {
  display: none;
}
<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  <div id="myDiv">
    <!-- Plotly chart will be drawn inside this DIV -->
  </div>
  <script>
    <!-- JAVASCRIPT CODE GOES HERE -->
  </script>
</body>

Upvotes: 0

Related Questions