Saving bubble chart

[taps]

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?

[asgallant]

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.

[taps]

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>

[asgallant]

It works for me.  What browser are you using?

[taps]

I am using firefox 16.0.1. The canvg method is not working in my code.how can I solve it?

[asgallant]

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:

[taps]

Thanks, Its working. But The saved images cant be opened.

[asgallant]

With some browsers, you have to rename them as .png files after downloading them.

[taps]

but I cant force the user to change that. So, is there a way to save it in that format and if users want to save the image in other folder can we do that and how? Because now it is being saved in downloads. I want to save it in other folder.

[asgallant]

In traditional javascript, you have no control over that.  It's possible HTML5 changes things, but I don't think so in this case.  Being able to direct the name and location of a download programatically could be a security issue.  Your best be might be to alert your users that they have to change the file name in order to view it.

[taps]

I cant alert user for that for renaming it. I have to do it by myself only. Cant we open a save dialog to save the image that will provide user flexibility.

[taps]

How can I rename it by myself.? Pls. give me some idea. Its urgent..

[asgallant]

I've looked into this before, and to the best of my knowledge (and search skills), there just isn't any way to do it in javascript.  I've heard of other people setting something up where they send the image data back to the server, have the server save it as a file with a .png extension, and redirect the browser to the new image url, which triggers the download and (depending on the browser and settings) may prompt the user to select the download location.  You'll have to google it if you want to take that route, though, as I don't know exactly how it's done. 

[taps]

Ok thanks. I'll try for it and find the way.

[taps]

I have one more question that The code is not working in the other browser that is like google chrome. When I run the code in the google chrome the image is not being saved. Y is it so??

[asgallant]

It works when I use Chrome.  Check the developer's console (ctrl+shift+j in the windows version) to see if there are any errors).