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

// create and add the canvas
var canvasElement = document.createElement('canvas');
var ctx = canvasElement.getContext('2d');
canvasElement.id = 'myViz';
document.body.appendChild(canvasElement);

function drawViz(data) {
  var ctx = canvasElement.getContext('2d');

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

  // set the canvas width and height
  ctx.canvas.width = dscc.getWidth() - 20;
  ctx.canvas.height = dscc.getHeight() - 100;

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

}

// subscribe to data and style changes.
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});

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",
      "label": "Concepts",
      "elements": [
        {
          "id": "barDimension",
          "label": "Dimension",
          "type": "DIMENSION",
          "options": {
            "min": 1,
            "max": 1
          }
        },
        {
          "id": "barMetric",
          "label": "Metric",
          "type": "METRIC",
          "options": {
            "min": 1,
            "max": 1
          }
        }
      ]
    }
  ],
  "style": [
    {
      "id": "color",
      "label": "Colors",
      "elements": [
        {
          "type": "FONT_COLOR",
          "id": "barColor",
          "label": "Bar Color",
          "defaultValue": "#000000"
        }
      ]
    }
  ]
}

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 manifest.json, myViz.js, myViz.json, and myViz.css files to the Google Cloud Storage bucket using the web interface or the gsutil command-line tool. You'll need to repeat this each time you update your visualization.

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

// create and add the canvas
var canvasElement = document.createElement('canvas');
var ctx = canvasElement.getContext('2d');
canvasElement.id = 'myViz';
document.body.appendChild(canvasElement);

function drawViz(data) {
  var ctx = canvasElement.getContext('2d');

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

  // set the canvas width and height
  ctx.canvas.width = dscc.getWidth() - 20;
  ctx.canvas.height = dscc.getHeight() - 100;

  ctx.fillStyle = data.style.barColor.value.color || data.style.barColor.defaultValue;
  ctx.fillRect(10, 10, 100, 100);

}

// subscribe to data and style changes.
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});

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

// create and add the canvas
var canvasElement = document.createElement('canvas');
var ctx = canvasElement.getContext('2d');
canvasElement.id = 'myViz';
document.body.appendChild(canvasElement);

function drawViz(data) {
  var rowData = data.tables.DEFAULT;
  var ctx = canvasElement.getContext('2d');

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

  // set the canvas width and height
  ctx.canvas.width = dscc.getWidth() - 20;
  ctx.canvas.height = dscc.getHeight() - 100;

  // scale the bar width and max bar height to the canvas
  var barWidth = ctx.canvas.width / (rowData.length * 2);
  var maxBarHeight = ctx.canvas.height - 20;

  // vertical offset for bar text
  var textYOffset = 20;

  ctx.fillStyle = data.style.barColor.value.color || data.style.barColor.defaultValue;

  // obtain the maximum bar metric value for scaling purposes
  var metricMax = 0;
  rowData.forEach(function(row){
    metricMax = Math.max(metricMax, row['barMetric'][0]);
  })

  // draw bars
  // add dimension labels below bars
  // 'barDimension' and 'barMetric' come from the id defined in myViz.json
  rowData.forEach(function(row, i) {

    // calculates the height of the bar using the row value, maximum bar
    // height, and the maximum metric value calculated earlier
    var barHeight = Math.round(
        -1 * ((row['barMetric'][0] * maxBarHeight) / metricMax)
    );

    // calculates the x coordinate of the bar based on the width of the convas
    // and the width of the bar
    var barX = (ctx.canvas.width /rowData.length) * i + barWidth / 2;

    ctx.fillRect(barX, maxBarHeight, barWidth, barHeight);

    var barText = row['barDimension'][0];
    var textX = barX + barWidth / 4;
    var textY = maxBarHeight + textYOffset;

    ctx.fillText(barText, textX, textY);
  });

}

// subscribe to data and style changes.
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});

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);

// create and add the canvas
var canvasElement = document.createElement('canvas');
var ctx = canvasElement.getContext('2d');
canvasElement.id = 'myViz';
document.body.appendChild(canvasElement);

function drawViz(data) {
  var rowData = data.tables.DEFAULT;
  var ctx = canvasElement.getContext('2d');

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

  // set the canvas width and height
  ctx.canvas.width = dscc.getWidth() - 20;
  ctx.canvas.height = dscc.getHeight() - 100;

  // scale the bar width and max bar height to the canvas
  var barWidth = ctx.canvas.width / (rowData.length * 2);
  var maxBarHeight = ctx.canvas.height - 20;

  // vertical offset for bar text
  var textYOffset = 20;

  ctx.fillStyle = data.style.barColor.value.color || data.style.barColor.defaultValue;

  // obtain the maximum bar metric value for scaling purposes
  var metricMax = 0;
  rowData.forEach(function(row){
    metricMax = Math.max(metricMax, row['barMetric'][0]);
  })

  // draw bars
  // add dimension labels below bars
  // 'barDimension' and 'barMetric' come from the id defined in myViz.json
  rowData.forEach(function(row, i) {

    // calculates the height of the bar using the row value, maximum bar
    // height, and the maximum metric value calculated earlier
    var barHeight = Math.round(
        -1 * ((row['barMetric'][0] * maxBarHeight) / metricMax)
    );

    // calculates the x coordinate of the bar based on the width of the convas
    // and the width of the bar
    var barX = (ctx.canvas.width /rowData.length) * i + barWidth / 2;

    ctx.fillRect(barX, maxBarHeight, barWidth, barHeight);

    var barText = row['barDimension'][0];
    var textX = barX + barWidth / 4;
    var textY = maxBarHeight + textYOffset;

    ctx.fillText(barText, textX, textY);
    // Get the human-readable name of the metric and dimension

    var metricName = data.fields['barMetric'][0].name;
    var dimensionName = data.fields['barDimension'][0].name;

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

}

// subscribe to data and style changes.
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});

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