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

Here is my chart: /

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?

I've tried to use the Highcharts export feature as exampled on their site: http://jsfiddle/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/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?

• javascript
• jquery
• csv
• highcharts

3 Answers 3

Check the following http://jsfiddle/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/uF4H7/12/ (click "download" next to "Alert CSV")

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.

Asiya Shaikh's suggestion only worked for me once I added the following Highcharts plugin:

<script src="http://highcharts.github.io/export-csv/export-csv.js"></script>

Which is a little weird considering how the plugin home page mentions nothing of the downloadXLS(); function.

If that doesn't work, you should also try using:

<script src="http://code.highcharts./modules/exporting.js"></script>

You can use the EXPORT-CSV plugin homepage as a reference, but as I said it doesn't mention downloadXLS().