CODEWITHSUNDEEP
highcharts
Upendra Sharma
Upendra Sharma

Reputation: 685

Set file type dynamically when click on exporting menu in highcharts using chart.exportChart function

I want to set filetype according to click on export menu on the right in the given url. For example if click on pdf then filetype should be set as application/pdf. var defaultTitle = "Kalar"; var drilldownTitle = ""; var ydrillupTitle = "# of Kalar"; var ydrilldownTitle = "";

                    var chart = new Highcharts.Chart({
                        chart: {
                            type: 'column',
                            renderTo: 'upendra',
                            events: {
                                drilldown: function(e) {
                                    chart.setTitle({ text: drilldownTitle + e.point.title });
                                    chart.yAxis[0].axisTitle.attr({
                                        text: ydrilldownTitle
                                    });
                                },
                                drillup: function(e) {
                                    chart.setTitle({ text: defaultTitle });
                                    chart.yAxis[0].axisTitle.attr({
                                        text: ydrillupTitle
                                    });
                                },
                                click: function(e) {
                                    chart.exportChart({
                                        filename: chart.options.title.text
                                    });
                                }
                            }
                        },

                        title: {
                            text: defaultTitle
                        },

                        subtitle: {
                            text: ''
                        },

                        credits: {
                            enabled: false
                        },

                        xAxis: {
                            categories: ['one', 'two']
                        },

                        yAxis: {
                            allowDecimals: false,
                            min: 0,
                            title: {
                                text: ydrillupTitle
                            }
                        },

                        plotOptions: {
                            column: {
                                stacking: 'normal',
                                showInLegend: true
                            }
                        },

                        series:[
                            {
                                name:'A', 
                                color:'#E9ECEE',
                                tooltip: {
                                    headerFormat: '',
                                    pointFormat: '{point.name}:<br/><b>{point.y}</b> Bookings (<b>{point.percentage:, .1f} %</b>)<br/>'
                                },
                                data:[
                                        {
                                            name: "A", 
                                            title: "A by Company",
                                            x:0, y:2
                                        }, {
                                            name: "", 
                                            x:1, y:0
                                        }
                                    ]
                            },
                            {
                                name:'Arrived', 
                                color:'#B3E5C4', 
                                tooltip: {
                                    headerFormat: '',
                                    pointFormat: '{point.name}:<br/><b>{point.y}</b> Bookings (<b>{point.percentage:, .1f} %</b>)<br/>'
                                },
                                data:[
                                        {
                                            name: "Arrived", 
                                            title: "Planned Bookings by Goods Type",
                                            x:0, y:10
                                        }, {
                                            name: "", 
                                            x:1, y:0
                                        }
                                    ]
                            },
                            {
                                name:'Unscheduled', 
                                color:'#A9ABAD', 
                                tooltip: {
                                    headerFormat: '',
                                    pointFormat: '{point.name}:<br/><b>{point.y}</b> Deliveries (<b>{point.percentage:, .1f} %</b>)<br/>'
                                },
                                data:[
                                        {
                                            name: "", 
                                            x:0, y:0
                                        }, 
                                        {
                                            name: "Unscheduled", 
                                            title: "Unscheduled Deliveries by Company",
                                            x:1, y:8
                                        }
                                    ]
                            },
                            {
                                name:'Rejected', 
                                color:'#FF838F', 
                                tooltip: {
                                    headerFormat: '',
                                    pointFormat: '{point.name}:<br/><b>{point.y}</b> Deliveries (<b>{point.percentage:, .1f} %</b>)<br/>'
                                },
                                data:[
                                        {
                                            name: "", 
                                            x:0, y:0
                                        }, 
                                        {
                                            name: "Rejected", 
                                            title: "Rejected Deliveries Reasons",
                                            x:1, y:7
                                        }
                                    ]
                            },
                            {
                                name:'Complete', 
                                color:'#B3E5C4', 
                                tooltip: {
                                    headerFormat: '',
                                    pointFormat: '{point.name}:<br/><b>{point.y}</b> Deliveries (<b>{point.percentage:, .1f} %</b>)<br/>'
                                },
                                data:[
                                        {
                                            name: "", 
                                            x:0, y:0
                                        }, 
                                        {
                                            name: "Complete", 
                                            title: "Actual Deliveries by Goods Type",
                                            x:1, y:6
                                        }
                                    ]
                            }
                        ]
                    });    
            });

Upvotes: 0

Views: 579

Answers (1)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

You can edit menuItems in exporting options and then set filename, extracting that information from title.

exporting: {
                        buttons: {
                            contextButton: {
                                menuItems: [{
                                    textKey: 'printChart',
                                    onclick: function () {
                                        this.print();
                                    }
                                }, {
                                    separator: true
                                }, {
                                    textKey: 'downloadPNG',
                                    onclick: function () {

                                        var title = this.title.textStr;

                                        this.exportChart({
                                            type: 'image/png',
                                            filename: title
                                        });
                                    }
                                }, {
                                    textKey: 'downloadJPEG',
                                    onclick: function () {
                                        var title = this.title.textStr;
                                        this.exportChart({
                                            type: 'image/jpeg',
                                            filename: title
                                        });
                                    }
                                }, {
                                    textKey: 'downloadPDF',
                                    onclick: function () {
                                        var title = this.title.textStr;
                                        this.exportChart({
                                            type: 'application/pdf',
                                            filename: title
                                        });
                                    }
                                }, {
                                    textKey: 'downloadSVG',
                                    onclick: function () {
                                         var title = this.title.textStr;
                                        this.exportChart({
                                            type: 'image/svg+xml',
                                            filename: title
                                        });
                                    }
                                }]
                            }
                        }
                    },

Example: http://jsfiddle.net/bmp6Leh5/4/

Upvotes: 1

Related Questions