# Dashboard JSON model
****
This documentation topic is designed for Grafana workspaces that support **Grafana version 8.x**.
For Grafana workspaces that support Grafana version 12.x, see [Working in Grafana version 12](using-grafana-v12.md).
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).
A dashboard in Amazon Managed 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. Open a dashboard.
1. On the top navigation bar, choose on **Manage dashboard**.
1. Select **View JSON** from the dropdown menu.
## JSON fields
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 you save a dashboard, an integer value is assigned to the `id` field.
```
{
"id": null,
"uid": "cLV5GDCkz",
"title": "New dashboard",
"tags": [],
"style": "dark",
"timezone": "browser",
"editable": true,
"hideControls": false,
"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 table provides usage details for each field in the dashboard JSON.
| Name | Usage |
| --- | --- |
| id | The unique numeric identifier for the dashboard (generated by the database). |
| uid | The unique dashboard identifier that can be generated by anyone. The uid is a string of 8-40 characters. |
| title | The current title of the dashboard. |
| tags | The tags that are associated with the dashboard. In the JSON, the tags are an array of strings. |
| style | The theme of the dashboard (for example, dark or light). |
| timezone | The timezone of dashboard (utc or browser). |
| editable | Whether a dashboard can be edited. |
| graphTooltip | The tooltip style. [See the AWS documentation website for more details](http://docs.aws.amazon.com/grafana/latest/userguide/dashboard-json-model.html) |
| time | The time range for the dashboard (for example, last 6 hours, last 7 days). |
| timepicker | The timepicker metadata. For more information, see [Time picker](#dashboard-json-timepicker). |
| templating | The templating metadata. For more information, see [Templates and variables](templates-and-variables.md). |
| annotations | The annotations metadata. For more information, see [Annotations](dashboard-annotations.md). |
| refresh | The auto-refresh interval. |
| schemaVersion | The version of the JSON schema (integer), which is incremented each time an Amazon Managed Grafana update changes the schema. |
| version | The version of the dashboard (integer), which is incremented each time the dashboard is updated. |
| panels | The panels array. For more information, see [Panels](#dashboard-JSON-panels). |
## Panels
Panels are the building blocks of a dashboard. It consists of data source queries, type of graphs, aliases, and other data. 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 example shows the 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-24. The width of the dashboard is divided into 24 columns.
+ `h` – In grid height units. Each grid height unit represents 30 pixels.
+ `x` – The x position. The x position uses the in same column unit as `w`.
+ `y` – The y position. The y position uses the same grid height unit as `h`.
The grid has a negative gravity that moves panels up if there is empty space above a panel.
### Time picker
The following example shows the `timepicker` options.
```
"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"
}
```
The following table provides usage details for `timepicker`.
| Name | Usage |
| --- | --- |
| collapse | Whether timepicker is collapsed |
| enable | Whether timepicker is activated |
| notice | TODO |
| now | TODO |
| refresh\_intervals | TODO |
| status | TODO |
| type | TODO |
### Templating
The `templating` field contains an array of template variables with their saved values and other metadata. The following example shows `templating` 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 provides usage details for templating section.
| Name | Usage |
| --- | --- |
| enable | Whether templating is activated. |
| list | An array of objects, each representing one template variable |
| allFormat | The format to use while fetching all values from the data source (for example, wildcard, glob, regex, and pipe). |
| current | Shows current selected variable text or value on the dashboard |
| data source | Shows the data source for the variables |
| includeAll | Whether the all value option is available |
| multi | Whether multiple values can be selected from variable value list |
| multiFormat | The format to use while fetching timeseries from the data source |
| name | The name of a variable |
| options | The array of variable text/value pairs available for selection on dashboard |
| query | The data source query that is used to fetch values for a variable |
| refresh | TODO |
| regex | TODO |
| type | The type of variable (custom, query, or interval) |