CODEWITHSUNDEEP
javascriptjquerycsvhighcharts
user40721
user40721

Reputation: 337

Exporting highcharts data to CSV file

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?

Upvotes: 4

Views: 12188

Answers (3)

Colin
Colin

Reputation: 1846

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.com/modules/exporting.js"></script>

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

Upvotes: 3

Asiya Shaikh
Asiya Shaikh

Reputation: 59

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.

Upvotes: 3

user3714582
user3714582

Reputation: 1940

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")

Upvotes: 7

Related Questions