> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getstrada.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom Charts

> Create custom analytics charts using AI or SQL queries

## Creating Custom Charts

Custom charts let you visualize anything you want. The easiest way to create one is with **[AI Query](#using-ai-query)**. Just describe the chart you want in plain English.

### The Easy Way: AI Query (Recommended)

<Frame>
  <img src="https://mintcdn.com/strada/D41T24VUQKcQvEsM/logs/analytics-add-chart-custom.png?fit=max&auto=format&n=D41T24VUQKcQvEsM&q=85&s=1dc404505a6a2e69ebde8bedb9a881fd" alt="Add Chart Custom" width="1024" height="811" data-path="logs/analytics-add-chart-custom.png" />
</Frame>

1. Click **Add Chart** > **Custom** to open the chart builder.
2. Click the **AI Query** button in the bottom-right corner of the editor.
3. A chat sidebar opens. Describe the chart you want in plain English. For example:
   * *"Show me how many calls each agent made this month as a bar chart"*
   * *"What's my daily connected rate as a line chart?"*
   * *"Create a table showing agent name, total calls, and conversion rate"*
   * *"Build a combo chart with call volume as bars and connected rate as a line"*
4. The AI generates everything: the query, chart type, axes, title, and description.
5. Review the result in the live preview. If you want changes, keep chatting:
   * *"Make it weekly instead of daily"*
   * *"Add a conversion rate line"*
   * *"Change this to a table"*
6. When you're happy, click **Save Chart**.

<Tip>
  AI Query is the fastest way to build charts. Even if you know SQL, the AI can save you significant time by
  generating the query and configuring the chart in one step.
</Tip>

### The Manual Way: Writing SQL

If you want full control, you can also write SQL queries directly in the editor. Your queries run against two tables:

* `strada_calls_history`: contains all your call data
* `strada_chats_history`: contains all your chat data

Click the **Schema** button in the bottom-right corner of the editor to see every available column and its type. You can click any column name to copy it, or click **Copy Schema** to copy the full table definition.

The editor includes autocomplete for table names, column names, and SQL keywords. Your query runs automatically as you type, so you'll see the chart update live.

***

## Understanding the Chart Builder

The chart builder has two main areas: the **SQL editor** at the top, and a **split panel** at the bottom.

<Frame>
  <img src="https://mintcdn.com/strada/D41T24VUQKcQvEsM/logs/analytics-chart-builder.png?fit=max&auto=format&n=D41T24VUQKcQvEsM&q=85&s=be32ffdae9e06fc62762ae5590bb311b" alt="Chart Builder" width="1024" height="621" data-path="logs/analytics-chart-builder.png" />
</Frame>

### Preview Panel

The right side shows a preview with three tabs:

* **Chart**: a live visual preview of your chart. This is what will appear on your dashboard.

<Frame>
  <img src="https://mintcdn.com/strada/D41T24VUQKcQvEsM/logs/analytics-chart-preview.png?fit=max&auto=format&n=D41T24VUQKcQvEsM&q=85&s=de7aff02727953eda79f2276fcef7082" alt="Chart Preview" width="896" height="448" data-path="logs/analytics-chart-preview.png" />
</Frame>

* **Query Result**: the data your SQL query returned, shown as JSON. Useful for verifying your query is producing the right numbers.

<Frame>
  <img src="https://mintcdn.com/strada/3QGRfwMGDFsZac6I/logs/analytics-query-result.png?fit=max&auto=format&n=3QGRfwMGDFsZac6I&q=85&s=d9d15729d8f75b6b48487f7c5ca9bc8f" alt="Query Result Tab" width="545" height="447" data-path="logs/analytics-query-result.png" />
</Frame>

* **Raw Data**: all the underlying call and chat data loaded in your browser, shown as JSON. Useful for exploring what fields and values are available before you write a query.

### Configuration Panel

The left side is the **Chart Configuration** panel:

1. Pick a **Chart Type** from the dropdown (see [Chart Types](#chart-types) below).
2. Map your query's output columns to the chart's axes and series. The dropdowns auto-populate based on whatever columns your query returns.

<Frame>
  <img src="https://mintcdn.com/strada/3QGRfwMGDFsZac6I/logs/analytics-config-panel.png?fit=max&auto=format&n=3QGRfwMGDFsZac6I&q=85&s=6f28ff3efb13ac7f5a857473f7b4a45f" alt="Configuration Panel" style={{ width: '320px', height: 'auto' }} width="632" height="694" data-path="logs/analytics-config-panel.png" />
</Frame>

### Title and Description

Click the editable title at the top (defaults to "New Chart") to give your chart a name. Click the description below it to add a subtitle.

### Saving Your Chart

Click **Save Chart** in the top-right to add the chart to your dashboard. Once saved, you can [rearrange and resize it](/logs/analytics-managing#dashboard-layout) on your dashboard.

***

## Chart Types

When creating or editing a chart, select the type from the **Chart Type** dropdown in the configuration panel. Here's what each type does and when to use it.

### Bar Chart

Compare values across categories or time periods. Configure an **X Axis** and a **Y Axis**, and optionally customize the bar color.

Try asking AI: *"Show calls per agent as a bar chart"*

<Frame>
  <img src="https://mintcdn.com/strada/D41T24VUQKcQvEsM/logs/analytics-chart-bar.png?fit=max&auto=format&n=D41T24VUQKcQvEsM&q=85&s=b1ffb1f80e46c3e66b4a3b410fb7290e" alt="Bar Chart" width="1024" height="750" data-path="logs/analytics-chart-bar.png" />
</Frame>

### Stacked Bar Chart

Show the composition within each category. Configure an **X Axis** and add multiple **Bars** using the "Add Bar" button, each representing a segment of the stack.

Try asking AI: *"Show daily calls split by connected vs not connected as a stacked bar"*

<Frame>
  <img src="https://mintcdn.com/strada/3QGRfwMGDFsZac6I/logs/analytics-chart-stacked-bar.png?fit=max&auto=format&n=3QGRfwMGDFsZac6I&q=85&s=2a7e250b04b801013b6267608b082232" alt="Stacked Bar Chart" width="1024" height="742" data-path="logs/analytics-chart-stacked-bar.png" />
</Frame>

### Line Chart

Show trends over time. Configure an **X Axis** and add one or more **Lines**. Check "Right Y-axis" on any line to plot it on a secondary axis when metrics have different scales.

Try asking AI: *"Show my daily connected rate as a line chart over time"*

<Frame>
  <img src="https://mintcdn.com/strada/D41T24VUQKcQvEsM/logs/analytics-chart-line.png?fit=max&auto=format&n=D41T24VUQKcQvEsM&q=85&s=d08795bd55a92f54ebd7cf1c2f6967ad" alt="Line Chart" width="1024" height="749" data-path="logs/analytics-chart-line.png" />
</Frame>

### Combo Chart

Overlay bars and lines on the same chart. Perfect for showing a volume metric alongside a rate. Configure an **X Axis**, add **Bars** and **Lines**, and assign each to the left or right Y-axis independently.

Try asking AI: *"Show call volume as bars and conversion rate as a line on the same chart"*

<Frame>
  <img src="https://mintcdn.com/strada/D41T24VUQKcQvEsM/logs/analytics-chart-combo.png?fit=max&auto=format&n=D41T24VUQKcQvEsM&q=85&s=e78540a731b21de756cdf9863f0213cc" alt="Combo Chart" width="1024" height="468" data-path="logs/analytics-chart-combo.png" />
</Frame>

### Table

Display your data as rows and columns. Columns are auto-detected from your query. For numeric columns, toggle **Mini Bar** to show a visual bar representing the relative value. Toggle **Exclude** to hide a column.

Try asking AI: *"Create a table of agents with total calls, connected rate, and conversion rate"*

<Frame>
  <img src="https://mintcdn.com/strada/3QGRfwMGDFsZac6I/logs/analytics-chart-table.png?fit=max&auto=format&n=3QGRfwMGDFsZac6I&q=85&s=3170dc626ea84d57678f438ce9ba3a0a" alt="Table Chart" width="1024" height="490" data-path="logs/analytics-chart-table.png" />
</Frame>

### Number (Single Value)

Display a single large metric. Configure a **Value Field** to select which column to show. Your query should return a single row.

Try asking AI: *"Show me the total number of calls as a single number"*

<Frame>
  <img src="https://mintcdn.com/strada/D41T24VUQKcQvEsM/logs/analytics-chart-number.png?fit=max&auto=format&n=D41T24VUQKcQvEsM&q=85&s=8345f33853e94323423d13bbe12e2c55" alt="Number Chart" width="774" height="334" data-path="logs/analytics-chart-number.png" />
</Frame>

### Sankey Diagram

Visualize flows between categories. Configure a **Source Field** (left side), **Target Field** (right side), and **Value Field** (flow width). Adjust node padding and link curvature for styling.

Try asking AI: *"Show a sankey diagram of how calls flow from status to ended reason"*

<Frame>
  <img src="https://mintcdn.com/strada/3QGRfwMGDFsZac6I/logs/analytics-chart-sankey.png?fit=max&auto=format&n=3QGRfwMGDFsZac6I&q=85&s=1f6d3be51aeb360983eae28b0e3fa1ea" alt="Sankey Diagram" width="1024" height="490" data-path="logs/analytics-chart-sankey.png" />
</Frame>

### Markdown

Add rich text blocks to your dashboard like section headers, instructions, notes, or documentation. No SQL needed. Click **Add Chart** > **Markdown** to open a side-by-side editor with live preview.

***

## Using AI Query

The AI Query feature is the fastest way to build and modify charts. Here's how to get the most out of it.

### Writing Effective Prompts

<Info>
  **Think of it like talking to a coworker.** Write your prompt the way you'd ask someone on your team to build you a chart. Be specific about:

  * **What data** you want to see: *"calls", "connected calls", "conversion rate", "chat messages"*
  * **How to group it**: *"by agent", "by day", "by campaign", "by week"*
  * **What chart type**: *"as a bar chart", "as a line chart", "in a table"*
  * **Any filters**: *"only connected calls", "exclude test agents", "from the last 30 days"*

  **Good prompts:**

  * *"Show me daily call volume for the last month as a bar chart, broken down by agent"*
  * *"Create a table with each agent's name, total calls, connected rate, and average duration"*
  * *"What percentage of calls convert, grouped by campaign, as a line chart over time?"*

  **Less effective prompts:**

  * *"Show me data"*: too vague, the AI won't know what metric or chart type you want
  * *"Calls"*: not enough detail about how to visualize or group the data
</Info>

### Opening AI Query

Click the **AI Query** button in the bottom-right corner of the SQL editor. A chat sidebar opens on the right where you can type your request.

<Frame>
  <img src="https://mintcdn.com/strada/D41T24VUQKcQvEsM/logs/analytics-ai-query.png?fit=max&auto=format&n=D41T24VUQKcQvEsM&q=85&s=d9fa8c10dcab781a9a381a103c32e0f7" alt="AI Query Sidebar" style={{ width: '360px', height: 'auto' }} width="607" height="1024" data-path="logs/analytics-ai-query.png" />
</Frame>

### Reviewing Changes

When the AI generates new SQL, it appears as a **diff view** in the editor showing exactly what changed:

* Click **Accept** to apply the AI's changes
* Click **Reject** to revert to your previous query
* Toggle between **Unified** and **Split** diff views for easier reading

The chart preview updates immediately, so you can see the result before accepting.

### Iterating on Your Chart

You can have a back-and-forth conversation with the AI to refine your chart. This is one of the most powerful features. You don't need to get it right in one prompt:

* *"Change this to a line chart instead"*
* *"Add a conversion rate line on the right axis"*
* *"Group by week instead of day"*
* *"Only include connected calls"*
* *"The numbers look wrong, can you debug?"*

### Adding Context

If you're working with a complex query and want to reference a specific part, select text in the SQL editor while the AI sidebar is open. An **Add to context** button appears, click it to include that snippet as context for your next message.

### Debugging Errors

If your query has an error, click **Debug with AI** on the error message. This sends the error to the AI and asks it to fix the query automatically. You don't need to understand the error yourself.

<Tip>
  You don't need to understand the SQL that AI generates. Focus on describing what you want to see, and let
  the AI handle the rest. If the result doesn't look right, just tell it what to change.
</Tip>
