Community Visualization postMessage Reference

This page documents the data attribute of the postMessage that Data Studio provides to the iframe.

postMessage.data object reference

{
  type: string,
  config: object,
  fields: Array(field),
  dataResponse: object
}

Field Type Description
type string The type of the message. Currently, it is always the string RENDER.
config object An object that associates fields defined in the config with values.
fields Array(field) An array of field objects
dataResponse object An object that contains tables

config object

{
  data: Array(dataSection),
  style: Array(styleSection),
  themeStyle: object

}
Field Type Description
data Array(dataSection) An array of dataSection objects
style Array(styleSection) An array of styleSection objects
themeStyle object An object

dataSection object

{
  id: string,
  label: string,
  elements: Array(dataField)
}
Field Type Description
id string The developer-defined section ID from the config
label string The developer-defined section label from the config
elements Array(dataField) An array of dataFields

dataField object

{
  type: enum(DataElement),
  id: string,
  label: string,
  options: object(dataElementOptions),
  value: array(string)
}
Field Type Description
type enum(DataElement) The type of the DataField: either "DIMENSION", "METRIC", or "MAX_RESULTS"
id string The developer-defined field ID from the config
label string The developer-defined field label from the config
options object(dataElementOptions) The options that correspond to the dataElement type of this field
values Array(string) An array of field ID(s) that correspond to the data selected by the end user

styleSection object

{
  id: string,
  label: string,
  elements: array(styleField)
}
Field Type Description
id string The developer-defined section ID from the config
label string The developer-defined section label from the config
elements Array(styleField) An array of styleFields

styleField object

{
  type: enum(StyleElement),
  id: string,
  label: string,
  defaultValue: string | number | boolean,
  value: string
}
Field Type Description
type enum(StyleElement) The type of the StyleField
id string The developer-defined field ID from the config
label string The developer-defined field label from the config
defaultValue string The developer-defined default value for this style the config
value string Either the defaultValue or the style value selected by the end user

The styleElement enum is the value the developer defines in the visualization config. Possible values can be found in the config reference.

themeStyle object

{
  fillColor: {
    color: string,
    opacity: number
  },
  fontColor: {
    color: string,
    opacity: number
  },
  accentFillColor: {
    color: string,
    opacity: number
  },
  accentFontColor: {
    color: string,
    opacity: number
  },
  fontFamily: string,
  accentFontFamily: string,
  increaseColor: {
    color: string,
    opacity: number
  },
  decreaseColor: {
    color: string,
    opacity: number
  },
  gridColor: {
    color: string,
    opacity: number
  },
  seriesColor: [
    {
      color: string,
      opacity: number
    }
  ]
}
Field Type Description
fillColor object An object of the format {color: string, opacity: number}
fontColor object An object of the format {color: string, opacity: number}
accentFillColor object An object of the format {color: string, opacity: number}
accentFontColor object An object of the format {color: string, opacity: number}
fontFamily string A string describing the font family
accentFontFamily string A string describing the accent font family
increaseColor object An object of the format {color: string, opacity: number}
decreaseColor object An object of the format {color: string, opacity: number}
gridColor object An object of the format {color: string, opacity: number}
seriesColor Array(object) An array of objects of the format{color: string, opacity: number}

field object

{
  id: string,
  name: string,
  description: string,
  type: enum(semanticType)
}
Field Type Description
id string The Data Studio generated ID of the data field
name string The name of the field
description string The field description
type enum(semanticType) The semanticType of the field.

dataResponse object

{
  tables: `array(table)`
}
Field Type Description
tables array(table) An array of data tables

table object

{
  id: string
  fields: Array(string),
  rows: Array(Array(string | bool | int))

}
Field Type Description
id enum(TableType) The table type
fields Array(string) An array of fieldIds
rows Array(Array(string OR bool OR int)) An array of data row arrays

The values for the TableType can be one of the following:

Enum value Description
"DEFAULT" The dataField type that corresponds to a "DIMENSION"
"COMPARISON" Identifies a comparison table

Sample postMessage

{
  config: {
    data: [
      {
        id: "dimension",
        label: "Dimension",
        elements: [
          {
            "id": "dimension1",
            "label": "first dimension",
            "type": "DIMENSION",
            "options": {
              "min": 1,
              "max": 2
            },
            fields: ["qt_1234", "qt_4321"]
          },
        ],
      },
      {
        id: "metric",
        label: "Metric",
        elements: [
          {
            type: "METRIC",
            id: "metSelector",
            label: "Metric X",
            options: {
              min: 1,
              max: 1
            },
            fields: ["qt_6789"]
          }
        ]
      }
    ],
    style: [
      {
        id: "tableHeaderSection",
        label: "Table Header",
        elements: [
          {
            type: "FONT_COLOR",
            id: "fontColor1",
            label: "Table header font color",
            defaultValue: "#888888",
            value: "#cccccc"
          }
        ]
      }
    ],
    themeStyle: {
      <themeStyle properties - see table above.>
    }
  },
  fields: [
    {
      id: "qt_1234",
      name: "Source",
      description: "The source.",
      type: "TEXT"
    },
    {
      id: "qt_4321",
      name: "Country",
      description: "The country.",
      type: "COUNTRY"
    },
    {
      id: "qt_6789",
      name: "Sessions",
      description: "Number of sessions.",
      type: "NUMBER"
    }
  ],
  dataResponse: {
    tables: [
      {
        id: "DEFAULT",
        fields: ["qt_1234", "qt_4321", "qt_6789"],
        rows: [
          ["google", "Canada", 324234],
          ["google images", "USA", 5345]
        ]
      },
      {
        id: "COMPARISON",
        fields: ["qt_1234", "qt_4321", "qt_6789"],
        rows: [
          ["google", "Canada", 343434],
          ["google images", "USA", 6645]
        ]
      }
    ]
  }
}