With some browsers, you have to rename them as .png files after downloading them.
On Monday, October 22, 2012 2:45:57 AM UTC-4, taps wrote: > > Thanks, Its working. But The saved images cant be opened. > > On Friday, 19 October 2012 11:02:08 UTC+5:30, asgallant wrote: >> >> Ahh...I see now. You are missing two of the scripts you need: >> >> http://canvg.googlecode.com/svn/trunk/canvg.js >> http://canvg.googlecode.com/svn/trunk/rgbcolor.js >> >> You need script tags with both of those to make it work. >> >> On Thursday, October 18, 2012 2:00:19 AM UTC-4, taps wrote: >>> >>> Hey, I have tried that code but it doesn't work. It doesn't do >>> anything.I don't what is wrong.my code is: >>> >>> <apex:page > >>> <script type="text/javascript" src="https://www.google.com/jsapi >>> "></script> >>> <script type="text/javascript"> >>> google.load("visualization", "1", {packages:["corechart"]}); >>> google.setOnLoadCallback(drawChart); >>> function drawChart() { >>> var data = google.visualization.arrayToDataTable([ >>> ['ID', 'X', 'Y', 'Temperature'], >>> ['', 80, 167, 120], >>> ['', 79, 136, 130], >>> ['', 78, 184, 50], >>> ['', 72, 278, 230], >>> ['', 81, 200, 210], >>> ['', 72, 170, 100], >>> ['', 68, 477, 80] >>> ]); >>> >>> var options = { >>> colorAxis: {colors: ['yellow', 'red']} >>> }; >>> >>> var chart = new >>> google.visualization.BubbleChart(document.getElementById('chart_div')); >>> chart.draw(data, options); >>> } >>> </script> >>> <div id="chart_div" style="width: 900px; height: 500px;"></div> >>> <button onclick="saveAsImg(document.getElementById('chart_div'));">Save >>> as PNG Image</button> >>> <script> >>> function getImgData(chartContainer) { >>> alert("hiiiii"); >>> var chartArea = >>> chartContainer.getElementsByTagName('svg')[0].parentNode; >>> var svg = chartArea.innerHTML; >>> var doc = chartContainer.ownerDocument; >>> var canvas = doc.createElement('canvas'); >>> canvas.setAttribute('width', chartArea.offsetWidth); >>> canvas.setAttribute('height', chartArea.offsetHeight); >>> >>> >>> canvas.setAttribute( >>> 'style', >>> 'position: absolute; ' + >>> 'top: ' + (-chartArea.offsetHeight * 2) + 'px;' + >>> 'left: ' + (-chartArea.offsetWidth * 2) + 'px;'); >>> doc.body.appendChild(canvas); >>> canvg(canvas, svg);alert("hiiiiffffi"); >>> var imgData = canvas.toDataURL('image/png'); >>> canvas.parentNode.removeChild(canvas); >>> >>> return imgData; >>> } >>> >>> function saveAsImg(chartContainer) { >>> alert("hiiiii"); >>> 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'); >>> } >>> </script> >>> </apex:page> >>> >>> On Wednesday, 17 October 2012 20:16:36 UTC+5:30, asgallant wrote: >>>> >>>> See this thread: >>>> https://groups.google.com/forum/?fromgroups=#!topic/google-visualization-api/YTD_JxX_RFc >>>> >>>> Note that the code linked there will never work in IE < 9, as those use >>>> VML to draw the charts instead of SVG, and there is no way (that I know >>>> of) >>>> to convert VML into an image file. >>>> >>>> On Wednesday, October 17, 2012 3:14:46 AM UTC-4, taps wrote: >>>>> >>>>> Hello, I have created a bubble chart based on the user selection.I >>>>> need to save the chart in the form of image or any other way.How can save >>>>> it? >>>>> >>>> -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/GqJyk6eqTvsJ. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
