[]
(Showing Draft Content)

Boxplot EChart

A Boxplot (or Box-and-Whisker Plot) is a statistical visualization used to summarize the distribution of data across categories. It displays five key metrics:

  • Median – the middle value in the dataset

  • Quartiles – the 25th (Q1) and 75th (Q3) percentiles

  • Minimum and Maximum – the smallest and largest values within 1.5× the interquartile range (IQR)

  • Outliers – data points outside the IQR

  • Interquartile Range – the spread between Q1 and Q3

Boxplots help identify data spread, central tendency, and variability, making them useful for comparative analysis across groups.

Create a Boxplot EChart

  1. Open the Dashboard Designer.

  2. Click the Custom Visualization icon on the left panel.

  3. Drag the Boxplot EChart onto the canvas.

  4. In the Data Binding panel:

    • Drag quantitative data into the Values slot.

    • Drag categorical data (e.g., category labels) into Details.

    • Drag a unique identifier (e.g., sample ID) into Distribution.

Once bound, click Preview to visualize the chart.

Example Use Case

You can use a boxplot to compare, for instance, the number of daily text messages sent by different genders. The distribution slot would hold sample IDs to distinguish between individual data points.

Format Data Attributes

Click the gear icon in any data field container to apply formatting and transformations:

  • Aggregation Method – Summarize data with options like Sum, Average, Count, etc.

  • Quick Functions – Apply percentile or ranking calculations.

  • Filter, Rename, Remove – Modify which data appears and how it’s labeled.

  • Tooltip Settings – Customize the tooltip display and formatting.

Analyze Data

From the Action Bar, you can:

  • Filter and Sort data

  • Apply Conditional Visualization

  • Modify Data Binding

  • Add Reference Lines for benchmarks

Customize Appearance

Use the Inspector Panel to adjust chart design and behavior:

  • Chart Style – Set color palettes, line widths, mark points, and custom behavior via JavaScript.

  • Animation – Configure entrance effects or automatic tooltip carousels.

  • Data Visualization – Enable zooming or axis formatting.

  • Interaction – Enable cross-filtering, jump actions, or click responses.

  • Title & Tooltip – Set font styles, alignment, and tooltip behavior.

  • Axes Settings – Adjust visibility, scale, gridlines, and label formatting for X and Y axes.

  • Special Data Handling – Define how nulls or blanks are displayed.

  • No Data Content – Customize the message and appearance when no data is present.

  • Layout & Appearance – Set dimensions, padding, margins, borders, and background settings.