Analyzing Data with Charts

AI-BIM App includes powerful data visualization tools that generate interactive charts from your BIM model data.

Chart Features Overview

The charting system provides:

Bar charts showing element counts by type (walls, slabs, beams)
Doughnut charts displaying element distribution by building level
Interactive filtering to isolate elements by clicking chart segments
Visual isolation that highlights selected elements in the 3D viewport

Reference: ChartData component at /src/bim-components/ChartData/index.ts:28

Accessing the Charts Panel

The charts interface is located in the Project Information panel:

Load an IFC Model

First, load an IFC file containing building elements and storeys.

Open Project Panel

In the left sidebar, click the Project tab (building icon).

Find Charts Section

Scroll to the Charts section, which includes a dropdown, restart button, and canvas area.

Reference: Chart UI at /src/bim-components/ChartData/src/user-interface.ts:179

Generating Charts

Elements by Type (Bar Chart)

Visualize the distribution of structural elements in your model.

Select Chart Type

Click the dropdown in the Charts section and select Elements By Type.

Chart Generates Automatically

A bar chart appears showing counts for:

Walls (IFCWALL / IFCWALLSTANDARDCASE) - Red bars
Slabs (IFCSLAB) - Blue bars
Beams (IFCBEAM) - Green bars

Read Element Counts

Hover over bars to see exact quantities for each element type.

Reference: Element type data collection at /src/bim-components/ChartData/index.ts:97

Bar Chart Features

Color-coded for easy identification
Tooltip display shows exact counts on hover
8px border radius for modern appearance
2px border width for clear separation

Reference: Chart styling at /src/bim-components/ChartData/index.ts:122

Elements by Level (Doughnut Chart)

Analyze how elements are distributed across building storeys.

Select Chart Type

Click the dropdown and select Elements By Level.

Chart Shows Storey Distribution

A doughnut chart appears with each segment representing a building level (Ground Floor, Level 1, etc.).

Each Segment is Uniquely Colored

Colors are randomly generated to distinguish between levels.

Segment Size Shows Proportion

Larger segments indicate levels with more elements.

Reference: Level data collection at /src/bim-components/ChartData/index.ts:51

Doughnut Chart Features

Compact layout (300x300px maximum)
20px padding around the chart
Legend disabled for cleaner presentation
Unique colors for each building storey

Reference: Doughnut styling at /src/bim-components/ChartData/src/user-interface.ts:126

Interactive Filtering

Click chart elements to isolate them in the 3D viewport:

Filtering by Element Type

Click a Bar

In the Elements By Type chart, click on any bar (walls, slabs, or beams).

Elements Isolate in Viewport

Only the selected element type remains visible in the 3D view. All other elements are hidden.

Bar Changes Color

The clicked bar turns yellow to indicate selection.

Click Again to Restore

Click the same bar again to restore the original color and show all elements.

Reference: Bar click interaction at /src/bim-components/ChartData/src/user-interface.ts:62

Filtering by Building Level

Click a Doughnut Segment

In the Elements By Level chart, click any segment representing a building storey.

Level Elements Isolate

Only elements from the selected building level remain visible in the 3D viewport.

Inspect Level Details

Navigate the 3D view to examine elements specific to that floor.

Select Different Level

Click another segment to switch to a different building level.

Reference: Doughnut click interaction at /src/bim-components/ChartData/src/user-interface.ts:155

How Filtering Works

The isolation system uses the Hider component:

Fragment ID mapping - Selected elements are mapped to their fragment IDs
Hider.isolate() - Only the mapped fragments remain visible
3D update - The viewport updates to show only isolated elements
Color feedback - Chart segments change color to indicate selection

Reference: Isolation logic at /src/bim-components/ChartData/src/user-interface.ts:73

Restarting Charts

Refresh chart data after model changes:

Click RESTART CHART Button

In the Charts section, click the RESTART CHART button.

Chart Data Recalculates

The system re-analyzes the model and generates a fresh bar chart.

All Elements Become Visible

Any previously isolated elements are revealed.

Reference: Restart function at /src/bim-components/ChartData/src/user-interface.ts:44

Use the restart button after loading a new model or if chart data appears outdated.

Understanding Chart Data

Element Type Detection

The system identifies elements using IFC entity types:

Walls: Searches for IFCWALL, falls back to IFCWALLSTANDARDCASE if none found
Slabs: Identifies all IFCSLAB entities
Beams: Identifies all IFCBEAM entities

Reference: Type detection at /src/bim-components/ChartData/index.ts:100

Building Level Detection

For level-based charts:

Find Building Storeys

The system queries all IFCBUILDINGSTOREY entities in the model.

Get Contained Elements

For each storey, it uses the IFC Relations Indexer to find elements with “ContainedInStructure” relationships.

Count Elements per Level

Each storey’s element count is calculated and stored.

Generate Chart

The chart displays each storey with its element count.

Reference: Level detection at /src/bim-components/ChartData/index.ts:66

Color Generation

Colors are intelligently managed:

Bar chart colors: Pre-defined for consistency
- Walls: rgba(255, 0, 0, 0.5) (red)
- Slabs: rgba(0, 150, 255, 0.5) (blue)
- Beams: rgba(0, 255, 0, 0.5) (green)
Doughnut chart colors: Randomly generated RGB values with uniqueness checking
Selection color: rgba(255, 255, 0, 0.7) (yellow) for clicked elements

Reference: Color generation at /src/bim-components/ChartData/index.ts:38

Chart Library Integration

AI-BIM App uses Chart.js for visualization:

Registered Components

BarController - Manages bar chart rendering
BarElement - Individual bar visualization
DoughnutController - Manages doughnut chart rendering
ArcElement - Doughnut segment visualization
CategoryScale - X-axis scale for bar charts
LinearScale - Y-axis scale for bar charts
Tooltip - Hover information display

Reference: Chart.js registration at /src/bim-components/ChartData/src/user-interface.ts:16

Chart Configuration

Default options applied to all charts:

{
  "elements": {
    "bar": {
      "borderWidth": 5,
      "borderRadius": 5
    }
  },
  "plugins": {
    "tooltip": {
      "enabled": true,
      "mode": "index",
      "intersect": false
    }
  }
}

Reference: Chart options at /src/bim-components/ChartData/src/user-interface.ts:24

Advanced Usage

Combining with Selection Tools

Isolate by Chart

Use a chart to isolate a specific element type or building level.

Select Individual Elements

Click individual elements in the isolated view to inspect their properties.

View Element Data

Check the element properties panel for detailed information.

Use Focus Tool

Click the Focus button in the Selection toolbar to zoom to specific elements.

Analyzing Model Composition

Use charts to understand your model:

Element balance: Compare wall, slab, and beam quantities
Level complexity: Identify floors with the most elements
Model completeness: Check if all expected element types are present
Storey distribution: Understand vertical organization

Quality Control Workflows

Generate Element Type Chart

Check if expected element quantities match your design intent.

Review Building Levels

Ensure all storeys are defined and contain appropriate elements.

Isolate Element Types

Visually verify that walls, slabs, and beams are correctly modeled.

Cross-reference with AI

Use AI queries to get specific counts and compare with chart data.

Exporting Insights

While direct export isn’t built-in, you can document findings:

Take screenshots of charts for reports
Use the AI query feature to generate text summaries of data
Manually record element counts from chart tooltips
Combine chart visuals with 3D viewport screenshots

Use browser screenshot tools or the Print Screen key to capture chart visualizations for documentation.

Troubleshooting

Chart Doesn’t Appear

Ensure an IFC model is loaded
Click the RESTART CHART button
Check that your model contains walls, slabs, or beams
Look for browser console errors

Empty Chart Displayed

Your IFC file may not contain the expected element types
Verify element classifications in your BIM authoring software
Try loading a different IFC file to test

Click Doesn’t Isolate Elements

Ensure you’re clicking directly on bars or segments (not empty space)
Check if elements are already isolated from a previous selection
Click Show All in the Selection toolbar to reset visibility

Incorrect Element Counts

Some IFC files use non-standard entity types
Check if walls are exported as IFCWALL vs IFCWALLSTANDARDCASE
Verify IFC classification in your source BIM model

Doughnut Chart Missing Levels

Ensure building storeys are defined in the IFC file
Check spatial structure in your BIM authoring tool
Elements not assigned to storeys won’t appear in level charts

Performance Considerations

Large Models

Chart generation may take several seconds for models with thousands of elements
The system processes all fragments to calculate counts
First chart generation is slowest; subsequent updates are faster

Memory Usage

Each chart stores element expressID arrays
Very large models may consume significant memory
Close charts when not in use to free resources

Tips for Effective Data Analysis

Start with the Elements By Type chart to get an overview, then drill down with Elements By Level to understand vertical distribution.

Use chart isolation in combination with the Focus tool to quickly inspect specific element categories.

Compare chart data with AI query results to verify model completeness and data accuracy.

For quality control, isolate each element type sequentially and visually verify correct modeling.

Next Steps

Enhance your analysis workflow:

Use measurement tools on isolated elements
Combine with AI queries for detailed property analysis
Master 3D navigation to inspect isolated elements effectively

Get Started

Core Features

User Guide

Configuration

​Chart Features Overview

​Accessing the Charts Panel

​Generating Charts

​Elements by Type (Bar Chart)

​Bar Chart Features

​Elements by Level (Doughnut Chart)

​Doughnut Chart Features

​Interactive Filtering

​Filtering by Element Type

​Filtering by Building Level

​How Filtering Works

​Restarting Charts

​Understanding Chart Data

​Element Type Detection

​Building Level Detection

​Color Generation

​Chart Library Integration

​Registered Components

​Chart Configuration

​Advanced Usage

​Combining with Selection Tools

​Analyzing Model Composition

​Quality Control Workflows

​Exporting Insights

​Troubleshooting

​Chart Doesn’t Appear

​Empty Chart Displayed

​Click Doesn’t Isolate Elements

​Incorrect Element Counts

​Doughnut Chart Missing Levels

​Performance Considerations

​Large Models

​Memory Usage

​Tips for Effective Data Analysis

​Next Steps

Build docs developers (and LLMs) love

Chart Features Overview

Accessing the Charts Panel

Generating Charts

Elements by Type (Bar Chart)

Bar Chart Features

Elements by Level (Doughnut Chart)

Doughnut Chart Features

Interactive Filtering

Filtering by Element Type

Filtering by Building Level

How Filtering Works

Restarting Charts

Understanding Chart Data

Element Type Detection

Building Level Detection

Color Generation

Chart Library Integration

Registered Components

Chart Configuration

Advanced Usage

Combining with Selection Tools

Analyzing Model Composition

Quality Control Workflows

Exporting Insights

Troubleshooting

Chart Doesn’t Appear

Empty Chart Displayed

Click Doesn’t Isolate Elements

Incorrect Element Counts

Doughnut Chart Missing Levels

Performance Considerations

Large Models

Memory Usage

Tips for Effective Data Analysis

Next Steps