Touring the graph panel

Here is a typical graph panel in edit mode:

The panel's UI can be broken down into roughly three main functional areas:

1. Panel display: Preview display, and time picker
2. Display settings: Panel visualization type, styles, and links
3. Data configuration: Data query, data transformation, and alerting

Throughout this chapter, we will delve into each of these features. First, we will look at the Query tab in the context of how to use it to produce graphed data. Next, we will explore how the various display settings shape the look of the graph and how to set typical panel display features such as a title. Finally, we will see how the Alert tab can establish the monitoring rules for thresholds that, when exceeded, can trigger alerts. Of course, all of this is dependent on what we'll create next: a simple data source.

Creating a simple data source

A Grafana plugin that supplies panels with data is called a data source. Obviously, if you want to set up a graph panel, you will need such a source for data, but what happens when you create a graph panel without specifying a data source? Fortunately, Grafana has thought of this scenario, and even if you don't have even a single data source set up, the panel will still have something to graph: a built-in fake data source.

If you've already created a panel, you may have seen it graph a mysterious dataset that seems to come from nowhere. The data is coming from a built-in data source, simply called Grafana, which generates pseudodata in a pattern called a random walk. It's useful for producing a dataset that emulates some real-world metrics where each data point is a small, random increment from the previous one. It generates a smooth curve modulated with a bit of noise, and is the kind of pattern that exists in many physically based measurements.

Although it is useful, this dataset has some limitations; for instance, we can't use it to create multiple independent datasets. As I described in the previous chapter, let's start from the Home dashboard to set up a similar data source that can produce a richer variety of fake data for us to work with:

1. Return to the Home dashboard if you're not already there.
2. SelectConfiguration | Data Sources.
3. Click + Data Source.
4. Scroll down to Others and select TestData DB.
5. Make sure Default is set to On.
6. Click Save & Test to confirm the data source is working.

If successful, you should get a green section that indicates the data source is working. The Settings tab should look like this:

Click on Save &Test, and then Back to get back to the Configuration page. You've successfully created your first data source!

Creating a graph panel

The first thing we need to do is create a graph panel. By now, you've probably already created a few panels, so this should be relatively easy. Let's start with a fresh dashboard so that we can keep things separate from the work we did previously:

1. Go back to the Home dashboard.
2. Select Create | Dashboard.
3. On the panel placeholder, click +new panel.
4. By default, you will have created a graph panel.
5. Click theSave Dashboardicon at the top-right to save the dashboard for future reference. Get into the practice of regularly saving your dashboards.
6. Click Apply to save your panel changes.
7. To go back and edit a panel, click the Panel Title dropdown and select Edit.

After completing this little exercise, things should look something like this; not all that different from the first graph we created in Chapter 2, A tour of the Grafana Interface:

Now that you've designated the new TestData DB as the default data source, any newly created panel will use the default as its data source. Don't worry – you can always set it to use another data source with a quick menu selection.