Print a chart (google.visualization.ColumnChart)

Pedro Doria Meunier

unread,

Jul 17, 2012, 4:16:23 AM7/17/12

to google-visua...@googlegroups.com

Been at it for hours.. :S

Even learned some good old fashioned svg on the way ... :D

Now to the point:

How to print SVG generated inside chart_div ??

Charts are all pretty and all on the screen, but users actually need to print them once in a while...

The technique I'm trying to use is quite simple:

- open a new document with onLoad="self.print() called in the <body> tag

- get the <chart_div> content into it

All pointers much appreciated! ;)

Pedro Doria Meunier

unread,

Jul 17, 2012, 4:30:59 AM7/17/12

to google-visua...@googlegroups.com

Replying to self:

Got it!

with the help from https://gist.github.com/1333906

my code:

function Clickheretoprint()

{

var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,";

disp_setting+="scrollbars=yes,width=800, height=600, left=25, top=25";

var chartContainer = document.getElementById('chart_div');

var chartArea = chartContainer.getElementsByTagName('iframe')[0].contentDocument.getElementById('chartArea');

var svg = chartArea.innerHTML;

var docprint=window.open("","",disp_setting);

docprint.document.open();

docprint.document.write('<html><head><title></title>');

docprint.document.write('</head><body marginwidth="0" marginheight="0" onLoad="self.print()"><center>');

docprint.document.write(svg);

docprint.document.write('</center></body></html>');

docprint.document.close();

docprint.focus();

}

Hope it helps someone ;)

rio

unread,

Jul 20, 2012, 2:16:52 AM7/20/12

to google-visua...@googlegroups.com

Thanks it was helpful i took a shot the other day but somehow ended up printing the viewed page. I've changed my to print the PNG instead when the PNG is clicked.

   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);
        img.id = "updatesize";
        updatesize = document.getElementById('updatesize');

        updatesize.title="\"Right Click and Save As\" to download full-sized image";

        updatesize.style.width="336px";
        updatesize.style.height="237px";

        updatesize.onmouseover = function() {
        updatesize = document.getElementById('updatesize');
        document.getElementById('img_div').style.width="560px";
        document.getElementById('img_div').style.height="395px";
        updatesize.style.width="560px";
        updatesize.style.height="395px";
        }

        updatesize.onclick= function () {clickheretoprint(this.src);
        }

        updatesize.onmouseout = function() {
        updatesize = document.getElementById('updatesize');
        document.getElementById('img_div').style.width="336px";
        document.getElementById('img_div').style.height="237px";
        updatesize.style.width="336px";
        updatesize.style.height="237px";
        }

      }
    </script>

function clickheretoprint(stuff)
{

var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=800, height=600, left=25, top=25";

    var docprint=window.open("","",disp_setting);
    docprint.document.open();
    docprint.document.write('<html><head><title></title>');
    docprint.document.write('</head><body marginwidth="0" marginheight="0" onLoad="self.print()"><center>');

    docprint.document.write('<img src="')
    docprint.document.write(stuff);
    docprint.document.write('">')

Reply all

Reply to author

Forward