Export Chart Data to CSV, Excel, and More, via Data URIs
It should be real simple to grab the currently visible series (optionally trimmed to the zoomed x-range), and construct a CSV data data uri, to allow downloading right from the browser, without an additional server hit. In fact, I'm going to try it right now. It might be possible, using certain binary (or XML) JS wizardry to construct the same for Excel.
Here’s a small plugin for getting the CSV for a categorized chart:
-
@Sushanth, currently there's no simple option for it - what happens is that the input is converted to a number, and as numbers are printed into a string, JavaScript only adds the number of decimals needed.
-
Sushanth commented
Hi Torstein,
Firstly, thanks for the awesome plugin. In the jsfiddle demo while exporting floating point values like 140.0, the decimal part is getting truncated is there a work around to retain the decimal part. Thanks in advance
-
Anonymous commented
How to reploace the server side code with C# wcf?
-
Ashwini Surve commented
i want to export chart as a whole to csv what should i do for that
-
Harry commented
This is nice but it doesn't seem to output the x-axis values if the chart is an xy-scatter or a time-series line chart.
-
Updated the demo to work with Highcharts 3.0.
-
Mark commented
This is a very attractive feature, AFAICS the example is not (no longer?) working though.
-
Anand commented
Thank you @Mathew Weaver
Worked for me. Had to make few changes based on my chart. (instead of series.data[j].x, I needed series.data[j].category) -
Chad Augur commented
I would not say it is impossible to make a nice save dialog. You could in fact fake the first part of the process rendering the format of the data into a dialog box, wherein there is a file name input, and a download/save button. Upon submitting the file then the URI would be implemented with the parameters from the save dialog.
-
Mathew Weaver commented
As Josh said, getting the viewable chart data is fairly easy. Here is a code snippet:
var csv = "";
for (var i = 0; i < chart.series.length; i++) {
if (chart.series[i].name == 'Navigator') continue;
var series = chart.series[i];
for (var j = 0; j < series.data.length; j++) {
if (series.data[j] != undefined && series.data[j].x >= series.xAxis.min && series.data[j].x <= series.xAxis.max) {
csv = csv + series.name + ',' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', series.data[j].x) + ',' + series.data[j].y + '\r\n';
}
}
} -
Mathew Weaver commented
I am looking to do the same thing that you describe. Did you ever get any further with this? Would you mind sharing a code snippet that gets the viewable chart data into a data URI?
-
Josh Pearce commented
In case anybody's interested, it's easy to transform the viewable chart data into a Data URI, but it's impossible to make a nice save as dialog.