Show / Hide Table of Contents

Other Exports

Export to Visio

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


Visio also uses the export server to do the export.

Visio options

 
         
    chart.exportVisio({
        expandChildren: true,
        min: false,
        openInNewTab: true,
        filename: "myChart.vsdx",
        parentLevels: 1,
        childLevels: 1,
        nodeId: id,
        margin: [10, 10, 10, 10],
        padding: 50   
    });
     

Not all the options can work together.

Here is a Code example with all the Visio export options:


Export to SVG

We’ve improved our export functionality! This export option is now obsolete and will no longer be supported. For a better experience, including live previews and customization please use the new SVG Export feature.

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.

SVG options

 
     
    chart.exportSVG({
        expandChildren: true,
        min: false,
        openInNewTab: true,
        filename: "myChart.svg",
        parentLevels: 1,
        childLevels: 1,
        nodeId: id,
        padding: 50
    });
     

Here is a Code example with all the SVG export options:


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:


CSV / XML / JSON export options

 
     
    chart.exportCSV({
        filename: "myChart.csv",
        nodeId: id,
    });
     

Here is a code example:


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;
});