Categories

Stream Graph Generator

Generate beautiful stream graphs for time series data with smooth flowing animations and baseline variations

Time series data for the stream graph. Supports JSON array or simple name:value list format

Title that will be displayed above the chart

Comma-separated labels for time periods (optional)

Algorithm for calculating the baseline

Width of the chart in pixels

Height of the chart in pixels

Display background grid lines

Display series names on the chart

Background color for the chart container

Key Facts

Category
Data Visualization
Input Types
textarea, text, select, number, checkbox
Output Type
html
Sample Coverage
4
API Ready
Yes

Overview

The Stream Graph Generator creates visually engaging, stacked area charts that represent time-series data through smooth, flowing curves. It is an ideal tool for visualizing how different categories evolve and fluctuate over time, providing a clear view of trends and volume changes.

When to Use

  • When you need to visualize the relative changes in volume for multiple categories over a specific time period.
  • When you want to highlight trends and patterns in time-series data using a fluid, organic aesthetic.
  • When you need to present stacked data in a way that emphasizes the overall shape and flow rather than just individual data points.

How It Works

  • Input your time-series data as a JSON array or a simple name-value list.
  • Customize the visual output by selecting a color scheme, baseline type, and chart dimensions.
  • Toggle display options like grid lines and series labels to refine the presentation.
  • Generate the chart to visualize your data with smooth, stacked flowing areas.

Use Cases

Tracking website traffic sources over several months to see which channels are growing.
Visualizing monthly sales performance across different product categories to identify seasonal trends.
Displaying shifts in market share for various competitors over a multi-year period.

Examples

1. Monthly Product Sales Trends

Marketing Analyst
Background
The analyst needs to present the growth of three different product lines over an eight-month period to the executive team.
Problem
Standard bar charts look cluttered and fail to show the 'flow' of market interest over time.
How to Use
Input the monthly sales figures for Product A, B, and C into the Time Series Data field and select the 'Vibrant' color scheme.
Example Config
chartTitle: 'Product Sales Growth', colorScheme: 'vibrant', showGrid: true
Outcome
A professional, flowing stream graph that clearly illustrates the rising and falling popularity of each product line.

2. Website Traffic Source Analysis

Content Manager
Background
The manager is reviewing traffic data from organic search, social media, and direct visits to understand audience behavior.
Problem
It is difficult to see how the proportion of traffic sources changes relative to each other using traditional line charts.
How to Use
Paste the traffic data in JSON format and set the baseline to 'Centered' to create a balanced visualization.
Example Config
baselineType: 'centered', showLabels: true, chartWidth: 900
Outcome
A symmetrical stream graph that highlights the dominant traffic sources and their fluctuations throughout the year.

Try with Samples

json

Related Hubs

FAQ

What data formats are supported?

The tool supports JSON arrays containing names and value arrays, or simple text-based lists formatted as 'Name:value1,value2,value3'.

Can I change the baseline of the graph?

Yes, you can choose between a 'Zero Baseline' for standard stacking or a 'Centered' baseline for a symmetrical stream effect.

Is the chart size adjustable?

Yes, you can define the exact width and height in pixels within the configuration settings, ranging from 400px to 1200px for width and 300px to 800px for height.

Can I customize the colors?

Yes, the tool provides several preset color schemes including Warm, Cool, Pastel, Vibrant, and Business themes.

Are the labels and grid lines optional?

Yes, you can toggle the 'Show Grid' and 'Show Labels' checkboxes to show or hide these elements based on your preference.

API Documentation

Request Endpoint

POST /en/api/tools/stream-graph-generator

Request Parameters

Parameter Name Type Required Description
chartData textarea Yes Time series data for the stream graph. Supports JSON array or simple name:value list format
chartTitle text No Title that will be displayed above the chart
timeLabels text No Comma-separated labels for time periods (optional)
colorScheme select No -
baselineType select No Algorithm for calculating the baseline
chartWidth number No Width of the chart in pixels
chartHeight number No Height of the chart in pixels
showGrid checkbox No Display background grid lines
showLabels checkbox No Display series names on the chart
backgroundColor text No Background color for the chart container

Response Format

{
  "result": "
Processed HTML content
", "error": "Error message (optional)", "message": "Notification message (optional)", "metadata": { "key": "value" } }
HTML: HTML

AI MCP Documentation

Add this tool to your MCP server configuration:

{
  "mcpServers": {
    "elysiatools-stream-graph-generator": {
      "name": "stream-graph-generator",
      "description": "Generate beautiful stream graphs for time series data with smooth flowing animations and baseline variations",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=stream-graph-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

You can chain multiple tools, e.g.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, max 20 tools.

If you encounter any issues, please contact us at [email protected]