Show / Hide Table of Contents

PNG/SVG Export (new)

All the examples are created for PNG, but they work the same way for SVG too.

PNG Preview

You can add the PNG/SVG Preview as a menu item: 

     
menu: {
    pngpreview: { text: "PNG Preview" }
}

and/or as a nodeMenu option: 

     
nodeMenu: {
    pngpreview: {text: "PNG Preview from here"}
}

Click on the Menu option to open the Preview:

BALKAN Code Edit in BALKAN Code

Add header and footer

The header and footer are SVG definitions.

Define the function: 
     
function pngPreview(){
    chart.pngPreviewUI.show({
        header: '<text>My Header</text>',
        footer: '<text>My Footer. Page {current-page} of {total-pages}</text>'
    });
}
Use it in a menu option: 
     
menu: {
    pngPreview: {
        text: "Export PNG", 
        icon: OrgChart.icon.png(24, 24, "#7A7A7A"), 
        onClick: pngPreview

}
BALKAN Code Edit in BALKAN Code

Add pages programmatically

You can add custom pages in preview, using the pages property:

Here is how we export a chart by teams:

     
function pngExportPreview(){
    chart.pngPreviewUI.show({
                pages: [
            {
                nodeId: 2
            },
            {
                nodeId: 3,
                childLevels: 1
            },
            {
                nodeId: 4
            },
        ]
    })
};
BALKAN Code Edit in BALKAN Code


You can add a page with a custom content: 

         
function pngExportPreview() {
    chart.pngPreviewUI.show({
        pages: [
            {
                content: <svg>[Your SVG definition here]</svg>
            },
            {
                nodeId: 2
            }
        ]
    })
}
Here is how we can add a page with a logo:
BALKAN Code Edit in BALKAN Code

Localization

Here is what you can localize in the PNG/SVG Preview: 
         
chart.pngPreviewUI.locExport = 'Export';
chart.pngPreviewUI.locCancel = 'Close';
chart.pngPreviewUI.locParentLevels = 'parent levels';
chart.pngPreviewUI.locChildLevels = 'child levels';
chart.pngPreviewUI.locClickToAdd = 'Click on a node to display it here';
chart.pngPreviewUI.locAddNew = 'Add new PNG';
chart.pngPreviewUI.locRemove = 'Remove PNG';
Here is an example:
BALKAN Code Edit in BALKAN Code

Direct PNG/SVG Export

You can directly export using the exportToPNG method.
You can add the Export function as a menu or nodeMenu item: 

     
nodeMenu: {
    export_png: {
        text: 'Export PNG',
        icon: OrgChart.icon.png(24, 24, "#7A7A7A"),
        onClick: function (id) {
            chart.exportPNG({
                nodeId: id,
            });
        }
    }
},

Here is the result:

BALKAN Code Edit in BALKAN Code

Export options

     
chart.exportToPNG({
    childLevels: 1,
    parentLevels: 1,
    expandChildren: true,
    filename: "myChart.PNG",
    header: 'My Header',
    footer: 'My Footer. Slide {current-page} of {total-pages}',
    min: false,
    openInNewTab: true,
    nodeId: id,
    margin: [10, 10, 10, 10],
    padding: 50
});

Not all the options can work together.

Add header and footer

The header and footer are SVG definitions.

Define the function: 
     
function png(nodeId) {
    chart.exportToPNG({
        header: '<text style="font-size:36px;">My Header</text>',
        footer: '<text style="font-size:24px;">My Footer. Page {current-page} of {total-pages}</text>',
    });
}
Use it in a menu option: 
     
menu: {
    export_png: {
        text: "Export to PNG with my header and footer",
        icon: OrgChart.icon.PNG(24, 24, "#7A7A7A"),
        onClick: png
    },
},
BALKAN Code Edit in BALKAN Code

Export by pages

You can export multiple charts or a chart by teams, using the pages property:

You can use the below options: 
     
chart.exportToPNG({
    pages: {
        content: '<svg><text>My Header</text></svg>',
        chartInstance: chart,
        nodeId: 2,
        expandChildren: true,
        childLevels: 2,
        parentLevels: 1,
        min: false,
        header: '<text>My Header</text>',
        footer: '<text>My Footer. Page {current-page} of {total-pages}</text>'
    },
});

Here is how we export a chart by teams:

     
chart.exportToPNG({
        expandChildren: false,
        pages: [
            {
                nodeId: 2
            },
            {
                nodeId: 3,
                childLevels: 1
            },
            {
                nodeId: 4
            },
        ]
});
BALKAN Code Edit in BALKAN Code

How you can exrport multiple charts in one PNG file:

     
chart1.exportToPNG({
    pages: [
        { chartInstance: chart1, header: '<text>OrgChart 1</text>' },
        { chartInstance: chart2, header: '<text>OrgChart 2</text>' },
        { chartInstance: chart3, header: '<text>OrgChart 3</text>' },
        { chartInstance: chart4, header: '<text>OrgChart 4</text>' }
    ]
});
BALKAN Code Edit in BALKAN Code

Exporting Styles

Using the onExportStart and onExportEnd event listeners, you can change the export behaviour.

You can export the styles using the property args.styles

HTML:

     
<style id="myStyles">
    .node.HR rect {
        fill: #E99113;
    }
</style>

JavaScript:

     
// add before chart.load()
chart.onExportStart((args) => {
    args.styles += document.getElementById('myStyles').outerHTML;
});
Code example:
BALKAN Code Edit in BALKAN Code

Server JS
There may be cases where you don't want to use BALKAN OrgChart JS's export server, for instance if you are running a secure website or if you don't want your data to be passed to https://balkan.app In that case you have to setup your own server.
In this article