score:9
here is how i solve it :
use google canvg it takes a url to a svg file or the text of an svg file, parses it in javascript, and renders the result on a canvas element.
render your chart svg to the canvas using
canvg(document.getelementbyid('canvas'),getsvg());
convert what you have in the canvas to image
var canvas = document.getelementbyid("canvas") ; var img = canvas.todataurl("image/png"); //img is data:image/png;base64 img = img.replace('data:image/png;base64,', '');
render your image to a hidden field
$("hidden field").val(img) ;
to convert this string to byte array do
dim imagefile() as byte = convert.frombase64string(your hidden field .value)
update
get the highcharts svg
- use the
chart.getsvg()
method
- or simply use
$(your svg).html()
score:1
you can directly get base64 from http://export.highcharts.com by passing required parameter in request.
let chartdata = {
infile: chart_data,
b64: true // bool, set to true to get base64 back instead of binary.
width: 600,
constr : "chart"
}
you can use below snippet to get base64
fetch("https://export.highcharts.com/", {
"headers": {
"content-type": "application/json",
},
"body": "{\"infile\":\"{\\n \\\"xaxis\\\": {\\n \\\"categories\\\": [\\n \\\"jan\\\",\\n \\\"feb\\\",\\n \\\"mar\\\",\\n \\\"apr\\\",\\n \\\"may\\\",\\n \\\"jun\\\",\\n \\\"jul\\\",\\n \\\"aug\\\",\\n \\\"sep\\\",\\n \\\"oct\\\",\\n \\\"nov\\\",\\n \\\"dec\\\"\\n ]\\n },\\n \\\"series\\\": [\\n {\\n \\\"data\\\": [1,3,2,4],\\n \\\"type\\\": \\\"line\\\"\\n },\\n {\\n \\\"data\\\": [5,3,4,2],\\n \\\"type\\\":\\\"line\\\"\\n }\\n ]\\n}\\n\",\"width\":600,\"constr\":\"chart\",\"b64\":true}",
"method": "post",
"mode": "cors"
}).then(function(response) {
// the response is a response instance.
return response.text();
}).then(function(data) {
console.log(data); // base64 data
}).catch(function(err) { console.log(err);})
score:3
first, see the highcharts
documentation on exporting files. this will give you the string to the image url you want.
exporting: http://www.highcharts.com/ref/#exporting
use an http request (with ajax, for instance) to get the file binary content (jpg/png) and transfer it to a base64 encoding library like this one:
base64: http://www.webtoolkit.info/javascript-base64.html
enjoy and good luck!
Source: stackoverflow.com
Related Query
- Highcharts - export to base64
- Add Source to Highcharts Export CSV
- Highcharts SVG Export from Python Server Side Code
- Calling Highcharts export to jpeg but the source is https and exporting is http (security warnings issued by browser)
- Export Highcharts code from jsfiddle
- Export Highcharts to PDF (using javascript and local server - no internet connection)
- How to export the whole page or html content with Highcharts not just the chart?
- I can't make Highcharts phantomJs export server work
- Highcharts export chart exportSettings with svg file
- Highcharts add legend on export
- Highcharts - how to remove "Open in Highcharts Cloud" from the export menu
- Highcharts - add additional export options without losing default ones
- ASP.NET WebRequest to Highcharts export server
- Highcharts phantomjs export server can't parse json string
- Using PhantomJS to create HighCharts grahps server side for use in PDF creation (PHP) - results in exit code 11 from PHPs exec();
- Highcharts - Global configuration with common code and unique data & Headings
- Imported font and Highcharts JS export
- How to export CSV and XLS with external button in Highcharts
- HighCharts chart export (screenshot download) does not display Navigator graph
- Highcharts export charts as image on serverside with php
- Issues using highcharts node export server from ClojureScript - "0x03 error when performing chart generation"
- Multi-Line Title is not working when we export to PNG using CanVG - Highcharts
- Catching Highcharts Client Side Export response before it downloads
- HIghcharts export server hosting ph-batik
- Highcharts Export Server on AWS Lambda
- Is possible to export programmatically a highcharts chart?
- HighCharts Stock Chart error code 18
- Highcharts Export without internet
- export csv from highcharts
- highcharts export server js script error codes
More Query from same tag
- Highcharts complex tooltip formatting issue with embedded html link
- Highcharts passing time.
- How to align the legends in reactjs Highcharts
- HighCharts Highstock daily vertical grid lines showing on weekend
- HighMaps: Change the size/width of ColorAxis
- Modify data through chart manipulation
- Highchart JS (HTML table, Line chart) line not showing if data has null value
- Can I add any indicator to any chart type in highcharts?
- React Highmap this.normalizeTimeTickInterval is not a function
- Highchart World map with pie
- Highchart stacked area empty spaces (negative values)
- How can I apply different background color to entire tooltip for different series in highcharts
- How can I access the 'this' field in plotOptions of highcharts
- Highcharts Dates Wrong
- Using JSON file in Highcharts
- Define and apply theme on highcharts-react-official
- How can I pass values from Highcharts event callbacks (click, mouseOver, mouseOut) back to React component member function?
- Pie chart: image exporting cutting off labels
- Highcharts (highstock) - hide all markers in the navigator
- Navigation arrows for Stock Tools
- Javascript - How to display a specific index of an array on Highcharts?
- filter json data to display on the pie chart
- Same data in HighCharts and HighStock
- trying to draw dotted lines over the chart
- Why do I get a null reference error when I export Highcharts?
- show only last x points on Highchart
- "The "highcharts" property was not passed" warning with constructorType="chart"
- How to get the highlighted point from shared tooltip formatter, Highcharts
- highcharts marker: {radius: 10} on individual data points makes certain data points disappear?
- Trying to produce a pop up when the chart is clicked. The pop up is a close button