<h1>Plotly toImage</h1>
<h3>Plotly graph</h3>
<div id="plotly_div"></div>
<h3>png</h3>
<img id="png-export"></img>
<h3>jpg</h3>
<img id="jpg-export"></img>
<h3>svg</h3>
<img id="svg-export"></img>


<!-- Example by: https://codepen.io/timelyportfolio/ -->

var d3 = Plotly.d3;

var img_png = d3.select('#png-export');
var img_jpg = d3.select('#jpg-export');
var img_svg = d3.select('#svg-export');

// ternary mock for test
//  https://cdn.rawgit.com/plotly/plotly.js/master/test/image/mocks/ternary_lines.json
var mock = {
    "data": [
    {"mode": "markers",
      "y": [10, 15, 11, 17],
      "x": [1, 2, 3, 4],
      "type": "scatter"},
    {"mode": "lines",
      "y": [16, 5, 11, 10],
      "x": [2, 3, 4, 5],
      "type": "scatter"
    }],
  "layout": {
    "height": 400,
    "width": 500,
    "title": "Line and Scatter Plot"
  }
}

  Plotly.plot(
    'plotly_div',
    mock.data,
    mock.layout
  ).then(function(gd){
    Plotly.toImage(gd,{height:400,width:500})
      .then(function(url){
        img_png.attr("src", url);
        return Plotly.toImage(gd,{format:'png',height:400,width:500});
      })
      .then(function(url){
        img_jpg.attr("src",url);
        return Plotly.toImage(gd,{format:'jpeg',height:400,width:500});
      })
      .then(function(url){
        img_svg.attr("src",url);
        return Plotly.toImage(gd,{format:'svg',height:400,width:500});
      })
  });