Printing googlecharts

[raaffaaeell]

Is there any way to get something similar to this to work ?

I used an ID to the div container that the chart is created, but I don't know how to save the reference of the chart created and then getImageURI()

I think that if I could get the reference of the chart I could use a button to print it.

Cheers

[raaffaaeell]

Well, I got it to work after few tests.

I used an id "gChart" for the div that you'll contain the chart, see below:

result = $("< div id='gChart' style='width: 100%; height: 100%;'>");

Then, after creating the wrapper (line 84) I wrote this piece of code.

  //adds the listener for the wrapper, event "ready"
  google.visualization.events.addListener(wrapper, 'ready', onReady);

  //this is the function that will run when the wrapper is ready
  function onReady() {
        chart_div = $("#gChart");
        chart_div.innerHTML = '<img src="' + wrapper.getChart().getImageURI() + '">';
        console.log(chart_div.innerHTML);
  }

For now it's printing on the console the url to get the image, something like the example from google:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADICAYAAADGFbfiA...

I think that this could be used to create a button/link to print the chart generated.

Thoughts ?

Cheers

Edit: Just noticed that the code of the result variable was not visible, fixed it hehe

[nicolaskruchten]

Instead of printing the data URI on the command line, can you try doing something like window.location=chart_div.innerHTML to actually render the PNG?

[raaffaaeell]

Hi Nicolas, sorry for the late reply

I just used console log as an example. I don't know how it works exactly, but after the graph is rendered, the innerHTML of the div is just a bunch of code, not that uri anymore.

Maybe a button could be created to print that png, a link, I don't know.

They used this as example, as a link to a printable version.

document.getElementById('png').outerHTML = ' < a href="' + chart.getImageURI() + '">Printable version</ a>';

And then we would need a div as follows

< div id='png'></ div>

Another thing I don't really know, where I'ld put the button/link to print it, maybe you have some great ideas to do this.

Cheers

[nicolaskruchten]

This is a neat solution, but I think it's a bit out of scope for this library, so if you need this as a feature in your app, I would recommend that you add it in externally to the PivotTable.js output, as I'm not sure where it would go within the current setup...

[raaffaaeell]

Well, I made a custom link to the printable version, if anyone is interested, here's how I did it.

The file is the gcharts_renderer.js. Here's the code for it.

After line 83, I created this varieable

resultPrint = $("< div id='printGraph '>");

Then, after line 88:

  //adds the listener to execute the function when the graph is ready
  google.visualization.events.addListener(wrapper, 'ready', onReady);

  //the actual code for the onReady function
  function onReady() {
        resultPrint[0].innerHTML = '<p><center><a href="' + wrapper.getChart().getImageURI() + '">Print Graph</a><center></p>';
        result.append(resultPrint[0].innerHTML);
  }

Output looks like this

Do you think that would be cool to have this feature for anyone, Nicolas ?

Cheers

Edit: I edited the post because the previous solution wasn't working if you selected a chart, then a table, and a chart again. Updated with a similar solution, the output is the same and apparently it works great haha.

[deeciple]

raaffaaeell,

Sorry to revive an almost 1 year old thread but how exactly did you create the wrapper? I've been struggling with a way to save the chart as a png file for a couple of days now. I had it working before google changed their API.

I have tried creating a function to open the image in a new window (at least as a start).

function saveImage(){
var chart = $("#output"); //this is the <div> where my chart is rendered.
google.visualization.events.addListener(chart, 'ready', function () {
    var imgUri = chart.getChart().getImageURI();
    // do something with the image URI, like:
    window.open(imgUri);
});
}

This gives the error "chart is undefined'.
How did you get it working?

Thanks,

Ken

[hissingpanda]

I just threw raaffaaeell's code into the gchart_renderers.js file (line 151 in recent versions):

    resultPrint = $("< div id='printGraph '>"); // line 151
    wrapper = new google.visualization.ChartWrapper({
      dataTable: dataTable,
      chartType: chartType,
      options: options
    });
    //adds the listener to execute the function when the graph is ready
    google.visualization.events.addListener(wrapper, 'ready', onReady);

    //the actual code for the onReady function
    function onReady() {
          resultPrint[0].innerHTML = '<p><center><a href="' + wrapper.getChart().getImageURI() + '" download="Graph.png">Download Graph</a><center></p>';
          result.append(resultPrint[0].innerHTML);
    }

The "wrapper = new google.visualization.ChartWrapper" should already be in the file in case your line numbers are different. Anyways, that works for me.

[deeciple]

Hi hissingpanda,

I was trying to create a function on the page where my chart is being rendered that I could call via a button's click event. I was under the mistaken impression that in his second post raaffaaeell was adding his code to another file. I didn't realize that he was modifying the gcharts_renderer.js file all along.

I will add raaffaaeell's code into my gcharts_renderer.js. It should work just fine.

Thanks for your help.

Ken

[deeciple]

I was able to create a download button with the use of this function:
http://danml.com/#/download.html

First modifying the gcharts_renderer.js file as follows after line 156:

    // Wait for the chart to finish drawing before calling the getImageURI() method.
    google.visualization.events.addListener(wrapper, 'ready', function () {
        imgData = "<div id='image' style='display:none'>" + wrapper.getChart().getImageURI() + "</div>";
        result.append(imgData);          
    });

Then on the page where I am injecting my chart I link the function:

<script type="text/javascript" src="../javascripts/download.js"></script>

and add this code which is called by a button onclick event:

function saveImage(){
    var imgURI = document.getElementById('image').innerHTML;
    download(imgURI, "chart.png", "image/png");
}

Hope this helps.

Ken