Responsive Charts

[Al Lemieux]

Is it possible to define the chart width as a percentage? For a responsive design? In the chart options, I've defined the chart width and height, but is there a way to make this flexible? 

[Cheryl Evans]

Here's a responsive bar chart as an example.

Need the meta tag for it to be responsive

<meta name="viewport" content="width=device-width, initial-scale=1">

Also need

window.addEventListener("resize", drawBarChart, false)

Google Charts doesn't center the title or have subtitles, so I created my own.

Thanks for letting me know the font suggestion didn't work.  

On Tue, Apr 10, 2018 at 6:36 AM, Al Lemieux <al.le...@nielsen.com> wrote:

Is it possible to define the chart width as a percentage? For a responsive design? In the chart options, I've defined the chart width and height, but is there a way to make this flexible? 

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/6687a3f0-ccc8-4ef1-83e4-f99477954d30%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Al Lemieux]

This is cool! So, it looks like there's nothing defining the size of the chart. Is that what makes it responsive? Are the charts then inherently responsive? 

I ended up setting the size in a style sheet and then changing the size in a media query. 

Al Lemieux
Senior Production Designer
Nielsen

c: 781 879-7527

On Wed, Apr 11, 2018 at 1:43 PM, Cheryl Evans <cheryl...@valpo.edu> wrote:

Here's a responsive bar chart as an example.

Need the meta tag for it to be responsive

<meta name="viewport" content="width=device-width, initial-scale=1">

Also need

window.addEventListener("resize", drawBarChart, false)

Google Charts doesn't center the title or have subtitles, so I created my own.

Thanks for letting me know the font suggestion didn't work.  

On Tue, Apr 10, 2018 at 6:36 AM, Al Lemieux <al.le...@nielsen.com> wrote:

Is it possible to define the chart width as a percentage? For a responsive design? In the chart options, I've defined the chart width and height, but is there a way to make this flexible? 

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/6687a3f0-ccc8-4ef1-83e4-f99477954d30%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAFyZTc_WMByJhCmVVwFw3oxUiOTBmvubX507%2B7xHwbzwLXzgZw%40mail.gmail.com.

[Cheryl Evans]

Your strategy of media queries certainly is a good idea and gives you greater control over exactly how the the chart looks at any particular screen size.

The example I sent works at various screen sizes because the chart size is not set. 

FYI--One thing that helped me a lot with an area chart that I created recently was "chartArea".  I don't know if you are having problems with the labels for the horizontal and/or vertical axis getting truncated, but I was.  You set it in the options section of the chart. For example:

chartArea:{bottom:"80", top:"10", left:"65", right:"85"}

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAFyZTc_WMByJhCmVVwFw3oxUiOTBmvubX507%2B7xHwbzwLXzgZw%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAL4SAKTj7Win2h0W5bDLqbYJttRxvWqd7Q0x4Sw8gqaksBUehA%40mail.gmail.com.