Exporting highcharts data to CSV file

Question

I've tried to use the Highcharts export feature as exampled on their site: http://jsfiddle.net/highcharts/cqjvD/ but I would like to be able to download the csv file instead of alerting/displaying it.

Here is my chart: http://jsfiddle.net/uF4H7/10/

The code for displaying the csv is simple, you just add:

$('#getcsv').click(function () {
   alert(chart.getCSV());
 });

Can this be done in html/js/highcharts?

Answer 1

Check the following http://jsfiddle.net/uF4H7/11/

$('#getcsv').click(function () {
    var chart = $('#container').highcharts();
    alert(chart.getCSV());
    window.open();
    //this line was added to your code to download the CSV
    window.open("data:text/csv;charset=utf-8," + escape(chart.getCSV()));
});

The following line tells browser to open the data in the new window - browsers do not recognize text/csv mime it so they ask you to download the CSV file

window.open("data:text/csv;charset=utf-8," + escape(chart.getCSV()));

Or you could use the new feature of HTML - the link which forces to download with download attribute. In your case add this code to javascript:

$('#getcsvAnchor').click(function() {
    var chart = $('#container').highcharts();
    $(this).attr('href', 'data:text/csv;charset=utf-8,'+escape(chart.getCSV())); 
    $(this).attr('download', "data-visualisation.csv");
});

And this to your HTML - link to download:

<a id="getcsvAnchor" href="#">download</a>

The javascript gets the CSV content and puts it as anchor href, then adds the download attribute to anchor where the value is filename. You could check preview here http://jsfiddle.net/uF4H7/12/ (click "download" next to "Alert CSV")

Answer 2

exporting: {
           buttons: {
               contextButton: {
                   menuItems: [{
                       textKey: 'downloadXLS',
                       onclick: function () {
                           this.downloadXLS();
                       }
                   }, {
                       textKey: 'downloadCSV',
                       onclick: function () {
                           this.downloadCSV();
                       }
                   }]
               }
           }
       },

You can add this options directly when you are creating highchart.