Re: How to save a couple of charts in a table to an image?

[asgallant]

You could try modifying the existing code for turning charts into images to put multiple charts in the canvas element, and see if that works for you.

On Friday, November 30, 2012 12:39:41 AM UTC-5, Jason Feng wrote:

Hello,

I have been using Google Visualization API to generate a couple charts in a table. I have seen some discussion to save one chart to an image at one time. I am wondering if there is a way to save all the charts in table as one image?

Thanks in advance.

Best regards,
Jason

[Jason Feng]

Thanks a lot!

But I am with very limited knowledge of HTML. Could you please kindly show me more details of how  to put multiple charts in the canvas element?

Best regards,
Jason

[Roni Biran]

1. you can make multiple canvas elements. One foe each chart.

2. If the purpose is (in the end) draw the chart in a PDF report, you can use an external library that draws the entire SVG.

--
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/-/8314kjg9FJ0J.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[Jason Feng]

Thanks very much!

It will be great to draw all the charts in a PDF report. Could you please tell me more details about what external library and how to convert the entire SVG to a PDF?

Best regards,
Jason

To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

[asgallant]

In order to save a chart as an image, you need a few things:

1.  Include these two script links in your HTML, before the javascript for your charts:

<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>​

2.  Include these two functions in your js:

function getImgData(chartContainer) {
    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);
    var imgData = canvas.toDataURL('image/png');
    canvas.parentNode.removeChild(canvas);
    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');
}

(functions taken from https://gist.github.com/1333906 and converted for the current API by forum user trybka)

To save a chart as an image, call the saveAsImg function, passing it the container div of the chart you want to save.  So, if your chart is in "chart_div", then you save it as an image with this call:

saveAsImg(document.getElementById('map_div'));

You can call that for each chart to save them individually, and then import them into your PDF.  Note that a) this only works in modern browsers (no IE 8 and earlier), and b) you will probably have to rename the file with a .png extension once it has downloaded.

[Roni Biran]

Hi Jason,

I'm using HiQPDF (.NET)

it allows me to send either a URL or post an entire HTML (SVG and all) and in return I'm getting a PDF

You can check their demo here: http://www.hiqpdf.com/demo/ConvertHtmlToPdf.aspx

If you're using other languages, I'm sure you can find other great libraries. In addition, you can check the code posted by asgallant.

Hope that helps,

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/b8BB9qZOdtEJ.

To post to this group, send email to google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

[Jason Feng]

Thanks a lot!

I tried the script on our internal web server (apache).

It works on Firefox but I have change the file name and extention after saving it (original name is xxxx.part and change to chart1.png). But it doesn't work on IE9 which most of my colleagues are using as default web browser.

Could you please have a look? Thanks again for your kindness!

Best regards,
Jason

[asgallant]

I'm not sure what the reason is, but IE refuses to open the PNG URI when loaded as a URL.  I found an end-route around the problem which isn't as elegant, but works.  Replace the saveAsImg function with this one:

function saveAsImg(chartContainer) {
    var imgData = getImgData(chartContainer);

    // triggering download doesn't work in IE 9, so we open the img in a <img> tag instead
    // uses jQuery for browser detection
    if ($.browser.msie) {
        if ($.browser.version == 9) {
            var w = open();
            var img = w.document.createElement('img');
            img.src = imgData;
            w.document.body.appendChild(img);
            setTimeout(function() {
                w.alert('Right-click image and select "Save As"');
            }, 500);
        }
        else if ($.browser.version < 9) {
            alert('Saving charts is not possible in versions of IE older than 9');
        }
    }
    else {

        // 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');
    }
}

Note that this uses jQuery to do the browser detection; if you don't use jQuery, you'll have to rewrite the browser detection.