Hospital Data Analytics Dashboard
Build a dashboard to load, display, filter, and visualize hospital-related data from a pre-cleaned CSV via a Flask API. This feature empowers users to analyze healthcare data through dynamic filtering and visual analysis.
📊 Dashboard Overview
1. Load Dataset
(Frontend)- Data is fetched on page load from a backend endpoint:
GET /api/analytics - Uses
fetch()with async/await and handles status states (loading, error, empty).
2. Data Display
(Frontend)- Table rendering with headers auto-generated from dataset keys.
- Dynamic row creation using JavaScript.
- Responsive design using TailwindCSS classes.
3. Filtering Logic
(Frontend)- Filter by:
- Hospital
- Procedure
- Rating
- Dynamic population of filter options based on dataset.
- Apply/reset filters to update the table content.
4. User Experience Enhancements
(Frontend)- Status message panel (
loading,error,no data found). - Smooth transitions and hover effects.
- Graceful fallback when no matching data is found.
5. API Endpoint Processing
(Backend)- Reads from:
data/hospitaldatamodified.csv - Returns JSON response:
success: true/false statuscount: number of recordsdata: array of hospital records
6. Data Processing
(Backend)- Uses Pandas for CSV file reading and data cleaning.
- Converts DataFrame to JSON format for API response.
- Handles missing values and data type validation.
📡 API Endpoint
The /api/analytics endpoint (GET) returns JSON data: