<a id="flink-sql-view-time-series"></a>

# View Time Series Data with Confluent Cloud for Apache Flink

Confluent Cloud for Apache Flink® enables visualizing time-series data in real time. The output
of certain SQL statements renders as a time-series chart. Whenever a
statement’s output has at least one time column and at least one numeric
column, the workspace charts the output automatically in a time-series
graph when you toggle to chart mode.

You can further customize charts interactively: choose a different x-axis
column, add multiple series, change the chart’s time granularity, or
filter the overall time range.

## Prerequisites

You need the following prerequisites to use Flink in Confluent Cloud Console.

- Access to Confluent Cloud.

<a id="flink-sql-view-time-series-open-workspace"></a>

## Step 1: Open a workspace

1. Log in to Confluent Cloud Console at
   [https://confluent.cloud/login](https://confluent.cloud/login).
2. In the navigation menu, click **SQL workspaces** to open the workspaces
   page and select or create a workspace.
3. Use the **Catalog** and **Database** dropdown controls to
   select the **examples** catalog and the **marketplace** database.

<a id="flink-sql-view-time-series-generate"></a>

## Step 2: Generate time-series data

Run the following statement to generate three time-series signals.

```mysql
SELECT $rowtime AS row_timestamp,
   RAND() * 0.10 * SIN(0.10 * UNIX_TIMESTAMP() + 0) AS series1,
   RAND() * 0.10 * SIN(0.10 * UNIX_TIMESTAMP() + 1.1e3) AS series2,
   RAND() * 0.03 * SIN(0.10 * UNIX_TIMESTAMP() + 1.2e3) AS series3
FROM orders;
```

<a id="flink-sql-view-time-series-data"></a>

## Step 3: View time-series data

1. Click the time-series toggle (![time-series-toggle](flink/images/flink-workspace-time-series-toggle.png)) to open the time-series
   visualizer.

   Your output should resemble:
   ![image](flink/images/flink-workspace-time-series.png)

   The upper pane shows the **series1** signal.

   The lower pane enables scrolling through the data as it streams through
   the visualizer.
2. On the right side of the lower pane, click ![nav-window-size](flink/images/flink-workspace-nav-window-size.png) and drag it to
   the left. On the left side of the lower pane, click ![nav-window-size](flink/images/flink-workspace-nav-window-size.png) and
   drag it to the right.

   These gestures define the width of the view window that displays in the upper
   pane.
3. Click ![nav-window-move](flink/images/flink-workspace-nav-window-move.png) and drag it to the right.

   The view in the upper pane adjusts to display the data within the window.

   As data continues to stream, the window in the lower pane moves to the
   left, while the display in the upper pane remains centered on the data
   selected in the window.
4. Double-click ![nav-window-move](flink/images/flink-workspace-nav-window-move.png) to reset the view.
5. Click **Add Column**, and in the context menu, select **series2** and
   **series3** to display the other signals.
6. Click ![time-series-download](flink/images/flink-workspace-time-series-download.png) to download the current visualization as a
   PNG file.
7. Click the time-series toggle (![time-series-toggle](flink/images/flink-workspace-time-series-toggle.png)) again to close the
   visualizer.

## Related content

- [Scan and Summarize Tables](scan-and-summarize-tables.md#flink-sql-scan-and-summarize)
- [Compare Current and Previous Values in a Data Stream](compare-current-and-previous-values.md#flink-sql-compare-current-and-previous-values)
- [Convert the Serialization Format of a Topic](convert-serialization-format.md#flink-sql-convert-format)

#### NOTE
This website includes content developed at the [Apache Software Foundation](https://www.apache.org/)
under the terms of the [Apache License v2](https://www.apache.org/licenses/LICENSE-2.0.html).
