OrgChart JS Documentation

Exporting

OrgChart Exporting

OrgChart JS support the following export formats:

  • PDF - A PDF file can be viewed, shared, and printed on any platform provided that users have Adobe Acrobat, Adobe Reader, or a PDF-compatible reader installed on their computers. A PDF file can also be uploaded to an intranet or the Web. You can also export an individual node with his children or an entire OrgChart JS to a PDF file.
  • PNG - A PNG file is an image file stored in the Portable Network Graphic (PNG) format. It contains a bitmap of indexed colors and uses lossless compression, similar to a .GIF file but without copyright limitations. PNG files are commonly used to store graphics for web images.
  • SVG - SVG images and their related behaviors are defined in XML text files which means they can be searched, indexed, scripted and compressed. Additionally this means they can be created and edited with any text editor and with drawing software.
  • CSV - A Comma Separated Values (CSV) file is a plain text file that contains a list of data. These files are often used for exchanging data between different applications. For example, databases and contact managers often support CSV files.

In order to enable PDF export you need to add node menu item in menu option and/or nodeMenu

 
    var chart = new OrgChart(document.getElementById("tree"), {
        menu: {
            pdf: { text: "Export PDF" },
            png: { text: "Export PNG" },
            svg: { text: "Export SVG" },
            csv: { text: "Export CSV" }
        },
        nodeMenu: {
            pdf: { text: "Export PDF" },
            png: { text: "Export PNG" },
            svg: { text: "Export SVG" }
        },
        ... 
    });
    

Here is the result:

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

 
        function pdf(nodeId) {
            chart.exportPDF({filename: "MyFileName.pdf", expandChildren: true, nodeId: nodeId});
        }
        function png(nodeId) {
            chart.exportPNG({filename: "MyFileName.png", expandChildren: true, nodeId: nodeId});
        }
        function svg(nodeId) {
            chart.exportSVG({filename: "MyFileName.svg", expandChildren: true, nodeId: nodeId});
        }

        var chart = new OrgChart(document.getElementById("tree"), {
            menu: {
                export_pdf: {
                    text: "Export PDF",
                    icon: OrgChart.icon.pdf(24, 24, "#7A7A7A"),
                    onClick: pdf
                },
                export_png: {
                    text: "Export PNG",
                    icon: OrgChart.icon.png(24, 24, "#7A7A7A"),
                    onClick: png
                },
                export_svg: {
                    text: "Export SVG",
                    icon: OrgChart.icon.svg(24, 24, "#7A7A7A"),
                    onClick: svg
                }
            },
            nodeMenu: {
                export_pdf: {
                    text: "Export PDF",
                    icon: OrgChart.icon.pdf(24, 24, "#7A7A7A"),
                    onClick: pdf
                },
                export_png: {
                    text: "Export PNG",
                    icon: OrgChart.icon.png(24, 24, "#7A7A7A"),
                    onClick: png
                },
                export_svg: {
                    text: "Export SVG",
                    icon: OrgChart.icon.svg(24, 24, "#7A7A7A"),
                    onClick: svg
                }
            },
            ...
        });    
    

In the demo below the chart is collapsed, the children will be expanded on export

Export to A4 format:

 
        function pdf(nodeId) {
            chart.exportPDF({
                format: "A4"
            });
        }

        var chart = new OrgChart(document.getElementById("tree"), {
            menu: {
                export_pdf: {
                    text: "Export PDF",
                    icon: OrgChart.icon.pdf(24, 24, "#7A7A7A"),
                    onClick: pdf
                },
            }
            ...
        });    
    

Add header and footer:

 
        function pdf(nodeId) {
            chart.exportPDF({
                format: "A4",
                header: 'My Header',
                footer: 'My Footer. Page {current-page} of {total-pages}'
            });
        }

        var chart = new OrgChart(document.getElementById("tree"), {
            menu: {
                export_pdf: {
                    text: "Export PDF",
                    icon: OrgChart.icon.pdf(24, 24, "#7A7A7A"),
                    onClick: pdf
                },
            }
            ...
        });    
    

PDF Preview:

 
        OrgChart.pdfPrevUI.show(chart, {
            format: "A4",
            header: 'My Header',
            footer: 'My Footer. Page {current-page} of {total-pages}'
        });
    

CSV and SVG are client side exports, PDF and PNG are calling BALKANGraph export server.

There may be cases where you don't want to use BALKANGraph's export server running at https://balkangraph.com/export, for instance if you are running a secure website or if you don't want your data to be passed to https://balkangraph.com. In that cases you have to setup your export server and to change exportUrl option

 
    var chart = new OrgChart(document.getElementById("tree"), {
        exportUrl: "https://MyServer.com/export"
        ... 
    });
    

MyServer is the domain name of you server. It could be hosted under http or https.