Google Data Studio Community Visualizations can be used to add a new chart-type... but how often are they used to showcase your brilliant insights and provide direction for report viewers?

For those familiar with the community visualization creation, setup and hosting process, Instructions are contained within this post. Anyhow, I urge the review of Google’s Community Visualization Gallery.

Quick Start Setup

Add the pre-built Component ID

gs://community-viz-shotaokb/mouseovertooltip/en

A few Community Visualizations are available within the interface but you’ll want to “Explore More” A few Community Visualizations are available within the interface but you’ll want to “Explore More”
A few Community Visualizations are available within the interface but you’ll want to “Explore More”
Click to Build your own visualization. This is also where we will validate any visualizations. Click to Build your own visualization. This is also where we will validate any visualizations. - glowingsolar.systems - Forget Analysis Paralysis
Click to Build your own visualization. This is also where we will validate any visualizations.
Add the Component ID for the Mousover Tooltip Visualization Add the Component ID for the Mousover Tooltip Visualization - glowingsolar.systems - Forget Analysis Paralysis
Add the Component ID for the Mousover Tooltip Visualization
Change the Icon, Text, Text Size, Font & More in the Style options - GlowingSolar.Systems - Forget Analysis Paralysis
Change the Icon, Text, Text Size, Font & More in the Style options, Example Dash

Full Setup Instructions

GitHub Repo Here

Step1 Download dscc.min.js to ./js

https://developers.google.com/datastudio/visualization/library

Step2 Type following commands

$ cat js/dscc.min.js > mouseovertooltip.js
$ echo >> mouseovertooltip.js
$ cat js/icons.js >> mouseovertooltip.js
$ cat js/tooltip.js >> mouseovertooltip.js
$ cat js/main.js >> mouseovertooltip.js

or

$ cat js/dscc.min.js > mouseovertooltip.js && echo >> mouseovertooltip.js && cat js/icons.js >> mouseovertooltip.js && cat js/tooltip.js >> mouseovertooltip.js && cat js/main.js >> mouseovertooltip.js

Step3 Push 4 files your gcs bucket

  1. manifest.json
  2. mouseovertooltip.js
  3. mouseovertooltip.json
  4. style.css

How to Use this Community Visualization on DataStudio

English

Component ID: gs://community-viz-shotaokb/mouseovertooltip/en

Japanese

Component ID: gs://community-viz-shotaokb/mouseovertooltip/ja