CODEWITHSUNDEEP
excelcsvhighchartsexport
C Rakoczy
C Rakoczy

Reputation: 23

Highcharts: Can I export to the user an Excel or CSV of the raw data driving the chart?

I have charts generated via HighCharts through a WP AdCenter plugin. I want users (admins and subscribers alike) to be able to download the raw data driving the chart as Excel or CSV, not just a PNG, JPG or PDF image of the chart. Is there a way to do this without too serious a modification of the code (I'm not a PHP programmer). Is this additional export option a feature that could be rolled out in the near future?

Upvotes: 2

Views: 9531

Answers (3)

osyan
osyan

Reputation: 1856

This jsfiddle help you to create excel from highchart. The Download CSV option added to export menu works fine. just go through that and you will do your own better.

Here is the code:

/**
 * A small plugin for getting the CSV of a categorized chart
 */
(function (Highcharts) {

    // Options
    var itemDelimiter = ',',  // use ';' for direct import to Excel
        lineDelimiter = '\n';

    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(itemDelimiter) + lineDelimiter;
        }
        return csv;
    };    
}(Highcharts));

// Now we want to add "Download CSV" to the exporting menu. We post the CSV
// to a simple PHP script that returns it with a content-type header as a 
// downloadable file.
// The source code for the PHP script can be viewed at 
// https://raw.github.com/highslide-software/highcharts.com/master/studies/csv-export/csv.php

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



var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]

});

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

Upvotes: 10

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

You can add export button (http://api.highcharts.com/highcharts#exporting.buttons.contextButton.onclick) and prepare function which will get all values from chart (kept in chart.series object) and push to string/array. Then you need to find a solution how to "produce" file in javascript, and fill it with array/string.

Upvotes: 1

wergeld
wergeld

Reputation: 14442

You can do it outside the scope of HighCharts. You can always pull out what the series.data values are and iterate through them to make a CSV from within javascript on the page. Or you could do it ahead of time on the backend.

Upvotes: 1

Related Questions