Widgets
Widgets are independent visualization elements that can:
- Display data in various formats (charts, metrics, etc.)
- Customize appearance through styling options
- Connect to datasets through data binding
- Respond to user interactions such as clicks and hovers
All widgets are presented in the Widget List panel. Under the Design Perspective, widgets are added by dragging and dropping onto the canvas.
Widget List
In the Widget List panel, you can search for widgets by name in the search box. All widgets are divided into four types: Charts, Inputs, Decorations, and Display. The following explains according to different types.
Charts
Display datasets; most charts support slicing.
| Chart Type | Suitable Data to Display | Typical Scenario Examples |
|---|---|---|
| Pie Chart (Pie) | Part-to-whole proportional relationships, data categories should not be too many | Market share proportion, budget allocation ratio, user source composition |
| Line Chart/Area Chart (Line/Area) | Continuous data trends over time or ordered categories | Stock price trends, daily website visit changes, temperature changes |
| Bar Chart (Bar) | Size comparison of discrete data, or part-to-whole relationships | Sales comparison of different products, quarterly profits, population age distribution |
| Scatter Plot (Scatter) | Correlation or distribution relationship between two continuous variables, or three-dimensional data showing relationships through position and size | Relationship between height and weight, relationship between advertising investment and sales; relationship between GDP, life expectancy, and population; project risk, return, and investment |
| Effective Scatter Plot (Effective Scatter) | Correlation or distribution relationship between two continuous variables, or three-dimensional data showing relationships through position and size, highlighting key data points with ripple effect | Relationship between height and weight, relationship between advertising investment and sales; relationship between GDP, life expectancy, and population; project risk, return, and investment |
| Heatmap (Heatmap) | Numerical density or intensity distribution on a two-dimensional plane | Urban traffic congestion time-area map, user click heatmap, gene expression matrix |
| Map (Map) | Data distribution or comparison on geographic regions | GDP distribution by province, pandemic confirmed cases map, population density distribution |
| Radar Chart (Radar) | Comprehensive comparison of multi-dimensional data, showing multiple indicators of an object | Athlete ability assessment, product performance comparison, user profile analysis |
| Lines Chart (Lines) | Flow relationships between starting and ending points in geographic coordinate system, can attach data volume | Flight counts between cities during Spring Festival, logistics transportation routes, population migration flows |
| Graph (Graph) | Network relationships or connections between nodes | Social network friend relationships, knowledge graph, transportation route network |
| Sankey Diagram (Sankey) | Flow, energy, or data direction and transfer | User visit path analysis, energy loss flow, fund flow diagram |
| Tree Chart (Tree) | Data with hierarchical structure, showing tree relationships | Organizational chart, file directory structure, family tree |
| Treemap (Treemap) | Proportion and hierarchical data, displayed with area size and nested rectangles | Disk space usage analysis, product category sales proportion, stock market value distribution |
| Sunburst Chart (Sunburst) | Multi-level circular proportion data, showing hierarchy and proportion | Company department budget breakdown, regional population composition, website traffic source hierarchy |
| Boxplot/Box and Whisker Plot (Boxplot) | Data distribution characteristics, including median, quartiles, outliers | Exam score distribution, housing price distribution comparison, experimental data difference analysis |
| Candlestick Chart (Candlestick) | Financial data, especially price fluctuations of assets such as securities, futures, foreign exchange | Stock market display, futures price trend analysis, exchange rate fluctuation monitoring |
| Gauge (Gauge) | Completion progress or current status of key metrics | Equipment temperature monitoring, KPI completion degree, vehicle speedometer |
| Funnel Chart (Funnel) | Conversion rate and loss situation in processes | Sales conversion funnel, user registration process, number of people at each stage of recruitment process |
| Parallel Coordinates (Parallel) | Multi-dimensional comparison of high-dimensional data, showing data patterns and clustering across dimensions | Car parameter comparison (price, displacement, fuel consumption), patient multiple indicator analysis |
| Theme River Chart (ThemeRiver) | Evolution trends and cumulative effects of multiple themes over time | Discussion heat changes of different topics on social media, time impact of multiple events |
Input
Serve as input controls in dashboards, providing appropriate interaction methods based on data types to improve data input accuracy and user experience.
| Widget | Suitable Data Types | Typical Scenario Examples |
|---|---|---|
| Checkbox (Checkbox) | Boolean values (yes/no, true/false) | Mark status fields, such as "Enabled", "Reviewed", etc. |
| Date Picker (DatePicker) | Single date (year, month, day, or time) | Fill in birth date, order creation date, task deadline, plan start time, etc. |
| Number Input (InputNumber) | Numerical data, can limit range and decimal precision | Edit age, quantity, price, rating, inventory quantity, percentage, and other precise numerical values. |
| Radio Button (Radio) | Mutually exclusive enumeration options (few options) | Select gender (male/female), order status (pending payment/paid/cancelled), priority (high/medium/low), etc. |
| Range Picker (RangePicker) | Time interval composed of start date and end date | Set activity validity period, project start and end dates, report query time period, meeting arrangements, etc. |
| Dropdown Select (Select) | Select one or multiple items from predefined list (searchable) | Select country/city, product category, department, responsible person, data dictionary values (such as "Type: A/B/C"). |
| Slider (Slider) | Single numerical value on continuous range or discrete scale | Adjust volume percentage, rating (1~5 stars), progress percentage, threshold settings, etc., suitable for quick adjustment. |
Decorations
The decoration section provides 12 different types of borders and 4 different types of edges. These borders and edges can be arbitrarily combined with other widgets to obtain different visual effects.
Display
Perform data display or serve as auxiliary tools.
| Widget | Suitable Data or Function | Typical Scenario Examples |
|---|---|---|
| Digital Flop | Numerical values that need dynamic refresh or animated display, emphasizing the change process of numbers | Large-screen real-time data display (such as sales, visits), countdown, counter, stock price fluctuation values |
| Fullscreen Mode | Function controlling page or container to enter/exit fullscreen display state | Data visualization large-screen display, report fullscreen viewing, video/chart demonstration, document reading |
| Bordered Titles 1, 2 and 3 | Used for grouping titles of blocks or cards, visually distinguishing from content through borders | Module titles in dashboards, chart titles, partition titles in settings panels |
Adding Widgets to Dashboard
- Switch to Design Perspective
- Browse or search for widgets in Widget List panel
- Drag widget onto canvas
- Configure data binding and styling
Widget Design Best Practices
1. Choose Appropriate Chart Type
Refer to content in Widget List description to choose appropriate widgets.
2. Follow Data Visualization Principles
- Simplify: Remove unnecessary elements
- Emphasize: Highlight important information
- Organize: Logical grouping and ordering
- Label: Clear and concise labels
- Color: Meaningful and accessible color usage
3. Maintain Consistency
- Color Scheme: Consistent throughout dashboard
- Typography: Unified font usage
- Spacing: Consistent margins and padding
- Interaction Patterns: Predictable behaviors
Common Widget Issues and Solutions
Problem: Widget Doesn't Display Data
Solution:
- Check if dataset is bound
- Verify if field mapping is correct
- Check if filters exclude all data
- Use sample data to isolate problem
Problem: Poor Performance
Solution:
- Use filters to reduce dataset size
- Use aggregation instead of raw data
- Check complex calculations
Next Steps
Now that you understand widgets, you can:
- Design Layout: Learn effective widget arrangement in Canvas
- Explore Data Binding: Master binding data to widgets in Data Binding
- Test Interactivity: See how widgets work in Presentation Perspective
Widgets are your visualization toolkit. Start simple, try different types, and gradually build more complex visualizations as you become familiar with the tools and techniques.
Happy visualizing! 📊