chore: [release-3.0.x] docs: add play link, correct errors to visuali…

…zation instructions (#12639)

Co-authored-by: David Allen <[email protected]>

docs/sources/visualize/grafana.md

@@ -13,17 +13,16 @@ keywords:
 ---
 # Visualize log data
 
-[Grafana 6.0](/grafana/download/6.0.0) and more recent
-versions have built-in support for Grafana Loki.
-Use [Grafana 6.3](/grafana/download/6.3.0) or a more
-recent version to take advantage of [LogQL]({{< relref "../query/_index.md" >}}) functionality.
+Modern Grafana versions after 6.3 have built-in support for Grafana Loki and [LogQL](https://grafana.com/docs/loki/<LOKI_VERSION>/query/).
+
+## Using Explore
 
 1. Log into your Grafana instance. If this is your first time running
    Grafana, the username and password are both defaulted to `admin`.
-1. In Grafana, go to `Configuration` > `Data Sources` via the cog icon on the
+1. In Grafana, go to `Connections` > `Data Sources` via the cog icon on the
    left sidebar.
-1. Click the big <kbd>+ Add data source</kbd> button.
-1. Choose Loki from the list.
+1. Click the big <kbd>+ Add a new data source</kbd> button.
+1. Search for, or choose Loki from the list.
 1. The http URL field should be the address of your Loki server. For example,
    when running locally or with Docker using port mapping, the address is
    likely `http://localhost:3100`. When running with docker-compose or
@@ -36,10 +35,21 @@ recent version to take advantage of [LogQL]({{< relref "../query/_index.md" >}})
    <kbd>Log labels</kbd> button.
 1. Learn more about querying by reading about Loki's query language [LogQL]({{< relref "../query/_index.md" >}}).
 
+If you would like to see an example of this live, you can try [Grafana Play's Explore feature](https://play.grafana.org/explore?schemaVersion=1&panes=%7B%22v1d%22:%7B%22datasource%22:%22ac4000ca-1959-45f5-aa45-2bd0898f7026%22,%22queries%22:%5B%7B%22refId%22:%22A%22,%22expr%22:%22%7Bagent%3D%5C%22promtail%5C%22%7D%20%7C%3D%20%60%60%22,%22queryType%22:%22range%22,%22datasource%22:%7B%22type%22:%22loki%22,%22uid%22:%22ac4000ca-1959-45f5-aa45-2bd0898f7026%22%7D,%22editorMode%22:%22builder%22%7D%5D,%22range%22:%7B%22from%22:%22now-1h%22,%22to%22:%22now%22%7D%7D%7D&orgId=1)
+
 Read more about Grafana's Explore feature in the
 [Grafana documentation](http://docs.grafana.org/features/explore) and on how to
 search and filter for logs with Loki.
 
+## Using Grafana Dashboards
+
+Because Loki can be used as a built-in data source above, we can use LogQL queries based on that datasource
+to build complex visualizations that persist on Grafana dashboards.
+
+{{< docs/play title="Loki Example Grafana Dashboard" url="https://play.grafana.org/d/T512JVH7z/" >}}
+
+Read more about how to build Grafana Dashboards in [build your first dashbboard](https://grafana.com/docs/grafana/latest/getting-started/build-first-dashboard/)
+
 To configure Loki as a data source via provisioning, see [Configuring Grafana via
 Provisioning](http://docs.grafana.org/features/datasources/loki/#configure-the-datasource-with-provisioning).
 Set the URL in the provisioning.