# Dashboard JSON model
<a name="v12-dash-dashboard-json-model"></a>

****  
This documentation topic is designed for Grafana workspaces that support **Grafana version 12.x**.  
For Grafana workspaces that support Grafana version 10.x, see [Working in Grafana version 10](using-grafana-v10.md).  
For Grafana workspaces that support Grafana version 9.x, see [Working in Grafana version 9](using-grafana-v9.md).  
For Grafana workspaces that support Grafana version 8.x, see [Working in Grafana version 8](using-grafana-v8.md).

A dashboard in Grafana is represented by a JSON object, which stores metadata of its dashboard. Dashboard metadata includes dashboard properties, metadata from panels, template variables, and panel queries.

**To view the JSON of a dashboard**

1. Navigate to a dashboard.

1. In the top navigation menu, select the **Dashboard settings** (gear) icon.

1. Select **JSON Model**.

## JSON fields
<a name="v12-dash-json-fields"></a>

When a user creates a new dashboard, a new dashboard JSON object is initialized with the following fields.

**Note**  
In the following JSON, id is shown as null, which is the default value assigned to it until a dashboard is saved. After a dashboard is saved, an integer value is assigned to the `id` field.

```
{
  "id": null,
  "uid": "cLV5GDCkz",
  "title": "New dashboard",
  "tags": [],
  "timezone": "browser",
  "editable": true,
  "graphTooltip": 1,
  "panels": [],
  "time": {
    "from": "now-6h",
    "to": "now"
  },
  "timepicker": {
    "time_options": [],
    "refresh_intervals": []
  },
  "templating": {
    "list": []
  },
  "annotations": {
    "list": []
  },
  "refresh": "5s",
  "schemaVersion": 17,
  "version": 0,
  "links": []
}
```

The following describes each field in the dashboard JSON.


| Name | Usage | 
| --- | --- | 
| `id` | unique numeric identifier for the dashboard (generated by the db) | 
| `uid` | unique dashboard identifier that can be generated by anyone. string (8-40) | 
| `title` | current title of dashboard | 
| `tags` | tags associated with dashboard, an array of strings | 
| `style` | theme of dashboard, such as `dark` or `light` | 
| `timezone` | timezone of dashboard, such as `utc` or `browser` | 
| `editable` | whether a dashboard is editable or not | 
| `graphTooltip` | 0 for no shared crosshair or tooltip (default), 1 for shared crosshair, 2 for shared crosshair and shared tooltip | 
| `time` | time range for dashboard, such as `last 6 hours` or `last 7 days` | 
| `timepicker` | timepicker metadata, see [timepicker section](#v12-dash-json-panels) for details | 
| `templating` | templating metadata, see [templating section](#v12-dash-json-panels) for details | 
| `annotations` | annotations metadata, see [annotations](v12-dash-annotations.md) for how to add them | 
| `refresh` | auto-refresh interval | 
| `schemaVersion` | version of the JSON schema (integer), incremented each time a Grafana update brings changes to this schema | 
| `version` | version of the dashboard (integer), incremented each time the dashboard is updated | 
| `panels` | panels array (see the next section for detail) | 

## Panels
<a name="v12-dash-json-panels"></a>

Panels are the building blocks of a dashboard. It consists of data source queries, type of graphs, aliases, and more. Panel JSON consists of an array of JSON objects, each representing a different panel. Most of the fields are common for all panels but some fields depend on the panel type. The following is an example of panel JSON of a text panel.

```
"panels": [
  {
    "type": "text",
    "title": "Panel Title",
    "gridPos": {
      "x": 0,
      "y": 0,
      "w": 12,
      "h": 9
    },
    "id": 4,
    "mode": "markdown",
    "content": "# title"
  }
```

**Panel size and position**

The gridPos property describes the panel size and position in grid coordinates.
+ `w` – 1 to 24 (the width of the dashboard is divided into 24 columns)
+ `h` – In grid height units, each represents 30 pixels.
+ `x` – The x position, in the same unit as `w`.
+ `y` – The y position, in the same unit as `h`.

The grid has a negative gravity that moves up panels if there is empty space above a panel.

**Timepicker**

```
"timepicker": {
    "collapse": false,
    "enable": true,
    "notice": false,
    "now": true,
    "refresh_intervals": [
      "5s",
      "10s",
      "30s",
      "1m",
      "5m",
      "15m",
      "30m",
      "1h",
      "2h",
      "1d"
    ],
    "status": "Stable",
    "type": "timepicker"
  }
```

**Templating **

The `templating` field contains an array of template variables with their saved values along with some other metadata.

```
"templating": {
    "enable": true,
    "list": [
       {
        "allFormat": "wildcard",
        "current":  {
          "tags": [],
          "text": "prod",
          "value": "prod"
        },
        "datasource": null,
        "includeAll": true,
        "name": "env",
        "options": [
           {
            "selected": false,
            "text": "All",
            "value": "*"
          },
           {
            "selected": false,
            "text": "stage",
            "value": "stage"
          },
           {
            "selected": false,
            "text": "test",
            "value": "test"
          }
        ],
        "query": "tag_values(cpu.utilization.average,env)",
        "refresh": false,
        "type": "query"
      },
       {
        "allFormat": "wildcard",
        "current":  {
          "text": "apache",
          "value": "apache"
        },
        "datasource": null,
        "includeAll": false,
        "multi": false,
        "multiFormat": "glob",
        "name": "app",
        "options": [
           {
            "selected": true,
            "text": "tomcat",
            "value": "tomcat"
          },
           {
            "selected": false,
            "text": "cassandra",
            "value": "cassandra"
          }
        ],
        "query": "tag_values(cpu.utilization.average,app)",
        "refresh": false,
        "regex": "",
        "type": "query"
      }
    ]
  }
```

The following table describes the usage of the templating fields.


| Name | Usage | 
| --- | --- | 
|  `enable`  |  whether templating is enabled or not  | 
|  `list`  |  an array of objects each representing one template variable  | 
|  `allFormat`  |  format to use while fetching all values from data source, including `wildcard`, `glob`, `regex`, `pipe`.  | 
|  `current`  |  shows current selected variable text/value on the dashboard  | 
|  `datasource`  |  shows data source for the variables  | 
|  `includeAll`  |  whether all value option is available or not  | 
|  `multi`  |  whether multiple values can be selected or not from variable value list  | 
|  `multiFormat`  |  format to use while fetching timeseries from data source  | 
|  `name`  |  name of variable  | 
|  `options`  |  array of variable text/value pairs available for selection on dashboard  | 
|  `query`  |  data source query used to fetch values for a variable  | 
|  `refresh`  |  configures when to refresh a variable  | 
|  `regex`  |  extracts part of a series name or metric node segment  | 
|  `type`  |  type of variable, `custom`, `query`, or `interval`  |