Data Visualization & Dashboard Components
Dashboards in ML Clever are dynamic canvases built from individual **Data Visualization Components**. These components are the fundamental building blocks that transform your raw data into meaningful charts, key performance indicators (KPIs), tables, maps, and textual insights. They provide the visual language to understand trends, patterns, correlations, and performance metrics at a glance.
This guide covers everything you need to know about working with these components – from adding and configuring them to leveraging their interactive features and exploring the wide variety of available types. Mastering components is key to creating powerful, informative, and customized dashboards tailored to your specific analytical needs.
Understanding Dashboard Components
Think of each component as a self-contained, configurable module designed for a specific visualization or information display task. Key characteristics include:
Self-Contained Visual Unit
Each component renders a specific visualization (like a bar chart) or informational element (like a KPI card) within its designated area on the dashboard grid.
Highly Configurable
Components offer extensive settings to control data mapping (which columns to use), aggregation methods, appearance (colors, labels, orientation), and behavior through an intuitive settings panel.
Data-Driven
Most components connect to a specific dataset (or sometimes a trained model) and dynamically fetch and render data based on their configuration. They can often update in real-time when underlying data changes.
Interactive
Many components offer interactivity, such as tooltips on hover, clickable legends, zoom/pan capabilities within charts, and the ability to trigger actions or filtering (depending on the component type).
Component Anatomy
While components vary, many share common UI elements:
- Content Area: The main space where the visualization (chart, table, map, etc.) is rendered.
- Settings Icon (): Usually in a corner, clicking this opens the detailed configuration panel for that specific component instance.
- Info Icon (): (Optional) May appear to show details about the connected dataset or model.
- Lock Indicator (): Shows if the component's position and size are locked on the grid.
- Real-time Status (): An indicator (like a colored dot) might show the connection status for real-time data updates.
Adding Components to Your Dashboard
You can populate your dashboard manually by adding components one by one. This gives you precise control over the content and initial setup. The typical manual workflow involves:
Open the 'Add Component' Modal
Locate the "Add Component" button, typically found in the dashboard's main command bar or toolbar (often represented by a icon). Clicking this opens the component selection and configuration modal.
Select the Component Type
You'll be presented with a gallery of available component types (like the one shown in the 'Component Library' section below). Each type will have an icon, name, and description outlining its purpose. Choose the visualization that best suits the data you want to display.
Set Initial Configuration Options
After selecting a type, a form with initial configuration options will appear. This typically involves crucial data mapping settings (e.g., selecting columns for X/Y axes, specifying the metric for a KPI) and essential parameters required for the component to render. Fill these out based on your dataset and visualization goal.
Add to Dashboard
Once the initial configuration is set, click the "Add" or "Create" button. The component will be added to the current dashboard page, usually in the next available grid space. You can then reposition and resize it as needed.
Configuring Component Settings
After a component is added to your dashboard, you can fine-tune its behavior and appearance extensively using the Component Settings modal. This allows for detailed customization beyond the initial setup.
Settings Panel & Configuration
The settings panel provides powerful customization options and visual controls:
Accessing Settings
Hover over the component on your dashboard to reveal a settings or cog icon, typically located in one of the corners. Clicking this icon opens the settings panel.
The settings are presented within a modal window. This layout typically includes a live preview area alongside the configuration form, allowing you to see changes instantly.
The integrated preview pane shows an interactive representation of your component. It updates in real-time as you adjust settings in the form, providing immediate visual feedback.
Common Option Types
Title, Size, LimitsStandard input fields are used for configuring text-based properties like titles and labels, or numerical values such as sizes, axis limits, data precision, and binning options for histograms.
Columns, OrientationDropdown menus or selection lists allow you to choose from predefined options (e.g., data columns, chart types, orientation). Toggle switches provide simple on/off controls for boolean settings like 'Show Legend' or 'Enable Tooltips'.
Color, K-V Pairs More complex configurations might involve interactive color pickers for selecting specific hues or key-value pair editors for defining custom metadata or advanced display properties.
Other Actions
Prevents accidental modification.
Permanently removes component.
Interacting with Components on the Dashboard
Beyond configuration, components offer various ways to interact directly on the dashboard itself:
Layout Manipulation
Unless locked, you can click and drag components to reposition them on the grid. Resize components by dragging their corners or edges to optimize dashboard layout and flow.
Locking / Unlocking
Use the Lock/Unlock action within the Component Settings modal to fix a component's position and size, preventing accidental changes during layout adjustments.
Tooltips & Hover Effects
Hover your mouse over chart elements (bars, points, slices) to view detailed tooltips displaying exact values and labels, providing granular insights without cluttering the main view.
Real-time Updates & Refresh
Components connected via WebSockets () can listen for events (like `data_ready`) and automatically refresh their data when notified. You may also be able to trigger a manual refresh via component settings in some cases.
Component Library: Available Types
ML Clever offers a diverse library of component types to suit various data visualization needs. Here are some of the commonly available options:
Bar Chart
Compare categorical values. Supports vertical/horizontal orientation and stacking.
Line Chart
Visualize trends over time or continuous relationships. Options for points and line smoothing.
Pie / Donut Chart
Show proportions and composition of categories.
Scatter Plot
Examine relationships and correlations between two numerical variables. Supports grouping.
Histogram
Display the distribution (frequency) of a single numerical variable across bins.
Area Chart
Show cumulative totals or volume over time. Can be stacked.
KPI Metric Card
Display a single, crucial performance indicator with aggregation (sum, avg, count) and optional formatting.
Leaderboard
Display ranked data based on one or more metrics within categories.
Gauge
Visualize a single value against a defined minimum and maximum range.
Data Table
Display raw or aggregated data in a sortable, searchable tabular format.
Correlation Heatmap
Visualize correlation coefficients between multiple numerical variables.
Tree Map
Display hierarchical data using nested rectangles sized by value.
Sunburst
Visualize hierarchical data radially, showing proportions within nested levels.
Sankey Diagram
Illustrate flow and magnitude between different nodes or stages.
Geographic Map
Plot data points (latitude/longitude) on an interactive map, potentially sized or colored by value.
Text Area
Add rich text, commentary, analysis, instructions, or titles to provide context to your dashboard.
Note: The exact list of available components may vary based on your ML Clever version and configuration. Some components might require specific data formats.
Best Practices for Effective Visualization
Creating visually appealing and insightful dashboards involves more than just adding components. Consider these principles:
Choose the Right Tool for the Job
Select chart types appropriate for the data and the insight you want to convey (e.g., line charts for trends, bar charts for comparisons, scatter plots for correlations, pie charts for proportions).
Simplicity and Clarity
Avoid clutter. Don't overload charts with too much information (too many series, excessive labels). Ensure axes and titles are clear and concise.
Effective Use of Color
Leverage the dashboard's theme settings and color palettes consistently. Use color meaningfully to distinguish categories or highlight key data points, not just for decoration.
Context is Crucial
Use Text Area components or clear titles to explain what the visualizations show, what the KPIs mean, and any important context or assumptions.
Logical Layout and Flow
Arrange components logically on the dashboard grid. Place high-level summaries or KPIs prominently (top or left). Group related components together to tell a coherent story.
Troubleshooting Component Issues
Encountering issues with a specific component? Here are some common problems and how to address them:
| Problem | Troubleshooting Steps |
|---|---|
| Component Shows "Loading..." or No Data | • Verify Data Mappings: Open Component Settings () and double-check that the correct dataset columns are selected for axes, values, metrics, etc. • Check Dataset: Ensure the underlying dataset exists, is accessible, and contains relevant data for the selected columns. • Refresh Data: Try manually refreshing the component data (if an option exists in settings) or check the real-time socket connection status (). • Check Filters: Ensure dashboard-level filters aren't excluding all relevant data for this component. |
| Cannot Save Settings / Settings Revert | • Check for Errors: Look for any red error messages within the settings modal or in the browser's developer console. • Validate Inputs: Ensure all required fields (*) are filled correctly and numerical inputs are within valid ranges. • Permissions: Verify you have the necessary permissions to edit the dashboard and its components. • Network Issues: Temporary network problems could prevent saving. Try again after ensuring a stable connection. |
| Live Preview Doesn't Update | • Wait a Moment: Complex changes might take a second or two to reflect. • Check Console: Look for JavaScript errors in the browser's developer console that might be blocking the update. • Incompatible Settings: Some combinations of settings might be invalid and prevent the preview from rendering. Try reverting the last change. • Refresh Modal/Page: As a last resort, try closing and reopening the settings modal, or refreshing the entire dashboard page. |
| Chart Looks Incorrect / Misleading | • Re-check Data Mappings: Ensure you're plotting the intended columns on the correct axes and using the right aggregation method (sum vs. average, etc.). • Understand Data Types: Make sure you're not trying to plot categorical data on a numerical axis or vice-versa without appropriate transformation. • Check Component Type: Verify you've chosen the most appropriate chart type for the relationship you're trying to show. • Consult Data: Go back to the dataset view and examine the raw data for the columns being used to understand any anomalies or characteristics affecting the visualization. |
Further Exploration
Now that you understand the fundamentals of dashboard components, explore these related areas to further enhance your dashboards:
Dashboard Layout & Pages
Learn advanced techniques for arranging components, managing multiple pages, and optimizing layout for different devices.
Master Dashboard LayoutDesign Settings & Theming
Customize the overall look and feel of your dashboards by exploring theme options, color palettes, and font settings.
Customize Dashboard DesignAI Dashboard Generation
Discover how to leverage AI to automatically generate dashboards, providing a rapid starting point for your analysis.
Explore AI GenerationData Preparation
Effective visualization starts with clean data. Review guides on preparing your datasets for optimal analysis and visualization.
Learn about Data Prep