Styling Google Organizational Chart Sourced from a Spreadsheet

[MichalW]

I need to create Organizational Chart for a company website which is a Google Site.

I found the Google Visualization Organizational Charts (https://developers.google.com/chart/interactive/docs/gallery/orgchart) fine for this task, understand how the nodes are rendered base on data table but since I have no JavaScript experience, I found no way to embed such script (as Google App) into this Google Site. It works fine on any external site or as a standalone .html, but not on a site by Google:)

So instead of embedding the JavaScript, I created a Spreadsheet as data source and inserted Organizatonal Chart rendered from this data. all fine until this moment, see attached:

Now I want to change some chart styles like: different background color for nodes, font size etc. I tried placing whole example code from https://developers.google.com/chart/interactive/docs/gallery/orgchart in A1 cell, but the chart treats it as text. See:

Is there a way to add some custom styling to Org Chart nodes if it's rendered from a Spreadsheet? Maybe some data format in the Spreadsheet itself is needed? It would be best form me to have the Chart rendering simply recognize HTML/CSS tags entered in the Source Spreadsheet. I know HTML and CSS quite well.

Or maybe you can point at a guide showing a non-JS user like me a way to place a Google Orgaizational Chart in a Google Site, step-by step.

[asgallant]

The chart will recognize HTML and CSS if you set its "allowHtml" option to true.

[Michał Wojtas]

Thanks, 

Where do I set 'allowHtml' to 'true'? I don't see such option in the Chart customization menu in Google Sites (any of the three tabs, see screenshot below)

--
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/GeGa0KB6FPo/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 http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

--

Michal Wojtas

Web Project Manager

Next OOO: September 27, 2013

KIC InnoEnergy SE 

ul. Czerwone Maki 84

30-392 Kraków

Poland 

phone: +48 12 446 7029

skype: mwojtas_kic

[asgallant]

That option might not be exposed in the Spreadsheet chart gadget.

On Thursday, September 26, 2013 10:39:20 AM UTC-4, MichalW wrote:

Thanks, 

Where do I set 'allowHtml' to 'true'? I don't see such option in the Chart customization menu in Google Sites (any of the three tabs, see screenshot below)

On Thu, Sep 26, 2013 at 4:28 PM, asgallant <drew_g...@abtassoc.com> wrote:

The chart will recognize HTML and CSS if you set its "allowHtml" option to true.

On Thursday, September 26, 2013 7:10:23 AM UTC-4, MichalW wrote:

I need to create Organizational Chart for a company website which is a Google Site.

I found the Google Visualization Organizational Charts (https://developers.google.com/chart/interactive/docs/gallery/orgchart) fine for this task, understand how the nodes are rendered base on data table but since I have no JavaScript experience, I found no way to embed such script (as Google App) into this Google Site. It works fine on any external site or as a standalone .html, but not on a site by Google:)

So instead of embedding the JavaScript, I created a Spreadsheet as data source and inserted Organizatonal Chart rendered from this data. all fine until this moment, see attached:

Now I want to change some chart styles like: different background color for nodes, font size etc. I tried placing whole example code from https://developers.google.com/chart/interactive/docs/gallery/orgchart in A1 cell, but the chart treats it as text. See:

Is there a way to add some custom styling to Org Chart nodes if it's rendered from a Spreadsheet? Maybe some data format in the Spreadsheet itself is needed? It would be best form me to have the Chart rendering simply recognize HTML/CSS tags entered in the Source Spreadsheet. I know HTML and CSS quite well.

Or maybe you can point at a guide showing a non-JS user like me a way to place a Google Orgaizational Chart in a Google Site, step-by step.

--
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/GeGa0KB6FPo/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-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.