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!
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 !!!
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>
datas. I am writing a async loop to generate them all and get the url for each run. By using the code, the plotly still "plot" each even the display is set none. This won't speed up the code (please correct me if I'm wrong). Is there an direct way?.then( part, you might wanna check this link here, plotly offline for python can convert to image itseems, don't know about the efficiency of the conversion!