A quick blog post on how to make Google Charts play nicely in responsive mode. Nothing close to rocket science but still useful.
For those who don’t know, Google Charts is a visualization tool, a gallery of interactive charts and data tools that you can integrate into your website. You provide data through php, json and Google Charts display it nicely for you.
As I’m using those in a project involving responsive web design and encountered a minor issue, I thought I would post a wee something for you’s.
Issue
By default, the charts come in the form of fixed width element which you can easily tweak to adapt to the now-famous ‘width:100%’ format. However the charts will only appear in that format when the page is loaded. They won’t dynamically resize when the browser window width is changed.
This is what the charts look like when initially loaded:
This what they look when resizing the browser:
This is what they look when reloading the page:
Solution
You will need to add a little jquery to get that to work as expected.
$(window).resize(function(){
drawChart1();
drawChart2();
});
There’s obviously a codepen for this.
So Long.
My name is Flo Preynat and I am the freelance webdesigner and developer behind shoogle designs. I live in France and specialize in responsive web design. Give me a shoogle or get in touch with me on twitter.
Follow @shoogledesigns
Hey gracias, fue una gran idea !!! para el responsive !
Flo,
I tried your example and it KNOCKED MY SOCKS OFF!! I’ve been struggling with getting google charts to become responsive on my sight and thanks to you it actually works now. Can’t thank you enough.
Cheers mate,
-Matt
Hey Flo,
Thank you very much for sharing it with us! Top 10!
=)
Helen
Thanks Helen…
Don’t work with google table chart :/
See my example: http://i.imgur.com/1wtkPaG.png?1
Hey Flo,
You are the best!!!
Just 3 lines of the code solved my problem!!!
respect, Man !