# Fruit Distribution Chart
This example demonstrates real-time data visualization using Chart.js with automatic updates when underlying data changes.
## Key Features
* **Real-time data visualization** with automatic chart updates
* **Pie chart with percentages** showing data distribution
* **Dynamic data fetching** from related datatables
* **Professional styling** with custom colors and tooltips
* **Responsive design** that adapts to container size
* **Error handling** with graceful fallbacks
## Use Cases
Ideal for applications requiring:
* Real-time dashboards and analytics
* Inventory tracking and distribution
* Survey results visualization
* Sales performance monitoring
* Resource allocation displays
* Any scenario requiring live data charts
## Implementation Overview
This widget uses the **Other Tables Data** pattern, fetching data from a separate "Fruit Counters" datatable. Key implementation features:
* Automatic chart updates when source data changes
* Professional Chart.js pie chart with custom styling
* Percentage calculations in tooltips
* Dynamic color assignment for visual appeal
* Responsive design principles
## Code Example
```html
Fruit Distribution Chart
```
## Key Concepts
### Real-time Data Integration
* **Dynamic Data Source**: Fetches data from "Fruit Counters" datatable by name
* **Automatic Updates**: Chart refreshes immediately when source data changes
* **Error Handling**: Graceful fallback when data source is unavailable
* **Resource Discovery**: Finds datatables by title from resourceJSON
### Chart.js Pie Chart Features
* **Percentage Tooltips**: Custom tooltip showing both count and percentage
* **Professional Colors**: Carefully selected color palette for visual appeal
* **Responsive Design**: Chart adapts to container size automatically
* **Legend Positioning**: Top-positioned legend for optimal layout
### Data Processing
* **Field Mapping**: Maps "Fruit Type" and "Count" fields to chart data
* **Dynamic Labels**: Chart labels generated from actual data
* **Color Assignment**: Automatic color assignment for up to 6 categories
* **Total Calculations**: Real-time percentage calculations in tooltips
### Performance Optimization
* **Chart Lifecycle**: Proper chart destruction and recreation for updates
* **Memory Management**: Prevents memory leaks with proper cleanup
* **Efficient Updates**: Only updates when data actually changes
* **Loading States**: User-friendly loading indicators
This example demonstrates how code widgets can create professional data visualizations that update in real-time, perfect for dashboards and analytics applications where data freshness is critical.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.buzzy.buzz/the-building-blocks/code-widget-custom-code/examples/fruit-distribution-chart.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.