CODEWITHSUNDEEP
javascriptcsvhighcharts
Leon Gaban
Leon Gaban

Reputation: 39018

How to convert long string into CSV using the export-csv plugin for HighCharts

export-csv for HighCharts

This is the method I'm trying to use: Chart.getCSV()

Note I'm not using HighCharts ugly menu dropdown feature. Their chart.options.exporting.enabled is set false in our app. We have another button which exist in another component whose purpose is to create a CSV from the Chart.

According to the docs all I need is to call .getCSV() on the chart object itself.

return priceLine
.then(alertSeries)
.then(tagLine)
.then(renderChart(chart))
.then((chart) => {
    // const pricelineData = chart.get('series-priceline').data;
    // chart.options.navigator.series.data = pricelineData;
    const csv = chart.getCSV();
    const array = csv.split(',');
    console.log(csv)
    console.log('array', array)

    ChartExport.storeChart(chart);
    this.chartLoading = false;
    return chart;
});

The Chart object: https://gist.github.com/leongaban/62ae997e45a697002f699ae0515a1321

However when I do that, what I see is a 1 long string, if I do getTable() I see it in log out HTML, how would you convert this into a CSV? And then download it?:

https://gist.github.com/leongaban/0edc8fb40b500a40a06e548b35a2adf7

array const array = csv.split(','):

https://gist.github.com/leongaban/9110d2e9df9e1bf469e7909e962ef315

Their .getTable() will produce this HTML in the console.log is there an easy way to convert this into a downloadable CSV file?

https://gist.github.com/leongaban/f60ea104b2528e7d5721dafc7be1c391

Upvotes: 0

Views: 209

Answers (1)

Leon Gaban
Leon Gaban

Reputation: 39018

Ah so there was no help in their documents on how to do this, but I looked at their source code and found this: 

/**
 * Call this on click of 'Download CSV' button
 */
Highcharts.Chart.prototype.downloadCSV = function () {
    var csv = this.getCSV(true);
    getContent(
        this,
        'data:text/csv,\uFEFF' + encodeURIComponent(csv),
        'csv',
        csv,
        'text/csv'
    );
};

/**
 * Call this on click of 'Download XLS' button
 */
Highcharts.Chart.prototype.downloadXLS = function () {
    var uri = 'data:application/vnd.ms-excel;base64,',
        template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">' +
            '<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>' +
            '<x:Name>Ark1</x:Name>' +
            '<x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->' +
            '<style>td{border:none;font-family: Calibri, sans-serif;} .number{mso-number-format:"0.00";}</style>' +
            '<meta name=ProgId content=Excel.Sheet>' +
            '<meta charset=UTF-8>' +
            '</head><body>' +
            this.getTable(true) +
            '</body></html>',
        base64 = function (s) { 
            return window.btoa(unescape(encodeURIComponent(s))); // #50
        };
    getContent(
        this,
        uri + base64(template),
        'xls',
        template,
        'application/vnd.ms-excel'
    );
};

Sweet! So now all I have to do is call these 2 functions:

this.downloadCsv = () => {
    const csv = ChartExport.getChart().getCSV();
    console.log(csv);
    this.$close();
    ChartExport.getChart().downloadXLS();
    ChartExport.getChart().downloadCSV();
};

Now all I need to do is clear out the empty series and fix the time formats and rename the file.

Upvotes: 1

Related Questions