Last active
July 2, 2022 21:25
-
-
Save nverba/5419746 to your computer and use it in GitHub Desktop.
Testing d3.js and image downloading
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style type="text/css"> | |
| #img_div { | |
| width:450px; | |
| height:300px; | |
| border: 1px solid blue; | |
| } | |
| </style> | |
| <script> | |
| function getImgData(chartContainer) { | |
| var doc = chartContainer.ownerDocument; | |
| var canvas = doc.getElementById('canvas') | |
| var imgData = canvas.toDataURL("image/png"); | |
| return imgData; | |
| } | |
| function saveAsImg(chartContainer) { | |
| var imgData = getImgData(chartContainer); | |
| // Replacing the mime-type will force the browser to trigger a download | |
| // rather than displaying the image in the browser window. | |
| window.location = imgData.replace("image/png", "image/octet-stream"); | |
| } | |
| function toImg(chartContainer, imgContainer) { | |
| var doc = chartContainer.ownerDocument; | |
| var img = doc.createElement('img'); | |
| img.src = getImgData(chartContainer); | |
| while (imgContainer.firstChild) { | |
| imgContainer.removeChild(imgContainer.firstChild); | |
| } | |
| imgContainer.appendChild(img); | |
| } | |
| </script> | |
| <script type="text/javascript" src="https://www.google.com/jsapi"></script> | |
| <script type="text/javascript"> | |
| google.load("visualization", "1", {packages:["corechart", "treemap", "geochart"]}); | |
| google.setOnLoadCallback(drawChart); | |
| function drawChart() { | |
| // Line chart | |
| data = new google.visualization.DataTable(); | |
| data.addColumn('string', 'Year'); | |
| data.addColumn('number', 'Sales'); | |
| data.addColumn('number', 'Expenses'); | |
| data.addRows(4); | |
| data.setValue(0, 0, '2004'); | |
| data.setValue(0, 1, 1000); | |
| data.setValue(0, 2, 400); | |
| data.setValue(1, 0, '2005'); | |
| data.setValue(1, 1, 1170); | |
| data.setValue(1, 2, 460); | |
| data.setValue(2, 0, '2006'); | |
| data.setValue(2, 1, 860); | |
| data.setValue(2, 2, 580); | |
| data.setValue(3, 0, '2007'); | |
| data.setValue(3, 1, 1030); | |
| data.setValue(3, 2, 540); | |
| var chart = new google.visualization.LineChart(document.getElementById('line_div')); | |
| chart.draw(data, { | |
| width: 450, | |
| height: 300, | |
| title: 'Company Performanceings', | |
| vAxis: { | |
| textPosition: 'out', | |
| x: 20, | |
| textStyle: {fontSize: 10} | |
| } | |
| }); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <canvas id="canvas" style="border:2px solid black;" width="450" height="300"></canvas> | |
| <script> | |
| function loadMyImg () { | |
| var canvas = document.getElementById("canvas"); | |
| var ctx = canvas.getContext("2d"); | |
| var rawsvg = document.getElementsByTagName('svg')[0]; | |
| rawsvg.setAttribute("xmlns", "http://www.w3.org/2000/svg"); | |
| var data = rawsvg.parentNode.innerHTML; | |
| var DOMURL = self.URL || self.webkitURL || self; | |
| var img = new Image(); | |
| var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"}); | |
| var url = DOMURL.createObjectURL(svg); | |
| img.onload = function() { | |
| ctx.drawImage(img, 0, 0); | |
| DOMURL.revokeObjectURL(url); | |
| }; | |
| img.src = url; | |
| }; | |
| </script> | |
| <br><button onclick="loadMyImg()">Load Image</button> | |
| <div id="img_div"></div> | |
| <button onclick="toImg(document.getElementById('line_div'), document.getElementById('img_div'));">Convert to image</button> | |
| <br><div id="line_div"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment