IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

docs: add empty dashboard & Add dropdown screenshots (#67588)

Browse Source 
* added empty dashboard screenshots

* added Add dropdown screenshots

* removed screenshot from build first dashboard

* added Add dropdown guidance in panel editor page; updated headings

* added intro text in panel editor
This commit is contained in:
Isabel 2023-05-08 14:24:23 -04:00 committed by GitHub
parent d0adcd7d5b
commit da21473527
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/sources/dashboards/build-dashboards/create-dashboard/index.md
View File

@ -26,6 +26,9 @@ Dashboards and panels allow you to show your data in visual form. Each panel nee
1. Click **Dashboards** in the left-side menu. 1. Click **Dashboards** in the left-side menu.
1. Click **New** and select **New Dashboard**. 1. Click **New** and select **New Dashboard**.
1. On the empty dashboard, click **+ Add visualization**. 1. On the empty dashboard, click **+ Add visualization**.
![Empty dashboard state](/media/docs/grafana/dashboards/empty-dashboard-9.5.png)
1. In the first line of the **Query** tab, click the dropdown list and select a data source. 1. In the first line of the **Query** tab, click the dropdown list and select a data source.
1. Write or construct a query in the query language of your data source. 1. Write or construct a query in the query language of your data source.
@ -59,6 +62,9 @@ Dashboards and panels allow you to show your data in visual form. Each panel nee
1. Enter a name for your dashboard and select a folder, if applicable. 1. Enter a name for your dashboard and select a folder, if applicable.
1. Click **Save**. 1. Click **Save**.
1. To add more panels to the dashboard, click **Add** in the dashboard header and select **Visualization** in the dropdown.
![Add dropdown](/media/docs/grafana/dashboards/screenshot-add-dropdown-9.5.png)
## Configure repeating rows ## Configure repeating rows

3
docs/sources/getting-started/build-first-dashboard.md
View File

@ -44,6 +44,9 @@ To create your first dashboard using the built-in `Grafana` data source:
1. Click **Dashboards** in the left-side menu. 1. Click **Dashboards** in the left-side menu.
1. On the Dashboards page, click **New** and select **New Dashboard** from the dropdown menu. 1. On the Dashboards page, click **New** and select **New Dashboard** from the dropdown menu.
1. On the dashboard, click **+ Add visualization**. 1. On the dashboard, click **+ Add visualization**.
![Empty dashboard state](/media/docs/grafana/dashboards/empty-dashboard-9.5.png)
1. In the New dashboard/Edit panel view, go to the **Query** tab. 1. In the New dashboard/Edit panel view, go to the **Query** tab.
1. Configure your [query]({{< relref "../panels-visualizations/query-transform-data/#add-a-query" >}}) by selecting `-- Grafana --` from the data source selector. 1. Configure your [query]({{< relref "../panels-visualizations/query-transform-data/#add-a-query" >}}) by selecting `-- Grafana --` from the data source selector.

10
docs/sources/panels-visualizations/panel-editor-overview/index.md
View File

@ -24,8 +24,16 @@ weight: 1
# Panel editor overview # Panel editor overview
In the panel editor, you can update all the elements of a visualization including the data source, queries, time range, and visualization display options.
![Panel editor](/media/docs/grafana/panels-visualizations/screenshot-panel-editor-view.png) ![Panel editor](/media/docs/grafana/panels-visualizations/screenshot-panel-editor-view.png)
To add a panel in a new dashboard click **+ Add visualization** in the middle of the dashboard. To add a panel to an existing dashboard, click **Add** in the dashboard header and select **Visualization** in the dropdown:
![Add dropdown](/media/docs/grafana/dashboards/screenshot-add-dropdown-9.5.png)
## Panel editor
This section describes the areas of the Grafana panel editor. This section describes the areas of the Grafana panel editor.
1. Panel header: The header section lists the dashboard in which the panel appears and the following controls: 1. Panel header: The header section lists the dashboard in which the panel appears and the following controls:
@ -49,7 +57,7 @@ This section describes the areas of the Grafana panel editor.
1. Panel display options: The display options section contains tabs where you configure almost every aspect of your data visualization. 1. Panel display options: The display options section contains tabs where you configure almost every aspect of your data visualization.
## Open the panel inspect drawer ## Panel inspect drawer
The inspect drawer helps you understand and troubleshoot your panels. You can view the raw data for any panel, export that data to a comma-separated values (CSV) file, view query requests, and export panel and data JSON. The inspect drawer helps you understand and troubleshoot your panels. You can view the raw data for any panel, export that data to a comma-separated values (CSV) file, view query requests, and export panel and data JSON.