Created
August 22, 2014 21:38
-
-
Save philfreo/0a4d899de4257e08a000 to your computer and use it in GitHub Desktop.
4 different ways to save a Highcharts chart as a PNG (with and without a server)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Method 1: simply use Highcharts built-in functionality (SVG -> Highcharts server -> PNG) | |
// Downside: won't work in webview native apps that don't handle the form response | |
highcharts.exportChart({ | |
filename: filename | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Method 2: Send chart config to Highcharts export server (JSON -> Highcharts server -> PNG URL) | |
var data = { | |
options: JSON.stringify(chartConfig), | |
filename: filename, | |
type: 'image/png', | |
async: true | |
}; | |
var exportUrl = 'http://export.highcharts.com/'; | |
$.post(exportUrl, data, function(data) { | |
var url = exportUrl + data; | |
window.open(url); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Method 3: simple phantomjs server to create a PNG from the svg data (SVG -> phantomjs -> PNG) | |
// see https://github.com/elasticsales/flask-common/blob/master/flask_common/png.js | |
var svg = $chartEl.find('svg')[0]; | |
var svgSize = svg.getBoundingClientRect(); | |
var svgData = new XMLSerializer().serializeToString( svg ); | |
var url = '/render_png/?' + $.param({ | |
svg: svgData, | |
filename: filename | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Method 4: client-side-only solution (SVG -> Canvas -> PNG) | |
// Problem: has a security error in Safari | |
var canvas = document.createElement('canvas'); | |
canvas.width = svgSize.width; | |
canvas.height = svgSize.height; | |
var ctx = canvas.getContext('2d'); | |
var img = document.createElement('img'); | |
img.setAttribute('src', 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData)))); | |
img.onload = function() { | |
ctx.drawImage(img, 0, 0); | |
window.open(canvas.toDataURL('image/png')); | |
}; |
I know this is 10 years old, but found that the 2nd method needs to drop the async
key from the data
hash or you will receive a 400 error.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Any way to generate an image in .NET without using PhantomJS or sending it to the Highcharts export server?