Home/ Questions/Q 9265957
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T14:12:19+00:00

I want to make it possible to download CSV-file from my Highchart … like

  • 0

I want to make it possible to download CSV-file from my Highchart … like in this Example.

Link to JSFiddle

I’ve tried to implement it, but it doesnt work in my code …. What could be the reason? I just want to alert the csv! Later i want to implement that you can download it …

Here is my code:

<script language="javascript" type="text/javascript" src="../js/jquery-1.8.3.js">   </script>
<script language="javascript" type="text/javascript" src="../js/jquery-ui-1.9.2.custom.js"</script>
<script src="../js/highcharts.js "></script>
<script src="../js/exporting.js "></script>
<script src="../js/exporting.src.js "></script>
<link rel="stylesheet" href="../css/jquery-ui-1.9.2.custom.css" type="text/css" />

<script type="text/javascript">

(function (Highcharts) {
var each = Highcharts.each;
Highcharts.Chart.prototype.getCSV = function () {
    var xAxis = this.xAxis[0],
        columns = [],
        line,
        csv = "", 
        row,
        col;

    if (xAxis.categories) {
        columns.push(xAxis.categories);
        columns[0].unshift("");
    }
    each (this.series, function (series) {
        columns.push(series.yData);
        columns[columns.length - 1].unshift(series.name);
    });

    // Transform the columns to CSV
    for (row = 0; row < columns[0].length; row++) {
        line = [];
        for (col = 0; col < columns.length; col++) {
            line.push(columns[col][row]);
        }
        csv += line.join(',') + '\n';
    }
    return csv;
};    
}(Highcharts));



$(function () {

$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: { renderTo: 'container', type: 'pie' ,  },
        title: {   text: 'Top 5 Power consumer overall' },    
        yAxis: {  title: { text: ' ', }            },
        legend: { enabled: false },

       series: [{   name: 'Work',  data:[1,2,3,4,5] }],
    });
});

}); 


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


</script>
</head>
<body>
<div id="container"></div>
<button id="getcsv" > Alert </button>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your code is already working:

    for download as cvs add this code block:

    Highcharts.getOptions().exporting.buttons.exportButton.menuItems.push({
    text: 'Download CSV',
    onclick: function () {
        Highcharts.post('http://www.highcharts.com/studies/csv-export/csv.php', {
            csv: this.getCSV()
        });
    }
});

    YOUR CODE DEMO

    • 0