Format API output

57 views
Skip to first unread message

Russ Ullrich

unread,
Jul 1, 2018, 6:43:34 PM7/1/18
to Google Visualization API
Is there a way to format the output from the API?

I am trying to use my url...

...but it's not formatted as nice as I would like.  Changes to the sheet itself are ignored.

Is there a way to format the output or is there a better way to do it?

Ray Thomas

unread,
Jul 2, 2018, 7:52:45 PM7/2/18
to Google Visualization API
Using the Visualizations API, there's hardly anything in a table that cannot be changed, either using CSS or the formatters.

To use a Google Sheet in the visualizations see https://developers.google.com/chart/interactive/docs/spreadsheets#creating-a-chart-from-a-separate-spreadsheet - most of the examples on the API pages use embedded data, but it's easy enough to use a Google Sheet.

The table help is at https://developers.google.com/chart/interactive/docs/gallery/table and probably importantly for you, you want the cssClassNames for the table in the Configuration Options section.

Also available are the formatters, and those are described at https://developers.google.com/chart/interactive/docs/reference#formatters 

Russ Ullrich

unread,
Jul 3, 2018, 12:55:01 PM7/3/18
to Google Visualization API
Thanks for your replay.

I see where you lead me with this.  I like the method and concept.  Now just need to learn the process and syntax.

I get how to display a chart using the Google Sheet and I see how to display a table using the addcolumn and/or addrow.

What I'm lost with is how to display a table using the data from the Google Sheet.  Is there an example of what that would look like you can point me towards hat I can study.

Again, thanks for you time and help.

Ray Thomas

unread,
Jul 3, 2018, 2:43:47 PM7/3/18
to Google Visualization API

The API treats tables as a type of chart, so you add the code to get the Sheet then "draw" the table. About the simplest I can make it is at https://jsfiddle.net/brisray/Lp01usoz/

That uses the Sheet at https://docs.google.com/spreadsheets/d/1RCZiWWsEKPs6-1ULXeHjWmaXUEHCaRPtKT9U_6FzCJ4/edit#gid=1835225366 and the information in the code needed to access it comes from the Sheet URL. The Sheet must be readable to the code, so I just made it viewable, but not editable to other people.

Everything can be made a bit more sophisticated, including the query used to get the data from the Sheet, and once you get the hang of what is happening and how it works, the API is a great tool.

Some people have done great things with it, my use of it is relatively simple but here's some of what I've managed to do with a bit of practice.

https://www.indstate.edu/business/metrics
https://www.indstate.edu/business/social-media/all
http://hmsgambia.org/crewlist.htm

Russ Ullrich

unread,
Jul 3, 2018, 2:56:36 PM7/3/18
to Google Visualization API
Table is considered a chart makes a lot more sense.  Thank you for the push in the right direction.  Time to start playing with some new code.  :-)
Reply all
Reply to author
Forward
0 new messages