How to export JavaScript chart to Excel file (HighCharts)

Question

I need to export a Javascript chart (HighCharts) to an excel file; the chart was displayed in a div, but excel does not display the html + css content that javascript generates, only displays text without style.

The solution will convert this when the chart was displayed in an image (jpeg), but I have no success ...

Thanks!

Answer 1

HighCharts already supports the export of images through the export module, which is packaged with it. Exporting After that, you can modify the script to save the image as you need. This, of course, is not a beginner and will require a lot of mess.

If it were me, I would change the code that responds to the export button so that I can activate it using JavaScript, and also pass information so that the PHP file on the inside can save the image the way you want. rather than returning it to the customer.

Answer 2

It may be a little late, but I stumbled upon it through Google so that it could help someone. The image with high image quality is in SVG format: http://en.wikipedia.org/wiki/Svg , you need to convert it to a bitmap image. You must change the export URL of the Highcharts settings to your own URL:

exporting : { url: 'http://mydomain.com/export.php' } 

In your export script, you have to convert the SVG image to a bitmap (I used PHP and imagick) and then export according to your needs, save the bitmap to the server, send by email, etc.,

Answer 3

After some searching, I found this recent answer in my forums , with jsfiddle to mess around.

It describes how to export CSV using a script on your server, which from past experience is the only way this can be done, because the HighChart chart itself does not contain almost enough information to create a convenient spreadsheet. We are already working with another graphics library and use phpExcel to create the table.

Answer 4

If you want to try the add-in, there is a way to use Javascript, HTML and css in Excel. It is called Funfun, and it contains an online editor with a built-in spreadsheet, so the transition between the website and Excel is not difficult.

Here is the diagram I made using Highcharts:

https://www.funfun.io/1/#/edit/5a61c190404f66229bda3f0f

In this example, I took a chart from the Highchart demo and replaced the data with mine. I store my data in an embedded spreadsheet, and thanks to the json file, I can use it in my javascript code.

This is how I get my data from a spreadsheet using a json file:

 { "data": "=A1:E16" } 

I store it in my script.js with the correct format, so I can directly load it into Highcharts (for numbers you have to convert your data to float or int):

 var data = []; for (var i = 1; i < $internal.data.length; i++) data.push( { x: parseFloat($internal.data[i][2]), y: parseFloat($internal.data[i][3]), z: parseFloat($internal.data[i][4]), name: $internal.data[i][1], country: $internal.data[i][0] } ); 

After you have selected all the parameters of your chart, you can add your data:

 series: [{ data: data }] 

Once you are happy with your chart, you can directly load it into Excel by pasting the URL into the Funfun add -in. Here's what it looks like with my example:

Of course, you can use a library other than Highcharts, there are many powerful libraries for visualizing data, such as charts.js and D3.js.

I know this is an old post, but I hope this helps people with the same problem.

Disclosure: I am a developer at Funfun.

Answer 5

I know this is too late, but I have the same problem and this jsfiddle helped me create excel from highchart. Added option Download CSV , added to export menu. 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  that returns it with a content-type header as a // downloadable file. // The source code for the PHP  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()); }); 

Answer 6

Have you already done this? If success can help or the initial demonstration will help me, I got lost, like you.

Answer 7

If you're good at converting a chart to an image, just use the screenshot (Print Scrn on Windows, then paste it into any image editor or Command + Shift + 4 on Mac) and then release the Excel image.