Sample dashboards and layouts

This guide provides additional dashboard configurations you can create by using the Cloud Monitoring API.

When to use the API

The Dashboard API provides you with a way of managing many dashboards at once. While you can use the Google Cloud Console to manage your dashboards, you may find it easier to use the API to manage your custom dashboards in bulk.

You also need to use the API if you want to add the Text, Scorecard, or blank placeholder widgets to your dashboard.

Dashboard layouts

Dashboard in GridLayout

This dashboard shows a GridLayout with three widgets.

{
  "dashboards" : [
    {
      "displayName": "Grid Layout Example",
      "gridLayout": {
        "columns": 2,
        "widgets": [
          {
            "title": "Widget 1",
            "xyChart": {
              "dataSets": {
                "timeSeriesQuery": {
                  "timeSeriesFilter": {
                    "filter": "metric.type=\"agent.googleapis.com/nginx/connections/accepted_count\"",
                    "aggregation": {
                      "perSeriesAligner": "ALIGN_RATE"
                    }
                  },
                  "unitOverride": "1"
                },
                "plotType": "LINE"
              },
              "timeshiftDuration": {},
              "yAxis": {
                "label": "y1Axis",
                "scale": "LINEAR"
              }
            }
          },
          {
            "text": {
              "content": "Widget 2"
            }
          },
          {
            "title": "Widget 3",
            "xyChart": {
              "dataSets": {
                "timeSeriesQuery": {
                  "timeSeriesFilter": {
                    "filter": "metric.type=\"agent.googleapis.com/nginx/connections/accepted_count\"",
                    "aggregation": {
                      "perSeriesAligner": "ALIGN_RATE"
                    }
                  },
                  "unitOverride": "1"
                },
                "plotType": "STACKED_BAR"
              },
              "timeshiftDuration": {},
              "yAxis": {
                "label": "y1Axis",
                "scale": "LINEAR"
              }
            }
          }
        ]
      }
    }
  ]
}

The dashboard looks similar to the following example:

Example dashboard with a grid layout

Dashboard in RowLayout

This dashboard displays a RowLayout with three widgets.

{
  "displayName": "Row Layout Example",
  "rowLayout": {
    "rows": [
      {
        "weight": 1,
        "widgets": [
          {
            "text": {
              "content": "Widget 1",
              "format": "MARKDOWN"
            }
          },
          {
            "text": {
              "content": "Widget 2",
              "format": "MARKDOWN"
            }
          },
          {
            "text": {
              "content": "Widget 3",
              "format": "MARKDOWN"
            }
          }
        ]
      }
    ]
  }
}

The dashboard looks similar to the following example:

Example dashboard with a row layout

Dashboard in ColumnLayout

This dashboard displays a ColumnLayout with three widgets.

{
  "displayName": "Column Layout Example",
  "columnLayout": {
    "columns": [
      {
        "weight": 1,
        "widgets": [
          {
            "text": {
              "content": "Widget 1",
              "format": "MARKDOWN"
            }
          },
          {
            "text": {
              "content": "Widget 2",
              "format": "MARKDOWN"
            }
          },
          {
            "text": {
              "content": "Widget 3",
              "format": "MARKDOWN"
            }
          }
        ]
      }
    ]
  }
}


The dashboard looks similar to the following example:

Example dashboard with column layout

Dashboards with Widgets

Dashboard with an XyChart

This dashboard shows a dashboard with a basic XyChart. If you ever used the Google Cloud Console to create charts on dashboards, those charts are instances of the XyChart widget.

Similar to the functionality provided in the Cloud Console, the API provides options to change the chart's PlotType or to configure the chart's view modes.

{
  "displayName": "Demo dashboard",
  "gridLayout": {
    "widgets": [
      {
        "title": "Sample line chart",
        "xyChart": {
          "dataSets": [
            {
              "timeSeriesQuery": {
                "timeSeriesFilter": {
                  "filter": "metric.type=\"compute.googleapis.com/instance/cpu/utilization\" resource.type=\"gce_instance\"",
                  "aggregation": {
                    "perSeriesAligner": "ALIGN_MEAN",
                    "crossSeriesReducer": "REDUCE_MAX",
                    "groupByFields": [
                      "resource.label.zone"
                    ]
                  }
                },
                "unitOverride": "1"
              },
              "plotType": "LINE"
            }
          ],
          "timeshiftDuration": "0s",
          "yAxis": {
            "label": "y1Axis",
            "scale": "LINEAR"
          },
          "chartOptions": {
            "mode": "COLOR"
          }
        }
      }
    ]
  }
}

The dashboard looks similar to the following example:

Example XyChart

Dashboard with an XyChart with a STACKED_AREA PlotType

This dashboard shows an XyChart with a STACKED_AREA PlotType.

{
  "displayName": "Demo dashboard",
  "gridLayout": {
    "widgets": [
      {
        "title": "Sample stacked-area chart",
        "xyChart": {
          "dataSets": [
            {
              "timeSeriesQuery": {
                "timeSeriesFilter": {
                  "filter": "metric.type=\"compute.googleapis.com/instance/cpu/utilization\" resource.type=\"gce_instance\"",
                  "aggregation": {
                    "perSeriesAligner": "ALIGN_MEAN",
                    "crossSeriesReducer": "REDUCE_MAX",
                    "groupByFields": [
                      "resource.label.zone"
                    ]
                  }
                },
                "unitOverride": "1"
              },
              "plotType": "STACKED_AREA"
            }
          ],
          "timeshiftDuration": "0s",
          "yAxis": {
            "label": "y1Axis",
            "scale": "LINEAR"
          },
          "chartOptions": {
            "mode": "COLOR"
          }
        }
      }
    ]
  }
}

The dashboard looks similar to the following example:

Example XyChart with a stacked area plot

Dashboard with an XyChart with a STACKED_BAR PlotType

This dashboard shows an XyChart with a STACKED_BAR PlotType.

{
  "displayName": "Demo Dashboard",
  "gridLayout": {
    "widgets": [
      {
        "title": "My First Chart",
        "xyChart": {
          "dataSets": [
            {
              "timeSeriesQuery": {
                "timeSeriesFilter": {
                  "filter": "metric.type=\"compute.googleapis.com/instance/cpu/utilization\" resource.type=\"gce_instance\"",
                  "aggregation": {
                    "perSeriesAligner": "ALIGN_MEAN",
                    "crossSeriesReducer": "REDUCE_MAX",
                    "groupByFields": [
                      "resource.label.zone"
                    ]
                  }
                },
                "unitOverride": "1"
              },
              "plotType": "STACKED_BAR"
            }
          ],
          "timeshiftDuration": "0s",
          "yAxis": {
            "label": "y1Axis",
            "scale": "LINEAR"
          },
          "chartOptions": {
            "mode": "COLOR"
          }
        }
      },
    ]
  }
}

The dashboard looks similar to the following example:

Example XyChart with a stacked bar plot

Dashboard with a Scorecard

This dashboard shows a Scorecard based on the sum of accepted connections. Because the value falls below the specified threshold, it is considered a pass.

{
  "displayName": "Untitled Dashboard"
  "gridLayout" {
    "columns": 1
    "widgets": [
      {
        "title": "Example Scorecard"
        "scorecard" {
          "timeSeriesQuery" {
            "timeSeriesFilter" {
              "filter": "metric.type=\"agent.googleapis.com/nginx/connections/accepted_count\""
              "aggregation" {
                "perSeriesAligner": "ALIGN_RATE"
                "crossSeriesReducer": "REDUCE_SUM"
              }
            }
            "unitOverride": "1"
          }
          "sparkChartView" {
          }
          "thresholds": [
            {
              "value": 70
              "direction": "BELOW"
            }
          ]
        }
      }
    ]
  }
}

The dashboard looks similar to the following example:

Example dashboard with a Scorecard widget

Dashboard with a Scorecard with GaugeView

This dashboard shows a Scorecard with a gauge chart and evaluates the number of accepted connections to see if the value falls within the defined threshold. Since the metric exceeds the upper_bound of the gauge_view, the gauge displays a failure.

{
  "displayName": "Untitled Dashboard",
  "gridLayout": {
    "columns": "1",
    "widgets": [
      {
        "title": "Example Scorecard",
        "scorecard": {
          "timeSeriesQuery": {
            "timeSeriesFilter": {
              "filter": "metric.type=\"agent.googleapis.com/nginx/connections/accepted_count\"",
              "aggregation": {
                "perSeriesAligner": "ALIGN_RATE",
                "crossSeriesReducer": "REDUCE_SUM"
              }
            },
            "unitOverride": "1"
          },
          "gaugeView": {
            "upperBound": 65
          },
          "thresholds": [
            {
              "value": 70,
              "color": "RED",
              "direction": "BELOW"
            }
          ]
        }
      }
    ]
  }
}

The dashboard looks similar to the following example:

Example dashboard with a Scorecard widget with GaugeView

Dashboard with a Text widget

This example shows a simple dashboard with a Text widget.

{
  "displayName": "Demo Dashboard"
  "gridLayout" {
    "widgets": [
      {
        "text" {
          "content": "Hello World"
        }
      }
    ]
  }
}

The dashboard looks similar to the following example:

Example dashboard with a text widget

Dashboard with a blank widget

This example shows a simple dashboard with an empty, placeholder widget. Note that only the dashboard's displayName appears in the widget.

{
  "displayName": "Demo Dashboard",
  "gridLayout": {
    "widgets": [
      {
        "blank": {}
      }
    ]
  }
}

The dashboard looks similar to the following example:

Example dashboard with a blank widget