---
title: "Add panels and queries | Grafana Labs"
description: "Add stat and time series panels with data source references and query targets to the dashboard."
---

> For a curated documentation index, see [llms.txt](/llms.txt). For the complete documentation index, see [llms-full.txt](/llms-full.txt).

# Add panels and queries

A dashboard without panels is an empty page. Each panel has a visualization type (stat, time series, table) and one or more data queries that fetch the data to display.

You add panels using `WithPanel`, passing in a type-specific panel builder. Each panel needs a data source reference and at least one query target.

To add panels to your dashboard, complete the following steps:

## Go

1. Update your `main.go` to import the panel and query packages, define a data source reference, and add panels to the builder:
   
   Go ![Copy code to clipboard](/media/images/icons/icon-copy-small-2.svg) Copy
   
   ```go
   package main
   
   import (
     "encoding/json"
     "log"
     "os"
   
     "github.com/grafana/grafana-foundation-sdk/go/cog"
     "github.com/grafana/grafana-foundation-sdk/go/common"
     "github.com/grafana/grafana-foundation-sdk/go/dashboard"
     "github.com/grafana/grafana-foundation-sdk/go/stat"
     "github.com/grafana/grafana-foundation-sdk/go/testdata"
     "github.com/grafana/grafana-foundation-sdk/go/timeseries"
   )
   
   func main() {
     testdataRef := dashboard.DataSourceRef{
       Type: cog.ToPtr("grafana-testdata-datasource"),
       Uid:  cog.ToPtr("testdata"),
     }
   
     builder := dashboard.NewDashboardBuilder("My SDK Dashboard").
       Uid("my-sdk-dashboard").
       Tags([]string{"generated", "foundation-sdk"}).
       Refresh("5m").
       Time("now-1h", "now").
       Timezone(common.TimeZoneBrowser).
       WithPanel(
         stat.NewPanelBuilder().
           Title("Version").
           Datasource(testdataRef).
           ReduceOptions(common.NewReduceDataOptionsBuilder().
             Calcs([]string{"lastNotNull"}).
             Fields("/.*/")).
           WithTarget(
             testdata.NewDataqueryBuilder().
               ScenarioId("csv_content").
               CsvContent("version\nv1.0.0"),
           ),
       ).
       WithPanel(
         timeseries.NewPanelBuilder().
           Title("Request Rate").
           Datasource(testdataRef).
           WithTarget(
             testdata.NewDataqueryBuilder().
               ScenarioId("random_walk"),
           ),
       )
   }
   ```

## TypeScript

1. Update your `index.ts` with panel and query imports, a data source reference, and panels:
   
   typescript ![Copy code to clipboard](/media/images/icons/icon-copy-small-2.svg) Copy
   
   ```typescript
   import { DashboardBuilder, DataSourceRef } from '@grafana/grafana-foundation-sdk/dashboard';
   import { PanelBuilder as StatPanelBuilder } from '@grafana/grafana-foundation-sdk/stat';
   import { PanelBuilder as TimeseriesPanelBuilder } from '@grafana/grafana-foundation-sdk/timeseries';
   import { DataqueryBuilder } from '@grafana/grafana-foundation-sdk/testdata';
   import { ReduceDataOptionsBuilder } from '@grafana/grafana-foundation-sdk/common';
   
   const testdataRef: DataSourceRef = {
     type: 'grafana-testdata-datasource',
     uid: 'testdata',
   };
   
   const builder = new DashboardBuilder('My SDK Dashboard')
     .uid('my-sdk-dashboard')
     .tags(['generated', 'foundation-sdk'])
     .refresh('5m')
     .time({ from: 'now-1h', to: 'now' })
     .timezone('browser')
     .withPanel(
       new StatPanelBuilder()
         .title('Version')
         .datasource(testdataRef)
         .reduceOptions(
           new ReduceDataOptionsBuilder().calcs(['lastNotNull']).fields('/.*/')
         )
         .withTarget(
           new DataqueryBuilder().scenarioId('csv_content').csvContent('version\nv1.0.0')
         )
     )
     .withPanel(
       new TimeseriesPanelBuilder()
         .title('Request Rate')
         .datasource(testdataRef)
         .withTarget(
           new DataqueryBuilder().scenarioId('random_walk')
         )
     );
   ```

## Key concepts

Expand table

| Concept              | Role                                                             |
|----------------------|------------------------------------------------------------------|
| **DataSourceRef**    | Points to the data source by type and UID                        |
| **PanelBuilder**     | Creates a specific visualization (stat, timeseries, table, etc.) |
| **DataqueryBuilder** | Defines what data a panel fetches                                |
| **WithTarget**       | Attaches a query to a panel                                      |
| **ReduceOptions**    | Controls how time series data is reduced to a single value       |

The `testdata` data source is built into every Grafana instance, making it ideal for testing without external dependencies.

In the next milestone, you build the dashboard object and export it as JSON.