Show / Hide Table of Contents

Other Export

OrgChart Exporting

Export to Visio

To be able to export to Visio the images need to be Base64.

With Visio you have most of the export functionalities as in PDF/PNG Export


Visio also uses the export server to do the export.

Export to SVG

You can add the SVG export as a menu item in the menu:

 
        
menu: {
    svg: { text: "Export SVG" },
}
and/or in the nodeMenu option:
 
        
nodeMenu: {
    svg: { text: "Export SVG" },
}

Here is the result:


With SVG you can export collpased clildren, given levels of parents or children and styles.

Export to CSV

You can add the CSV export as a menu item in the menu:

 
        
menu: {
    csv: { text: "Export CSV" },
}
and/or in the nodeMenu option:
 
        
nodeMenu: {
    csv: { text: "Export CSV" },
}

Here is the result:


Export to XML

You can add the XML export as a menu item in the menu:

 
        
menu: {
    xml: { text: "Export XML" },
}
and/or in the nodeMenu option:
 
        
nodeMenu: {
    xml: { text: "Export XML" },
}

Here is the result:


Export to JSON

You can add the JSON export as a menu item in the menu:

 
        
menu: {
    json: { text: "Export JSON" },
}
and/or in the nodeMenu option:
 
        
nodeMenu: {
    json: { text: "Export JSON" },
}

Here is the result:


Export event listeners

You could use onExportStart and onExportEnd methods to change the export behavior.

 
    
// add before chart.load()
chart.onExportStart(() => {
    console.log("exporting")
});
    

Here is an example of how you could get only the name and the title fiedls, changing args.nodes:

 

// add before chart.load()
chart.onExportStart((args) => {
    if (args.ext == 'csv' || args.ext == 'xml'){
        var newNodes = [];
        for(var i = 0; i < args.nodes.length; i++){
            newNodes.push({
                name: args.nodes[i].name,
                title: args.nodes[i].title
            })
        }
        args.nodes = newNodes;
    }
});
    

Use return false to avoid exporting:

 
    
// add before chart.load()
chart.onExportStart(() => {
    // add your code here
    return false;
});