LLMs.txt directory

Agentic charting examples

These end-to-end examples show how agentic charting works with different data sources, natural-language refinement, and interactive features.

Example 1: Forecasting with code execution

Scenario

You want to forecast sales for the next six months and visualize the forecast with confidence intervals.

Steps

  1. User asks:

    "Forecast sales for the next 6 months"

  2. Spotter generates Python code to perform a time-series forecast.

  3. The code executes and returns a table:

    Month Forecasted Sales Lower Bound Upper Bound

    2024-07

    1,250,000

    1,100,000

    1,400,000

    2024-08

    1,320,000

    1,150,000

    1,490,000

    2024-09

    1,410,000

    1,220,000

    1,600,000

    2024-10

    1,380,000

    1,180,000

    1,580,000

    2024-11

    1,450,000

    1,250,000

    1,650,000

    2024-12

    1,520,000

    1,300,000

    1,740,000

  4. The charting engine renders a line chart with:

    • A central line for the forecasted sales

    • A shaded confidence band between the lower and upper bounds

    • A time-series X-axis with monthly labels

Result:

An interactive line chart showing the six-month forecast with a visual confidence interval.

Key concepts demonstrated

Example 2: Web data with MCP

Scenario

You want to compare current Nasdaq and Bitcoin prices using web data.

Steps

  1. User asks:

    "Compare Nasdaq and Bitcoin prices"

  2. Spotter uses the MCP tool to search the web and retrieve current market data.

  3. Data is returned from multiple web sources.

  4. The charting engine renders two distinct charts:

    • A line chart for Nasdaq prices with a financial-style Y-axis

    • A separate line chart for Bitcoin prices with a cryptocurrency-style Y-axis

Result:

Two side-by-side interactive charts, each properly formatted for its data scale and type.

Key concepts demonstrated

  • MCP as a data source

  • Multiple unrelated data series rendered as separate charts

  • Automatic axis formatting appropriate to each data type

Example 3: Natural-language chart refinement

Scenario

You have a generated chart and want to refine its appearance using natural language.

Steps

  1. Initial request:

    "Show me last quarter’s revenue by region"

  2. Spotter generates a column chart.

  3. User refines the chart:

    "Change this to a bar chart with different colors for each bar"

  4. Result: The chart switches to a horizontal bar chart with a distinct color for each region.

  5. User adds labels:

    "Add data labels"

  6. Result: Numeric revenue values appear on each bar.

  7. User adjusts the axis:

    "Change the Y-axis to show in thousands"

  8. Result: The axis labels are reformatted (for example, 1,250,000 becomes 1,250).

Key concepts demonstrated

Example 4: Interactive features

Scenario

You want to explore a generated chart by toggling data series and inspecting values.

Steps

  1. User asks:

    "Show me monthly sales for the last year by product category"

  2. A multi-series line chart is generated.

  3. User interactions:

    • Hover over a data point in June to see exact values for all categories

    • Click the legend to toggle off the "Electronics" series and focus on "Apparel" and "Home Goods"

    • Zoom into the Q4 region to see details for October, November, and December

Key concepts demonstrated

  • Hover tooltips with multi-series values

  • Legend toggle for filtering series

  • Pan and zoom for time-range exploration

Related topics