Fruit Distribution Chart

> For the complete documentation index, see [llms.txt](https://docs.buzzy.buzz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.buzzy.buzz/the-building-blocks/code-widget-custom-code/examples/fruit-distribution-chart.md). # 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.