Pediatric Growth Chart Overlay Helper

WHAT IT DOES

This userscript helps parents and healthcare providers visualize a child's growth by overlaying measurement data directly onto pediatric growth charts. It scans the page for growth chart images (WHO, CDC, or similar charts), then overlays percentile curves (3rd, 10th, 25th, 50th, 75th, 90th, 97th) onto the image using canvas. When you enter a child's age, weight, height, and head circumference, the script calculates the corresponding percentile for each measurement and plots the data point directly on the chart. It also displays a plain-language interpretation—for example, "Weight: 50th percentile" or "Height: Above 97th percentile"—helping you quickly understand where the child falls compared to population norms. The script can track multiple children's data over time, allowing you to overlay growth trajectories and monitor progress.

WHERE IT RUNS

The script works on any webpage containing growth chart images—pediatric websites, medical reference pages, PDF viewer pages, or any site displaying WHO or CDC growth charts. It runs entirely within your browser, reading only the visible content of the current page. It does not track your browsing history, access other tabs, or send any data externally. All child data is stored locally in your browser using GM_setValue.

HOW TO USE

After installation, open the panel by clicking the tool's icon in the BotGentz sidebar. Enter a child's name (optional), age in months, and gender. Then enter weight (kg), height (cm), and/or head circumference (cm). Click "Add data point" to save the measurement—the panel will display the calculated percentile for each measurement. To visualize the data, navigate to a page with a growth chart image, then click "Draw overlay on chart." The script will find the chart image and overlay percentile curves and your child's data points. Use "Clear overlay" to remove the overlay and return the chart to its original state.

THE TECHNICAL MECHANISM

This script uses a reference database of approximate WHO/CDC growth chart values for weight and height at key age intervals (0–84 months). For each measurement, it calculates the percentile by interpolating between reference values: if the child's measurement falls below the 3rd percentile, it returns "Below 3rd"; if above the 97th, "Above 97th"; otherwise, it finds the nearest percentiles. For the visual overlay, the script identifies chart images using keyword detection ("growth", "chart", "percentile", "weight", "height"), then creates a transparent canvas overlay positioned precisely over the image. It draws a grid, percentile curves (using dashed colored lines), and plots child data points as circles with labels. The overlay respects the image dimensions and scales proportionally, ensuring accurate visual alignment. All percentiles are color-coded: green for typical (25th–75th), yellow for above typical (75th–90th), orange for above 90th, and red for below 3rd or above 97th.

THE PANEL

The panel is draggable anywhere on the screen and remembers its position between sessions. It can be collapsed to a small floating bubble to minimize distraction, and expanded again with a single click. The panel's width can be adjusted, and pressing the Escape key closes it instantly. All child data is persisted locally using GM_setValue, so measurements remain available across page reloads and browser restarts. The script supports multiple child profiles, allowing you to track siblings or multiple patients.

PLEASE NOTE

This userscript requires the free BotGentz extension to function. The growth chart data used for percentile calculation is approximate reference data for demonstration and educational purposes—it is not a substitute for professional medical advice. Always consult a pediatrician for accurate growth assessment. The overlay positioning works best on clearly visible chart images with consistent scaling; distorted or unusually sized images may cause misalignment. The script does not access any external databases or APIs—all calculations are performed locally. No data from your browsing is stored or transmitted anywhere; all child data remains in your local browser storage.