Google Data Studio lets users build live, interactive dashboards with beautiful data visualizations, for free. Users can fetch their data from a variety of sources and create reports in Data Studio, with full editing and sharing capabilities. Here's an example Data Studio dashboard:

(Click here to view this example report in Data Studio)

Data Studio provides several built-in chart types, including line charts, bar chart, pie charts, and scatter plots. Community visualizations allow you to build and use your own custom JavaScript visualizations in Data Studio. Community visualizations are built by the Data Studio developer community - any developer can build one. You can also share your community visualizations with others so that they can use them with their own data.

What you'll learn

In this code lab, you'll learn:

What you'll need

To complete this code lab, you'll need:

Trusted Testing

If you aren't part of the trusted testing Google group, you will need to fill out this form. Once you have been added to the trusted testing Google group, you will have access to use community visualizations in Data Studio.

Why did you choose this codelab?

I am interested in data visualization in general. I want to learn more about Data Studio I want to build my own Community Visualization. I am trying to integrate Data Studio with another platform. I am interested in Google Cloud solutions.

How do you plan to use this codelab/tutorial?

Skim through only Read it and complete the exercises

How would you rate your experience with Data Studio?

Never heard of it I know what it is but I don't use it. I use it regularly. I am an expert user.

What best describes your background?

Developer Designer / UX Specialist Business / Data / Financial Analyst Data Scientist / Data Engineer Marketing / Social Media / Digital Analytics Expert Other

What JavaScript visualization libraries are you interested in?

D3.js Google Charts Chart.js Leaflet Highcharts Plot.ly Other

Move to the next page to submit survey information.

Data Studio community visualizations allow you to create and use custom javascript visualizations that integrate into your dashboards.

In this codelab, you will create a bar chart community visualization that supports 1 dimension, 1 metric, and bar color styling.

To create a community visualization, you need the following files in a Google Cloud Platform storage bucket, which you will create in a later step.

Filename

Filetype

Purpose

manifest.json*

JSON

Provides metadata about the visualization and the location of the other resources.

myViz.json

JSON

Provides data and style configuration options for the Property panel.

myViz.js

JavaScript

Provides the JavaScript code required for displaying the visualization.

myViz.css (optional)

CSS

Provides styling for the visualization.

*The manifest is the only file that has a required name. The other files can be named differently, as long as their name/location is specified in your manifest file.

You'll add the code required to handle data, style changes, and visualization rendering into your JavaScript file.

Write the visualization source

Step 1: Download the dscc.min.js file from the Data Studio Community Component Library and copy it to your working directory.

Step 2: Copy the following code into a text editor and save it as myVizSource.js in your working directory.

myVizSource.js

function drawViz(vizData) {
  // Remove the canvas if it exists
  if (document.querySelector('canvas')){
    var oldCanv = document.querySelector('canvas');
    oldCanv.parentNode.removeChild(oldCanv);
  }
  // Draw a blue rectangle using canvas.
  var canvasElement = document.createElement('canvas');
  var ctx = canvasElement.getContext('2d');
  ctx.canvas.width = dscc.getWidth() - 20;
  ctx.canvas.height = dscc.getHeight() - 20;
  canvasElement.id = 'myViz';
  document.body.appendChild(canvasElement);

  ctx.fillStyle = 'blue';
  ctx.fillRect(10, 10, 100, 100);
}

dscc.subscribeToData(drawViz);

Prepare the final JavaScript file

Step 3: Combine all JavaScript required into a single file by copying the contents of the visualization helper library (dscc.min.js) and your myVizSource.js file into a new file named myViz.js. Run the following commands to concatenate the files. You'll need to repeat this step each time you update your visualization code.

Linux/Mac OS concatenation script

cat dscc.min.js > myViz.js
echo >> myViz.js
cat myVizSource.js >> myViz.js

Windows script

del myViz.js
type nul > myViz.js
type dscc.min.js >> myViz.js
echo.>> myViz.js
type myVizSource.js >> myViz.js

The css file defines the styling for your visualization. Copy the following code and save it as myViz.css.

myViz.css

#myVizTitle {
  color: black;
  font-size: 24px;
  text-align: center;
  margin: 0 auto;
}

The visualization config json file defines the data and style attributes supported and required by your visualization. This visualization you'll build in this codelab supports 1 dimension, 1 metric, and requires 1 style element to select a color. Learn more about dimensions and metrics.

Copy the following code and save it as myViz.json.To learn more about the properties you can configure, visit the config reference documentation.

myViz.json

{
  "data": [
    {
      "id": "concepts",
      "heading": "Concepts",
      "elements": [
        {
          "id": "barDimension",
          "label": "Dimension",
          "type": "DIMENSION",
          "options": {
            "min": 1,
            "max": 1,
            "supportedTypes": ["DEFAULT"]
          }
        },
        {
          "id": "barMetric",
          "label": "Metric",
          "type": "METRIC",
          "options": {
            "min": 1,
            "max": 1
          }
        }
      ]
    }
  ],
  "style": [
    {
      "id": "color",
      "heading": "Colors",
      "elements": [
        {
          "type": "FONT_COLOR",
          "id": "barColor",
          "label": "Bar Color",
          "defaultValue": "#000"
        }
      ]
    }
  ]
}

Step 1: Create a Google Cloud Platform (GCP) Project

Step 2: Create a GCP bucket. The recommended storage class is Regional. Visit Cloud Storage Pricing for details on free tiers. It is unlikely your visualization storage will incur any costs for the Regional storage class.

Step 3: Take note of your bucket name/path, beginning with the section after Buckets/ . It will be used to deploy your visualization.

The manifest file provides information about your visualization location and resources. It must be named manifest.json, and be located at the root of your Google Cloud Storage bucket.

Copy the following code into a text editor and save it as manifest.json. Replace MY_GOOGLE_CLOUD_STORAGE_BUCKET with your GCS bucket name.

To learn more about the manifest, visit the manifest reference documentation.

manifest.json

{
  "name": "My Visualizations",
  "organization": "MyOrg",
  "description": "My first visualization package.",
  "logoUrl": "https://logo",
  "organizationUrl": "https://url",
  "supportUrl": "https://url",
  "privacyPolicyUrl": "https://url",
  "termsOfServiceUrl": "https://url",
  "packageUrl": "https://url",
  "supportUrl": "https://url",
  "devMode": true,
  "components": [
    {
      "name": "myViz",
      "description": "My first Community Visualization",
      "iconUrl": "https://url",
      "resource": {
    "js": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.js",
    "config": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.json",
    "css": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.css"
      }
    }
  ]
}
  1. Upload the myViz.js, myViz.json, and myViz.css to the Google Cloud Storage bucket.
  2. You can use the web interface or the gsutil command-line tool to do this. You'll need to repeat this each time you update your visualization.
  3. Make the files public by checking the "Share publicly" checkbox.

gsutil upload commands

gsutil cp -a public-read myViz.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET

Step 1: Copy the URL for the Community Visualization sample data set.

Step 2: Visit Data Studio and click Blank under Start a new report.

Step 3: On the bottom right, click CREATE NEW DATA SOURCE.

Step 4: Select the Google Sheets connector.

Step 5: In the URL field, enter the URL of the Google Sheet from step 1 above.

Step 6: In the top-right of the page, click CONNECT, then click ADD TO REPORT.

Step 7: Click ADD TO REPORT in the box that appears to add the Data Source to your report.

Step 6: In the toolbar, click the community visualization button . This opens a text input field.

Step 7: Paste your bucket name prefixed by gs:// into the text input and click "Load". For example, gs://my-viz-bucket/myViz.

Your visualization will automatically be drawn in the top-left-hand corner of your canvas. The property panel on the right-hand side should reflect the elements in your myViz.json file.

The visualization allows for one Dimension and one Metric.

One Style Element was specified - rendering a Font Color selector labelled "Bar Color." In the next step, you'll use this selector to affect the visualization.

In this section, you will use the color selector style element to update your visualization.

Step 1: Replace the code in your myVizSource.js file with the code below.

myVizSource.js

dscc.subscribeToData(drawViz);                                                                                                                                                                                                                                                            
                                                                                                                                                                                                                                                                                          
function drawViz(vizData) {                                                                                                                                                                                                                                                               
  // Remove the canvas if it exists                                                                                                                                                                                                                                                       
  if (document.querySelector('canvas')){                                                                                                                                                                                                                                                  
    var oldCanv = document.querySelector('canvas');                                                                                                                                                                                                                                       
    oldCanv.parentNode.removeChild(oldCanv);                                                                                                                                                                                                                                              
  }                                                                                                                                                                                                                                                                                       
  // Draw a blue rectangle using canvas.                                                                                                                                                                                                                                                  
  var canvasElement = document.createElement('canvas');                                                                                                                                                                                                                                   
  var ctx = canvasElement.getContext('2d');                                                                                                                                                                                                                                               
  ctx.canvas.width = dscc.getWidth() - 20;                                                                                                                                                                                                                                                
  ctx.canvas.height = dscc.getHeight() - 20;                                                                                                                                                                                                                                              
  canvasElement.id = 'myViz';                                                                                                                                                                                                                                                             
  document.body.appendChild(canvasElement);                                                                                                                                                                                                                                               
                                                                                                                                                                                                                                                                                          
  // Use the Bar Color style element value to set the rectangle color.                                                                                                                                                                                                                    
  // The property name matches the name defined in your visualization config.                                                                                                                                                                                                             
  ctx.fillStyle = vizData.config.style[0].elements[0].value.color;                                                                                                                                                                                                                                           
  ctx.fillRect(10, 10, 100, 100);                                                                                                                                                                                                                                                         
                                                                                                                                                                                                                                                                                          
}

Step 2: Create the combined JavaScript file, then re-upload your visualization files to Google Cloud Storage.

Step 3: Refresh the Data Studio report where you tested your community visualization.

You should be able to change the color of the rectangle using the selector in the style menu.

In this section, you will update your visualization to draw a bar chart using the data from the Community Visualization sample data set. As an aside: Data Studio returns a max of 2,500 rows of data to the visualization.

Step 1: Replace the code in your myVizSource.js file with the code below.

myVizSource.js

var canvasElement = document.createElement('canvas');
var ctx = canvasElement.getContext('2d');
ctx.canvas.width = dscc.getWidth() - 20;
ctx.canvas.height = dscc.getHeight() - 100;
canvasElement.id = 'myViz';
document.body.appendChild(canvasElement);

var barWidth = 50;
var barGap = 10;
var maxBarHeight = 300;
var canvasPadding = 50;

function drawViz(vizData) {
  var data = dscc.rowsByConfigId(vizData).DEFAULT;
  // Place the canvas element on the page.
  var ctx = canvasElement.getContext('2d');

  // Clear the canvas.
  ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);

  // 'barMetric' comes from the id defined in myViz.json
  var rowsTotal = 0;
  for (var i = 0; i < data.length; i++) {
    rowsTotal += data[i]['barMetric'][0];
  }

  // Use the Bar Color style element value to set the rectangle color.
  ctx.fillStyle = vizData.config.style[0].elements[0].value.color;

  // Calculate height and draw bars for each row of data.
  for (var i = 0; i < data.length; i++) {
    var barHeight = Math.round(
      -1 * maxBarHeight * (data[i]['barMetric'][0] / rowsTotal)
    );
    var barX = (ctx.canvas.width /data.length) * i + barWidth / 2;
    // Draw bars.
    ctx.fillRect(barX, maxBarHeight, barWidth, barHeight);

    // Add dimension labels below bars.
    // 'barDimension' comes from the id defined in myViz.json
    ctx.fillText(
      data[i]['barDimension'][0],
      barX + barWidth / 4,
      maxBarHeight + 20
    );
  }
}

// Subscribe to Data and Style changes.
dscc.subscribeToData(drawViz);

Step 2: Create the combined JavaScript file, then re-upload your visualization files to Google Cloud Storage.

Step 3: Refresh the Data Studio report where you tested your community visualization. You should have a bar chart with labels generated from the data in the Google Sheet. To change the color of the bars, change the color selected in the Style "Bar Color" selector.

In this section, you will update your visualization to draw a bar chart using the data from the Community Visualization sample data set.

Step 1: Replace the code in your myVizSource.js file with the code below.

myVizSource.js

// create a title element

var titleElement = document.createElement('div');
titleElement.id = 'myVizTitle';
document.body.appendChild(titleElement);

var canvasElement = document.createElement('canvas');
var ctx = canvasElement.getContext('2d');
ctx.canvas.width = dscc.getWidth() - 20;
ctx.canvas.height = dscc.getHeight() - 100;
canvasElement.id = 'myViz';
document.body.appendChild(canvasElement);

var barWidth = 50;
var barGap = 10;
var maxBarHeight = 300;
var canvasPadding = 50;

function drawViz(vizData) {
  var data = dscc.rowsByConfigId(vizData).DEFAULT;
  // Place the canvas element on the page.
  var ctx = canvasElement.getContext('2d');

  // Clear the canvas.
  ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);

  // 'barMetric' comes from the id defined in myViz.json
  var rowsTotal = 0;
  for (var i = 0; i < data.length; i++) {
    rowsTotal += data[i]['barMetric'][0];
  }

  // Use the Bar Color style element value to set the rectangle color.
  ctx.fillStyle = vizData.config.style[0].elements[0].value.color;

  // Calculate height and draw bars for each row of data.
  for (var i = 0; i < data.length; i++) {
    var barHeight = Math.round(
      -1 * maxBarHeight * (data[i]['barMetric'][0] / rowsTotal)
    );
    var barX = (ctx.canvas.width /data.length) * i + barWidth / 2;
    // Draw bars.
    ctx.fillRect(barX, maxBarHeight, barWidth, barHeight);

    // Add dimension labels below bars.
    // 'barDimension' comes from the id defined in myViz.json
    ctx.fillText(
      data[i]['barDimension'][0],
      barX + barWidth / 4,
      maxBarHeight + 20
    );
  }

  // Update the title element using dimension/metric names.
  var titleElement = document.getElementById('myVizTitle');

  // Get the fields indexed by Data Studio ID
  var fieldsByDsID = dscc.fieldsById(vizData);

  // Get the Data Studio ID of the metric and dimension
  var metricId = vizData.config.data[0].elements[1].value[0];
  var dimensionId = vizData.config.data[0].elements[0].value[0];

  // Get the human-readable name of the metric and dimension
  var metricName = fieldsByDsID[metricId].name;
  var dimensionName = fieldsByDsID[dimensionId].name;

  titleElement.innerText = metricName + ' by ' + dimensionName;
}

// Subscribe to Data and Style changes.
dscc.subscribeToData(drawViz);

Step 2: Create the combined JavaScript file, then re-upload your visualization files to Google Cloud Storage.

Step 3: Refresh the Data Studio report where you tested your community visualization. You should have a bar chart with a title generated from the data and styled using your myViz.css file..

Congratulations - you've created a community visualization in Data Studio! This brings you to the end of this codelab. Now, let's see what next steps you can take.

Extend your visualization

Do more with community visualizations

Additional resources

Below are various resources you can access to help you dig into the material covered in this codelab more.

Resource Type

User Features

Developer Features

Documentation

Help Center

Developer Documentation

News & Updates

Sign up in Data Studio > User Settings

Developer Mailing List

Ask Questions

User Forum

Stack Overflow [google-data-studio]

Videos

Data Studio on Youtube

Coming Soon!

Examples

Report Gallery

Open Source Repository