Google Charts In Email

[shriram krishnan]

Hi All,

I need to send google charts to my emaill body, however my charts view is called via cron in codeigniter PHP and then the contents are rendered in backend and then passed directly for mailing.

I am unable to even capture image using getImageUri of google chart, as it is not rendered in UI/browser and passed directly to mail.

Can anybody suggest me how to do pass the same in mail.

Thanks & Regards

Sreeram Krishnan

[Ian Webster]

I had this problem and built a server-side renderer for Google Charts.  It is open-source and you can host it yourself.

If you are not able to run your own Node server, you can use the publicly hosted web endpoint, https://quickchart.io/google-charts/render.  This URL accepts a code parameter that runs your code in a Google Charts environment.

For example, take your drawChart function and add it to the URL:

https://quickchart.io/google-charts/render?packages=timeline&code=var%20container%20=%20document.getElementById(%27timeline%27);var%20chart%20=%20new%20google.visualization.Timeline(container);var%20dataTable%20=%20new%20google.visualization.DataTable();dataTable.addColumn({%20type:%20%27string%27,%20id:%20%27President%27%20});dataTable.addColumn({%20type:%20%27date%27,%20id:%20%27Start%27%20});dataTable.addColumn({%20type:%20%27date%27,%20id:%20%27End%27%20});dataTable.addRows([[%20%27Washington%27,%20new%20Date(1789,%203,%2030),%20new%20Date(1797,%202,%204)%20],[%20%27Adams%27,%20%20%20%20%20%20new%20Date(1797,%202,%204),%20%20new%20Date(1801,%202,%204)%20],[%20%27Jefferson%27,%20%20new%20Date(1801,%202,%204),%20%20new%20Date(1809,%202,%204)%20]]);chart.draw(dataTable);

It looks messy but it works.  Don't forget to URL encode your drawChart Javascript.

Endpoint (GET/POST): https://quickchart.io/google-charts/render

Parameters:

• code: Javascript contents of drawChart (required)
  
• packages: Comma-separated list of Google Visualization packages to load (defaults to "corechart")
• width: Width of chart canvas in pixels
• height: Height of chart canvas in pixels
• mapsApiKey:  Maps key for geochart and maps

For more complex charts, I recommend POSTing your parameters as JSON.

Another example: https://quickchart.io/google-charts/render?packages=orgchart&code=var%20data%20%3D...

Documentation: https://quickchart.io/documentation/google-charts-image-server/

Hope this helps,

Ian

[shriram krishnan]

Hi  Ian,

The nodejs server solution is great.

Regarding quick chart, I think it's paid one and for free version it has validity of time of 3 days of images in their server.

Thanks & Regards

Sreeram Krishnan

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/J4LIqJtEXqs/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/3e017649-849a-44e9-bbf7-7627ef6b69afn%40googlegroups.com.

[Ian Webster]

The QuickChart server is open source so you can choose to self-host if you prefer.  The 3 day limit only applies to Chart.js images that are created with a short URL (because this requires server storage).  Fortunately, Google Charts images aren't created with a short URL, so the images don't expire - they are rendered on-demand according to the payload in the URL and not stored.

Ian