4

I have created 3D Charts using ext js 6. I want to save the chart in PNG/ PDF / XLS file. Can you please let me know how to save the chart image as PNG / PDF / XLS file.

Thanks

1

1 Answer 1

2

Export chart as png fiddle:

function saveBase64AsFile(base64, fileName) {
    var link = document.createElement("a");
    link.setAttribute("href", base64);
    link.setAttribute("download", fileName);
    link.click();
}

Ext.application({
    name: 'Fiddle',

    launch: function() {
        var chart = Ext.create('Ext.chart.CartesianChart', {
            renderTo: document.body,
            width: 500,
            height: 500,
            flipXY: true,
            store: {
                fields: ['name', 'g1', 'g2'],
                data: [{
                    "name": "Item-0",
                    "g1": 18.34,
                    "g2": 0.04
                }, {
                       "name": "Item-1",
                       "g1": 2.67,
                       "g2": 14.87
                       }, {
                       "name": "Item-2",
                       "g1": 1.90,
                       "g2": 5.72
                       }, {
                       "name": "Item-3",
                       "g1": 21.37,
                       "g2": 2.13
                       }, {
                       "name": "Item-4",
                       "g1": 2.67,
                       "g2": 8.53
                       }, {
                       "name": "Item-5",
                       "g1": 18.22,
                       "g2": 4.62
                       }, {
                       "name": "Item-6",
                       "g1": 28.51,
                       "g2": 12.43
                       }, {
                       "name": "Item-7",
                       "g1": 34.43,
                       "g2": 4.40
                       }, {
                       "name": "Item-8",
                       "g1": 21.65,
                       "g2": 13.87
                       }, {
                       "name": "Item-9",
                       "g1": 12.98,
                       "g2": 35.44
                       }, {
                       "name": "Item-10",
                       "g1": 22.96,
                       "g2": 38.70
                       }, {
                       "name": "Item-11",
                       "g1": 0.49,
                       "g2": 51.90
                       }, {
                       "name": "Item-12",
                       "g1": 20.87,
                       "g2": 62.07
                       }, {
                       "name": "Item-13",
                       "g1": 25.10,
                       "g2": 78.46
                       }, {
                       "name": "Item-14",
                       "g1": 16.87,
                       "g2": 56.80
                       }]
            },

            //set legend configuration
            legend: {
                docked: 'right'
            },

            //define the x and y-axis configuration.
            axes: [{
                type: 'numeric',
                position: 'bottom',
                grid: true,
                minimum: 0
            }, {
                   type: 'category',
                   position: 'left'
                   }],

            //define the actual bar series.
            series: [{
                type: 'bar',
                xField: 'name',
                yField: ['g1', 'g2'],
                axis: 'bottom',
                // Cycles the green and blue fill mode over 2008 and 2009
                // subStyle parameters also override style parameters
                subStyle: {
                    fill: ["#115fa6", "#94ae0a"]
                }
            }]
        });

        setTimeout(function () {
            saveBase64AsFile(chart.getImage("stream").data, "export.png");
        }, 1000);
    }
});
1
  • This fiddle didn't work for me, I wondered how I could tie the action to a menu component item?
    – B. Clincy
    Oct 28, 2020 at 15:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.