Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added docs/images/about-page-license.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/add-new-license-key.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/license-management.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/license-server.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions docs/user-guide/alerts/alert-history.md
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,6 @@ This process applies only to users who have access to the `_meta` organization.

## Why you might see a skipped status
A **skipped** status appears when a scheduled alert runs later than its expected window. <br>
For example, an alert configured with a 5-minute period and 5-minute frequency is scheduled to run at 12:00 PM. It should normally evaluate data from 11:55 to 12:00.
If the alert manager experiences a delay and runs the job at 12:05 PM, it evaluates the current aligned window (12:00 to 12:05) instead of the earlier one. The earlier window (11:55 to 12:00) is marked as skipped to indicate that evaluation for that range did not occur because of delay in job pickup or data availability.
For example, an alert configured with a 5-minute period and 5-minute frequency is scheduled to run at 12:00 PM. <br>It should normally evaluate data from 11:55 to 12:00.
If the alert manager experiences a delay and runs the job at 12:05 PM, it evaluates the current aligned window (12:00 to 12:05) instead of the earlier one.<br> The earlier window (11:55 to 12:00) is marked as skipped to indicate that evaluation for that range did not occur because of delay in job pickup or data availability.

3 changes: 2 additions & 1 deletion docs/user-guide/dashboards/custom-charts/.pages
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,5 @@ nav:
- Custom Charts with Flat Data: custom-charts-flat-data.md
- Custom Charts with Nested Data: custom-charts-nested-data.md
- Event Handlers and Custom Functions: custom-charts-event-handlers-and-custom-functions.md
- Custom Charts for Metrics Using PromQL: custom-charts-for-metrics-using-promql.md
- Custom Charts for Metrics Using PromQL: custom-charts-for-metrics-using-promql.md
- Custom Charts for Metrics Using Multiple PromQL Queries: custom-charts-for-metrics-using-multiple-promql-queries.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ description: >-
---
This guide shows how to make your [custom charts](what-are-custom-charts.md) interactive using event handlers and reusable custom functions (customFn).

## What Are Event Handlers

## What are event handlers?
Event handlers let you define what happens when a user interacts with the chart, such as clicking or hovering over a data point. Use event handlers in the custom chart logic to display messages, log actions, or apply filters based on user input.

Common event handlers:
Expand All @@ -21,7 +20,7 @@ Before you begin, note the following:
- Use the `o2_events` block to specify the event type, such as `click`.
- Associate the event with a function that will run when the event occurs.

## How to Create Event Handlers
## How to create event handlers

### Step 1: Create a basic chart with labels and values

Expand Down Expand Up @@ -92,7 +91,7 @@ o2_events: {
}
```

## What Are Custom Functions
## What are custom functions?

Custom functions (customFn) are special sections inside the chart’s `option` object where you can define reusable functions.

Expand All @@ -102,7 +101,7 @@ These functions can be used:
- To apply logic such as filters
- To keep your event handlers simple

## How to Create Custom Functions
## How to create custom functions

**Example**: You have a chart showing bars for A, B, and C. When the user clicks on a bar, you want to format the output like:
```
Expand Down
22 changes: 11 additions & 11 deletions docs/user-guide/dashboards/custom-charts/custom-charts-flat-data.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ description: >-
---
The following step-by-step instructions can help you build a [custom chart that expects flat data](what-are-custom-charts.md#how-to-check-the-data-structure-a-chart-expects).

## Use Case
## Use case

Build a custom **heatmap chart** to understand which organization and search type combinations generate the most query load.


## Before You Begin
## Before you begin

To build a custom chart, you need to bridge two things:

Expand All @@ -19,7 +19,7 @@ To build a custom chart, you need to bridge two things:

> **Note**: Understanding both is important because it helps you write the right SQL query, [prepare](what-are-custom-charts.md#build-the-chart) the data through grouping or aggregation, [reshape](what-are-custom-charts.md#build-the-chart) the results to match the chart’s structure, and map them correctly in the JavaScript code that renders the chart.

## Step 1: Understand the Ingested Dataset
## Step 1: Understand the ingested dataset

In OpenObserve, the data ingested into a stream is typically in a flat structure.
**Example:** In the following dataset, each row represents a single event or query log with its own timestamp, organization ID, search type, and query duration.
Expand All @@ -39,7 +39,7 @@ In OpenObserve, the data ingested into a stream is typically in a flat structure

**Note**: Use the **Logs** page to view the data ingested to the stream.

## Step 2: Identify the Expected Data Structure
## Step 2: Identify the expected data structure

Before moving ahead, [identify what structure the chart expects](what-are-custom-charts.md#how-to-check-the-data-structure-a-chart-expects). The heatmap chart expects flat data.

Expand All @@ -51,7 +51,7 @@ In this example, each row in [data[0]](what-are-custom-charts.md#the-data-object

**Note**: For charts that expect flat data, [reshaping is not needed](what-are-custom-charts.md#build-the-chart). SQL alone is enough to prepare the data in required format.

## Step 3: Prepare the Data (via SQL)
## Step 3: Prepare the data (via SQL)

In the [Add Panel](what-are-custom-charts.md#how-to-access-custom-charts) page, under **Fields**, select the desired stream type and stream name.
![custom-chart-flat-data-add-panel](../../../images/custom-chart-flat-data-add-panel.png)
Expand Down Expand Up @@ -85,7 +85,7 @@ Select a time range to fetch the relevant dataset for your chart.

![custom-chart-flat-data-time-range-selection](../../../images/custom-chart-flat-data-time-range.png)

**Expected Query Result**
**Expected query result**

```linenums="1"
data=[[
Expand All @@ -99,7 +99,7 @@ data=[[

**Note**: OpenObserve stores the result of the query in [the `data` object](what-are-custom-charts.md#the-data-object) as an **array of an array**.

## Step 4: Inspect the Queried Dataset
## Step 4: Inspect the queried dataset

Inspect the queried dataset:

Expand All @@ -108,7 +108,7 @@ console.log(data);
console.log(data[0]);
```

## Step 5: JavaScript Code to Render the Heatmap
## Step 5: JavaScript code to render the heatmap

In the JavaScript editor, you must construct an [object named `option`](what-are-custom-charts.md#the-option-object).
This `option` object defines how the chart looks and behaves. To feed data into the chart, use the query result stored in `data[0]`
Expand Down Expand Up @@ -165,13 +165,13 @@ option = {
};
```

## Step 6: View Result
## Step 6: View result

Click **Apply** to generate the chart.

![custom-chart-flat-data-result](../../../images/custom-chart-flat-data-result.png)

### Understand the Chart
### Understand the chart

In the chart,

Expand Down Expand Up @@ -208,7 +208,7 @@ Use the following guidance to identify and fix common issues when working with c
- Open your browser's developer console to locate the error.
- Use `console.log()` to test your script step by step.

**4. Chart Not Rendering:**
**4. Chart not rendering:**
**Cause**: The query returned data, but the chart did not render.
**Fix**:

Expand Down
Loading