How to export complete SVG into PNG as my SVG is very large.

Question

I have 2000 Nodes in SVG using getOrgChart new version. I want to export the complete SVG into PNG but PNG only shows the nodes which are rendering on browser. Like if 20 Nodes are rendering on browser, then PNG is showing only 20 Nodes but I need the whole SVG having 2000 Nodes.

Answer 1

BALKANGraph developer evangelist here.

By default collapsed children will not be exported, if you want to change that you have to add your own export node menu item

Here is an example:

  function pdf(nodeId) { chart.exportPDF("MyFileName.pdf", true, nodeId); } function png(nodeId) { chart.exportPNG("MyFileName.png", true, nodeId); } function svg(nodeId) { chart.exportSVG("MyFileName.svg", true, nodeId); } var chart = new OrgChart(document.getElementById("tree"), { menu: { export_pdf: { text: "Export PDF", icon: BALKANGraph.icon.pdf(24, 24, "#7A7A7A"), onClick: pdf }, export_png: { text: "Export PNG", icon: BALKANGraph.icon.png(24, 24, "#7A7A7A"), onClick: png }, export_svg: { text: "Export SVG", icon: BALKANGraph.icon.svg(24, 24, "#7A7A7A"), onClick: svg } }, nodeMenu: { export_pdf: { text: "Export PDF", icon: BALKANGraph.icon.pdf(24, 24, "#7A7A7A"), onClick: pdf }, export_png: { text: "Export PNG", icon: BALKANGraph.icon.png(24, 24, "#7A7A7A"), onClick: png }, export_svg: { text: "Export SVG", icon: BALKANGraph.icon.svg(24, 24, "#7A7A7A"), onClick: svg } }, nodeBinding: { field_0: "name", field_1: "title", img_0: "img" }, tags:{ collapsed: {state: BALKANGraph.COLLAPSE} }, nodes: [ { id: 1, tags: ["collapsed"], name: "Billy Moore", title: "CEO", img: "https://balkangraph.com/js/img/2.jpg" }, { id: 2, pid: 1, name: "Billie Rose", title: "Dev Team Lead", img: "https://balkangraph.com/js/img/5.jpg" }, { id: 3, pid: 1, name: "Glenn Bell", title: "HR", img: "https://balkangraph.com/js/img/10.jpg" }, { id: 4, pid: 3, name: "Blair Francis", title: "HR", img: "https://balkangraph.com/js/img/11.jpg" } ] }); 

 html, body{ width: 100%; height: 100%; padding: 0; margin:0; overflow: hidden; font-family: Helvetica; } #tree{ width:100%; height:100%; } 

 <script src="https://balkangraph.com/js/latest/OrgChart.js"></script> <div id="tree"/> 

If you export the chart above all nodes will be expanded