Styling Google Chart components from a Google Sheet

51 views
Skip to first unread message

John Martins

unread,
Jan 27, 2017, 10:50:49 AM1/27/17
to Google Visualization API
Hi all,

I'm embedding a simple bar chart from a Google Sheet onto a web page, and I'm having trouble with styling the components. I need each bar on the Y-axis to be one of five colors, and also some other small style adjustments that I think I might be able to figure out if I can just sort out how the chart is pulling in the style information. (Posting a JPG of what I'm trying to emulate.)

I saw in some posts that the trick is to declare roles for columns, but the only examples are from charts that have the data coming from the JS itself, not from an external source like Sheets. Can anyone point me in the right direction?

Thanks in advance for your help!


Daniel LaLiberte

unread,
Jan 27, 2017, 10:58:33 AM1/27/17
to Google Visualization API
Hi John,

After you fetch the data from the spreadsheet, then you can modify it, but it might be better to use a DataView to add a role column.   See:  https://developers.google.com/chart/interactive/docs/reference#DataView

--
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/4ed91465-056f-44b8-a28e-fe30dc113969%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

John Martins

unread,
Jan 27, 2017, 12:57:05 PM1/27/17
to Google Visualization API
Thanks so much, Daniel. Your DataView suggestion sent me on the right track, and I was able to style it appropriately! Now I'm interested in making it responsive. Is this something I can do entirely via CSS, or should I also add an event listener for a window resize? 

On Fri, Jan 27, 2017 at 10:58 AM 'Daniel LaLiberte' via Google Visualization API <google-visua...@googlegroups.com> wrote:
Hi John,

After you fetch the data from the spreadsheet, then you can modify it, but it might be better to use a DataView to add a role column.   See:  https://developers.google.com/chart/interactive/docs/reference#DataView

On Fri, Jan 27, 2017 at 10:50 AM, John Martins <john.a....@gmail.com> wrote:
Hi all,

I'm embedding a simple bar chart from a Google Sheet onto a web page, and I'm having trouble with styling the components. I need each bar on the Y-axis to be one of five colors, and also some other small style adjustments that I think I might be able to figure out if I can just sort out how the chart is pulling in the style information. (Posting a JPG of what I'm trying to emulate.)

I saw in some posts that the trick is to declare roles for columns, but the only examples are from charts that have the data coming from the JS itself, not from an external source like Sheets. Can anyone point me in the right direction?

Thanks in advance for your help!


--
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-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@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/4ed91465-056f-44b8-a28e-fe30dc113969%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

--
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/ecaBrRkh92o/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@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/CAOtcSJOKrUJcBFeq_3HJWkMMgz45AcFgTpaCQ5o5a8euSO2CQA%40mail.gmail.com.

Daniel LaLiberte

unread,
Jan 27, 2017, 12:58:20 PM1/27/17
to Google Visualization API
You will have to do another draw() call, so you will have to handle the resize event to do that.

On Fri, Jan 27, 2017 at 12:56 PM, John Martins <john.a....@gmail.com> wrote:
Thanks so much, Daniel. Your DataView suggestion sent me on the right track, and I was able to style it appropriately! Now I'm interested in making it responsive. Is this something I can do entirely via CSS, or should I also add an event listener for a window resize? 

On Fri, Jan 27, 2017 at 10:58 AM 'Daniel LaLiberte' via Google Visualization API <google-visualization-api@googlegroups.com> wrote:
Hi John,

After you fetch the data from the spreadsheet, then you can modify it, but it might be better to use a DataView to add a role column.   See:  https://developers.google.com/chart/interactive/docs/reference#DataView

On Fri, Jan 27, 2017 at 10:50 AM, John Martins <john.a....@gmail.com> wrote:
Hi all,

I'm embedding a simple bar chart from a Google Sheet onto a web page, and I'm having trouble with styling the components. I need each bar on the Y-axis to be one of five colors, and also some other small style adjustments that I think I might be able to figure out if I can just sort out how the chart is pulling in the style information. (Posting a JPG of what I'm trying to emulate.)

I saw in some posts that the trick is to declare roles for columns, but the only examples are from charts that have the data coming from the JS itself, not from an external source like Sheets. Can anyone point me in the right direction?

Thanks in advance for your help!


--
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.



--

--
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/ecaBrRkh92o/unsubscribe.
To unsubscribe from this group and all its topics, 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/CAOtcSJOKrUJcBFeq_3HJWkMMgz45AcFgTpaCQ5o5a8euSO2CQA%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/CAJ1HChfdothr%2Bg%3DWAqf4QuMqkjaP-XzFakxmz2mRvURc8SRxWQ%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages