Generating Apache ECharts

Generating Apache ECharts

Apache ECharts is an open-source JavaScript charting and data-visualization library used to build interactive charts in the browser. It supports many chart types (bar, line, pie, scatter, heatmaps, sankey, etc.) and includes user-friendly interactions like tooltips on hover, zooming, panning, legend toggles, and responsive rendering for both desktop and mobile dashboards.

Why Apache ECharts?

Highly customizable visuals (great for branded dashboards and complex chart requirements).
Interactive exploration built in (hover details, zoom, legend filtering).
Runs in the browser and fits well into modern frontend stacks (React/Vue/Angular or plain JS).

Apache Echarts website (official)
https://echarts.apache.org/

In this article, you will learn how to generate Apache Charts using the EZ Charts feature.

Before you begin

To learn how to open EZ Charts window from templates page in SPAN sports performance analysis platform, refer to this article.
To learn how to access EZ Charts for a file, refer to this article.

Generating Apache ECharts

After opening the EZ Charts window from the templates page, click any bar chart from the list to generate a basic EZ Chart.



Once clicked, it will create a chart. A success message at the bottom right of the page will say "New chart created successfully," indicating that the chart has been created successfully.



To access the chart, click the "Charts" button on the file page. Upon clicking, the chart will be displayed as shown below.



In the EZ Charts window, to check the code and modify this basic EZ Chart, click the "View chart" button for the chart.



Upon clicking, it will open the code editor with the default EZ Charts code written for this basic EZ Chart.



LLM prompt for ChatGPT to generate Apache EChart

You can use LLMs such as ChatGPT to modify the code and improve the chart. Below is the ChatGPT prompt used to modify the chart.

Part 1: The master prompt contains points 1–6, which you should not edit.
Part 2: Point 7 contains user-defined requirements where you can specify your needs.

When providing the prompt to ChatGPT, make sure to combine all seven sections and submit them together in a single prompt.

Part 1: The master prompt

Quote

You will write Python code only that generates ECharts option JSON using Pyecharts, which will be rendered later in a frontend JavaScript app using Apache ECharts.

1) Imports (must not be changed)
  • Do not write any import statements.

  • Import statements will be ignored.

  • These libraries are already available:

    • pandas as pd

    • numpy as np

    • json

    • pyecharts

2) Execution context and output (must not be changed)
  • This code runs in a backend Python environment and must only produce ECharts JSON options (not render charts).

  • The final output must be saved in a variable named result.

  • The final output must be generated using:

    result = <chart>.dump_options()

    Example: result = bar.dump_options()

  • Do not write files. Do not print. Do not return anything else.

3) Input data (must not be changed)
  • The pandas dataframe is always named df.

  • Always work on a copy:

    df1 = df.copy()
4) Event linking rules (must not be changed)

Link events to chart elements by embedding an event_list inside each data item in the series values:

A) Required structure (when available)

  • When event_uuid exists, each plotted element must be represented as a dict like:

    {"value": <number>, "event_list": [<uuid_str>, ...]}

B) Segment-level behavior

  • For grouped/stacked/multi-series charts, each segment must carry only the events belonging to that exact segment.

C) Ordering + uniqueness

  • Preserve original df order when collecting UUIDs.

  • Do not include duplicates in event_list.

D) Fail-safe requirement

  • If event_uuid does not exist, the code must still run and produce valid ECharts options JSON.

  • In that case, set "event_list": [] for each data item (preferred) or omit event_list, but do not throw errors.

5) Starter example code (must not be changed)

Use this as the baseline pattern. Users may change chart type/grouping/styling later, but must preserve output rules and event-linking structure.

# Step 1: Work on a copy
df1 = df.copy()

# Step 2: Count occurrences for each category
category_counts = df1["Primary category"].value_counts().sort_values(ascending=False)
categories = list(category_counts.index)

values = []
event_lists = [] # optional helper list; keep if useful

# Step 3: Collect event UUIDs and counts (fail-safe if event_uuid is missing)
for category in categories:
category_rows = df1[df1["Primary category"] == category]

event_uuids = []
if "event_uuid" in df1.columns:
for uuid in category_rows["event_uuid"].tolist():
s = str(uuid)
if s not in event_uuids:
event_uuids.append(s)

values.append({
"value": int(category_counts[category]),
"event_list": event_uuids
})
event_lists.append(event_uuids)

# Step 4: Create the bar chart
bar = (
pyecharts.charts.Bar(
init_opts=pyecharts.options.InitOpts(
width="800px",
height="600px",
bg_color="black"
)
)
.add_xaxis(categories)
.add_yaxis(
"Counts",
values,
itemstyle_opts=pyecharts.options.ItemStyleOpts(
border_radius=[10, 10, 0, 0],
),
)
.set_global_opts(
title_opts=pyecharts.options.TitleOpts(
title="Overall player involvement in game",
title_textstyle_opts=pyecharts.options.TextStyleOpts(color="white"),
),
xaxis_opts=pyecharts.options.AxisOpts(
name="Players",
name_location="middle",
name_gap="50",
name_textstyle_opts=pyecharts.options.TextStyleOpts(color="white"),
axislabel_opts=pyecharts.options.LabelOpts(rotate=45, color="white"),
axisline_opts=pyecharts.options.AxisLineOpts(
linestyle_opts=pyecharts.options.LineStyleOpts(color="rgba(128, 128, 128, 1)")
),
splitline_opts=pyecharts.options.SplitLineOpts(is_show=False)
),
yaxis_opts=pyecharts.options.AxisOpts(
name="Number of actions",
name_location="middle",
name_gap="30",
name_textstyle_opts=pyecharts.options.TextStyleOpts(color="white"),
axislabel_opts=pyecharts.options.LabelOpts(color="white"),
axisline_opts=pyecharts.options.AxisLineOpts(
linestyle_opts=pyecharts.options.LineStyleOpts(color="rgba(128, 128, 128, 1)")
),
splitline_opts=pyecharts.options.SplitLineOpts(
linestyle_opts=pyecharts.options.LineStyleOpts(
color="rgba(128, 128, 128, 1)",
type_="dotted",
width=1
),
is_show=True
)
),
tooltip_opts=pyecharts.options.TooltipOpts(trigger="item"),
legend_opts=pyecharts.options.LegendOpts(is_show=False),
)
.set_series_opts(
label_opts=pyecharts.options.LabelOpts(is_show=True, position="insideTop")
)
)

# Step 5: Export chart options to JSON
result = bar.dump_options()
6) Final checklist (must not be changed)
  • Uses dataframe df

  • Creates a copy df1 = df.copy()

  • Embeds event linking into series values using dicts: {"value": ..., "event_list": [...]} when possible

  • Preserves original df order in event_list and avoids duplicates

  • Does not crash if event_uuid is missing

  • Ends with result = <chart>.dump_options()

Part 2: The user-defined prompt

Quote

7) User-modifiable chart instructions (users may change ONLY this section)

Users can modify only this section to change titles/labels/colors/layout. Example:

  • Chart title must be: Invovlements of the players

  • X-axis title must be: Players with their jersey numbers

  • Y-axis title must be: Number of Involvements

  • Ensure the X-axis title is not cut off. Increase bottom padding / grid bottom margin (e.g., set grid bottom to ~20–25%).

  • Ensure the X-axis title is not cut off. Increase bottom padding / grid bottom margin (e.g., set grid bottom to ~20–25%).

  • Use dark background

  • Bars should be light yellow

  • Axis title font size must be 14px


The above combined Part 1 and Part 2 ChatGPT prompt will generate a code in response. In the code editor, replace the default EZ Charts code with the updated code generated by ChatGPT, and click the "SAVE CHANGES" button at the top right to update the chart.



Re-launch the charts page from the file to view the updated chart, as shown below.


Accessing video-linked charts

These charts are video-linked and clickable. Click on any chart segment to open the related video clips, as shown below.


    • Related Articles

    • Generating Plotly charts

      Plotly is a set of open-source charting libraries that help you create interactive, web-ready charts (like bar charts, line charts, scatter plots, heatmaps, and even 3D charts). Plotly charts are designed for modern dashboards and reports: users can ...
    • Introduction to EZ Charts

      Introduction to EZ Charts Today, many people want to visualise and understand data but building dashboards in a simple and flexible way is still a challenge. Coaches, analysts, and teams (both in sports and non-sports domains) often want to create ...