Provide support for responsive design layouts (Patch included) [#1810232]

Really excited about this one, video to show how it works. http://www.youtube.com/watch?v=AwBfvXcdfcA&feature=youtu.be

This patch adds a checkbox to the views integration that lets you define a chart as being responsive. It also provides the code in the google_chart_tools.js integration code to account for this setting and deploy the chart in a responsive manner if desired.

Note: This only works on the initial page load of the chart, any resizing or scaling of the interface after the fact will not be reflected in the chart. Still, this is really awesome when used on mobile devices and expands the flexibility of this module's usage on mobile immensely for those using responsive designs.

Comment	File	Size	Author
#4	google_chart_tools-responsive-1810232-4.patch	3.05 KB	btopro
	responsivechartsoption.patch	3.27 KB	btopro

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

tsi CreditAttribution: tsi commented 12 October 2012 at 12:51

Status:

Needs review

» Needs work

Great feature request and kudos for the patch and the video, this definitely should go in.
The resizing part is not that critical, but the actual problem might be when mobile users go from landscape to portrait and vice-versa.
Will it be possible to redrew the charts on "window.onresize" ?
This will be even awesomer :)

Second, wouldn't innerWidth() and innerHeight() be better then width() and height() ?

Comment #2

btopro CreditAttribution: btopro commented 15 October 2012 at 04:45

No I don't think we want to ignore padding -- http://api.jquery.com/innerWidth/ counts width + padding.

http://api.jquery.com/width/ is just purely the width w/o border, padding or margins. This is the true size we want to match in my opinion but I'd have to see some visual comparisons to see that this is actually "better" one way or the other. Height isn't always accurate in my experience and also should probably scale accordingly as opposed to just fitting perfectly to the container provided (this would then require CSS planned ahead of time to make the area what you want).

As for the flip to respond I had this concern as well but I haven't seen a way of updating the graph on the page retroactively. I think that's actually related to #1613258: Ajax load of chart so maybe we can get this happy as just responsive and then clean it up after the fact as part of a larger issue w/ refreshing the chart?

Comment #3

tsi CreditAttribution: tsi commented 16 October 2012 at 13:50

you're probably right about the padding, sorry for the mix-up.
about re-drewing the chart, according to this post it should be quite easy (need to get the new values and call .draw() again on the same element).

Comment #4

btopro CreditAttribution: btopro commented 30 October 2012 at 16:00

File	Size
google_chart_tools-responsive-1810232-4.patch	3.05 KB

reroll of patch against latest dev

Comment #5

Jānis Bebrītis CreditAttribution: Jānis Bebrītis commented 20 March 2013 at 09:30

Good feature, we want this.

Comment #6

tsi CreditAttribution: tsi commented 20 March 2013 at 15:22

@Jānis Bebrītis the best thing you can do is to test the patch and review.

Comment #7

mchris82 CreditAttribution: mchris82 commented 20 March 2013 at 17:16

Excellent addition to the best Google Chart module available for drupal right now! I've added and tested the patch and it's working perfectly for me.

I do agree that the ability for the chart to resize on the fly would be great, but it's not critical for my use thus far.

Hopefully this gets rolled into the next stable release!

Comment #8

konforti CreditAttribution: konforti commented 22 March 2013 at 06:30

For on the fly resizing, something like: $(window).resize(function() { drawChart(); }); in the end of the behavior, should make it work.

Are we really need the ability to turn this feature on/off? I guess it's depend on the parents wrappers responsivity, and you control it from there. Also, there might be issues on multi chart in one page, when some have it turned on and other not.
What problems can be cause by run this code on all cases (always on)?

What about upscaling? With this patch the charts are doing upscaling as well, and ignore completely form the width/height of the chart settings.
Does it the right behavior? Does the width/height of the chart settings, should not be used as maximum scale desired?

Comment #9

alayham CreditAttribution: alayham commented 18 November 2013 at 11:15

The patch does not work with 1.4.
I modified the code of 1,4 manually and got @konforti's idea to use $(window).resize(function() { drawChart(); }); at the end of the behaviour. It works like magic with no disadvantages yet.