CODEWITHSUNDEEP
angularjscsvhighchartsexport-to-csv
Adrien
Adrien

Reputation: 2934

Export data from highcharts in csv file with dates in milliseconds

I have an angularjs application with the library Highcharts.

In my application I have some graphs and want to export the data of the graphs in a CSV file. So I used the exporting function from highcharts but I have a problem with the dates. On my graphs, I display the dates with a format "MM/DD/YYYY hh:mm:ss" so when I export my data, I have the same format but I would have the dates in milliseconds. I try to change teh 'dateFormat' field in the exporting options but milliseconds is not part of the accepted formats.

This is my graph options:

widgetCtrl.chartDataLine = {
    chart: {
        type: 'spline',
        zoomType: 'x',
        isZoomed: false,
        marginTop:55
    },
    title: {
        text: 'title',
        align:'left',
        x: 20,
        y: 18,
        style: {
            fontSize: '14px'
        }
    },
    xAxis: {
        type: 'datetime',
        title: {
            text: 'Date time'
        }
    },
    yAxis: {
        title: {
            text: 'Power (W)'
        }
    },
    boost: {
        enabled: true
    },
    exporting: {
        fallbackToExportServer: false,
        enabled: true,
        allowHTML: true,
        filename: 'myFile',
        menuItemDefinitions: {
            downloadJSON: {
                onclick: function () {
                    downloadJSON('myFile.JSON', widgetCtrl.chartDataLine.series);
                },
                text: 'Download JSON'
            }
        },
        csv: {
            decimalPoint: '.',
            dateFormat: '%Y-%m-%d %H:%M:%S'
        },
        buttons: {
            contextButton: {
                menuItems: [
                    'printChart',
                    'downloadPNG',
                    'downloadJPEG',
                    'downloadPDF',
                    'downloadSVG',
                    'downloadCSV',
                    'downloadJSON'
                ]
            }
        }
    },
    navigation: {
        buttonOptions: {
            align: 'left'
        }
    }
    series: [...]
};

Do you have an idea how I coul do that without writing myself teh csv file but using the highcharts functions ?

Upvotes: 0

Views: 1928

Answers (1)

Wojciech Chmiel
Wojciech Chmiel

Reputation: 7372

Unfortunately, Highcharts does not have the default option to export data in milliseconds (timestamp). However, it can be done easily by wrapping Highcharts.Chart.prototype.getDataRows method and map the data array which is used for export.

(function(H) {
  H.wrap(H.Chart.prototype, 'getDataRows', function(proceed, multiLevelHeaders) {
    var rows = proceed.call(this, multiLevelHeaders);

    rows = rows.map(row => {
      if (row.x) {
        row[0] = row.x;
      }
      return row;
    });

    return rows;
  });
}(Highcharts));

Demo: https://jsfiddle.net/BlackLabel/5p1nvq37/

Upvotes: 1

Related Questions