Generate Interactive Time Series Charts from JSON Data

This Dify workflow is an automated time series chart generator. It ingests structured JSON data, processes it with a Python script, and constructs a complete configuration for an interactive ECharts line chart. The result is a ready-to-render visualization, eliminating the need to write any manual charting code and accelerating your data analysis.

Workflow Overview

What is this?: This workflow provides a powerful tool to automatically convert raw JSON data into a fully-functional, interactive time series line chart. It uses a Python script within Dify to parse your data and generate a complete ECharts configuration, ready for immediate use in your applications or dashboards.
What problem does it solve?: Tired of writing repetitive front-end code just to visualize your time-based metrics? This workflow eliminates the manual process of setting up charting libraries, handling data series, and configuring options, saving you valuable development time.
What will you get?: Automate the creation of professional-grade time series charts. Instantly visualize multiple metrics on a single, interactive graph. Generate a ready-to-use ECharts configuration in seconds, not hours. Directly integrate dynamic charting capabilities into your Dify applications.

Apps Included

How to Use

Prerequisites

An active Dify instance (cloud or self-hosted).

Your time series data formatted as a JSON object. The JSON must contain a root key 'data' which is an array of objects, with each object having a 'date' key and one or more numeric metric keys.

Setup Steps

Prepare Your JSON Data

Format your time series data according to the required structure. Ensure you have a root `data` array, and each object within it contains a `date` string and your named metrics (e.g., `metric1`, `metric2`).

Input the Data

In the Dify workflow, locate the `Start` node. Paste your entire JSON object into the `data` input field.

Run the Workflow

Execute the workflow. The `Create Chart` node will process your JSON and generate the ECharts configuration.

Use the Output

The `End` node will output a text block containing the ECharts code, starting with ```echarts. Copy this entire block to render your chart in any environment that supports ECharts.

Pro Tips

The Python script automatically assigns colors from a predefined list. You can easily modify the `colors` array in the `Create Chart` node to match your brand's color palette.

For very large datasets, consider adding a preprocessing step before the `Start` node to aggregate or sample your data to ensure optimal chart performance.

Back

Information

Published date8/15/2025
Last updated8/15/2025

Platform

Dify