Struggling a bit to find an answer to this.
Can anyone suggest a way to create a sharp, high-quality image export from my charts?
At this point I've converted my SimpleXML dashboard into HTML and tried to convert my div/chart SVG into a PNG file. This was partially successful but the quality of the exported image was awful.
Any help much would be much appreciated.
Hi there @peamc, yes there is a way to do this using HTML2Canvas:
<script src="https://rawgithub.com/niklasvh/html2canvas/master/dist/html2canvas.min.js"></script>
<script type="text/javascript">
function exportChart() {
html2canvas($('#element1'), {
useCORS: true,
allowTaint: true,
onrendered: function (canvas) {
var img = document.createElement("a");
img.href = canvas.toDataURL();
img.download = "chart.png";
img.click();
}
});
}
</script>
Heres a function which does what you need, just replace 'element1' with the div id of you div containing your chart!
Good luck mate.
Hi there @peamc, yes there is a way to do this using HTML2Canvas:
<script src="https://rawgithub.com/niklasvh/html2canvas/master/dist/html2canvas.min.js"></script>
<script type="text/javascript">
function exportChart() {
html2canvas($('#element1'), {
useCORS: true,
allowTaint: true,
onrendered: function (canvas) {
var img = document.createElement("a");
img.href = canvas.toDataURL();
img.download = "chart.png";
img.click();
}
});
}
</script>
Heres a function which does what you need, just replace 'element1' with the div id of you div containing your chart!
Good luck mate.
Oh wow ! This is exactly what I was after !! Cheers @chumberr