Pictorial Chart

What Is This Report Type?

A Pictorial Chart displays data as triangle-shaped hills — one hill per category — where the height of each hill represents the metric value. You can upload custom icons (SVG, PNG, or JPG) that appear at the peak of each hill, making the chart more visual and meaningful.

Why Is It Used?

Pictorial Charts are used when visual engagement matters more than analytical detail. Replacing abstract bars with meaningful icons (a wind turbine for wind energy, a solar panel for solar) instantly communicates what the data represents — even to non-technical audiences.

Key Features and Characteristics

Feature	Description
Hill Shape	Each category is shown as a triangle hill — taller = higher value.
Custom Icons	Upload your own SVG, PNG, or JPG icons and place them at hill peaks.
Icon Pool	Upload multiple icons at once, then assign each one to a category.
Persistent Icons	Assigned icons are saved with the report — they reload automatically.
Color Coding	Each hill gets a different color for easy category distinction.

When to Use It (Use Cases)

Energy Mix Dashboard: Wind, solar, hydro, nuclear hills with matching energy icons at each peak.
Population by Region: Hills representing city populations with landmark icons.
Product Category Sales: Each product category as a hill with its product icon on top.
Resource Allocation: Department budget hills with department icons.

Real-Time Business Example

Scenario: An energy company wants to show power generation capacity across 5 energy sources in a way that non-technical executives can immediately understand.

Visualization: A Pictorial Chart shows five hills — Wind (320 MW), Solar (450 MW), Hydro (280 MW), Nuclear (600 MW), Coal (150 MW). Each hill has a custom icon at its peak: a wind turbine, a solar panel, a dam, a cooling tower, and a coal pile. The Nuclear hill is the tallest, instantly visible. No table reading needed.

Common Metrics Displayed

Power Generation Capacity: MW or GW per energy source.
Sales Volume: Units sold per product category.
Headcount: Employee count per department.
Revenue: Income per business unit or region.

User Interactions

Interaction	Behavior
Hover / Tooltip	Hovering over a hill shows the category name and exact value.
Upload Icons	Use the toolbar button to upload SVG/PNG/JPG icons per category.
Assign Icons	Pick which icon from the pool goes on top of which hill.
Remove Icons	Deselect or delete an icon assignment at any time.
Export	Export to Excel.

Creation Steps

Step 1 — Create the Report

Go to Reports → Add Report.
Select Pictorial Chart as the report type.
Connect your data source and dataset.

Step 2 — Configure Axes

Field	What to Drag Here
Group By (X-Axis)	The category field — one hill per unique value (e.g., Energy Source, Department)
Metrics (Y-Axis)	The numeric field that controls hill height (e.g., Capacity MW, Revenue)

Step 3 — Save the Report First

Important: You must save the report before uploading icons. The system needs a Report ID to store your files.

Click Save in the top toolbar.

Step 4 — Upload Icons (Optional)

Icons appear at the peak of each hill. This step is optional — the chart works without icons too.

How to Upload

In the toolbar, click the Upload SVGs button (only visible for Pictorial Chart type).
A panel opens showing:
- Upload Pool section at the top — drop your icon files here
- Category list below — one row per category from your data

Upload to the Pool

Click Choose files under the pool section.
Select one or more files — SVG, PNG, or JPG are all supported (max 5 MB each).
Your files appear as thumbnails in the pool.

Assign an Icon to a Category

In the category list, find the category you want (e.g., Wind).
Click the dropdown next to it.
Select the icon from the pool that matches (e.g., select your wind turbine icon).
The chart updates immediately — the icon appears at the peak of that hill.

Assign Multiple Icons

Repeat for each category. You can assign the same icon to multiple categories, or leave some categories without icons.

Remove an Icon Assignment

To remove an icon from a hill: open the dropdown for that category → select — none —.
To remove an icon from the pool entirely: click the red ✕ button on the thumbnail.

Step 5 — Save Again

After assigning icons, click Save to persist the assignments. Next time you open the report, all icons reload automatically.

Icon Upload — Visual Flow

Code

1You upload files → They appear in the Pool
2                         ↓
3         You assign pool icons to categories
4                         ↓
5         Icons appear at the top of each hill
6                         ↓
7         You save the report → assignments are stored
8                         ↓
9         Next visit → icons load automatically

Supported Icon Formats

Format	Extension	Notes
SVG	`.svg`	Best quality — scales to any size without blur
PNG	`.png`	Good for photos or complex artwork
JPG / JPEG	`.jpg` `.jpeg`	Supported but no transparency — white background shows

Recommended: Use SVG for icons and logos. Use PNG if you need transparency and the icon is photo-like.

File Storage Location

Uploaded icons are stored on the server at:

Code

1uploads/reports/{reportId}/pictorial_{category_name}.svg

They are served via the API and linked to your report. If you delete the report, the files remain on disk (they are not auto-deleted).

Tips

Save before uploading — the upload button shows a warning if no Report ID exists yet.
SVG icons look sharpest — they are vector-based and stay crisp at any screen size.
Pool icons persist per session — if you close the panel and reopen it, the pool rebuilds from saved assignments automatically.
No icons needed — the pictorial chart displays correctly as triangle hills even without any icons assigned.
Category names must match exactly — the icon assignment uses the exact category value from your data (e.g., "Wind" not "wind").