Seera/TROUBLESHOOTING_CHARTS.md

Charts Not Showing - Troubleshooting Guide

Step 1: Check Browser Console

1. Open your browser's Developer Tools (F12)
2. Go to the Console tab
3. Look for error messages for each chart
4. Look for API call logs showing chart data

You should see logs like:

Up & Down Time Chart data: {labels: [...], datasets: [...]}

If you see errors instead, note them down.

Step 2: Verify Backend API is Deployed

The Python file frappe_dashboard_api.py must be copied to your Frappe server:

# SSH to your Frappe server
cd frappe-bench/apps/asset_lite

# Create api directory if it doesn't exist
mkdir -p asset_lite/api

# Copy the file
cp /path/to/frappe_dashboard_api.py asset_lite/api/dashboard_api.py

# Restart Frappe
bench restart

Step 3: Test API Directly

Open a new browser tab and try accessing the API directly:

Test Number Cards

https://seeraasm-med.seeraarabia.com/api/method/asset_lite.api.dashboard_api.get_number_cards

Expected Response:

{
  "message": {
    "total_assets": 7109,
    "work_orders_open": 3,
    "work_orders_in_progress": 1,
    "work_orders_completed": 2
  }
}

Test Chart Data

https://seeraasm-med.seeraarabia.com/api/method/asset_lite.api.dashboard_api.get_dashboard_chart_data?chart_name=Work%20Order%20Status%20Chart

Expected Response:

{
  "message": {
    "labels": ["Open", "Completed", "Pending"],
    "datasets": [{
      "name": "Count",
      "values": [10, 20, 5],
      "color": "#4F46E5"
    }],
    "type": "Bar"
  }
}

Step 4: Check Dashboard Chart Names

The chart names in React MUST match EXACTLY (including spaces and capitalization) with your Frappe Dashboard Chart docnames.

In Frappe, go to: Desk → Dashboard Chart List

Current names in React code:

• Up & Down Time Chart
• Work Order Status Chart
• Maintenance - Asset wise Count
• Asset Maintenance Assignees Status Count
• Asset Maintenance Frequency Chart
• PPM Status
• PPM Template Counts

If your Frappe charts have different names, update them in ModernDashboard.tsx line 12-18.

Step 5: Verify Dashboard Chart Configuration

Each Dashboard Chart in Frappe must have:

1. Chart Type: "Report"
2. Use Report Chart: ✓ (checked)
3. Report Name: A valid report name
4. X Field: The field to use for X-axis (e.g., status, item_name)
5. Y Axis Fields: At least one entry in child table with:
   • Y Field (e.g., count, amount)
   • Color (e.g., #4F46E5)
   • Label (e.g., Count)
6. Is Public: ✓ (checked) OR user has permission

Step 6: Check Network Tab

1. Open Developer Tools (F12)
2. Go to Network tab
3. Refresh the dashboard page
4. Look for API calls to get_dashboard_chart_data
5. Click on each call and check:
   • Status Code: Should be 200
   • Response: Should contain chart data

Common Errors:

404 Not Found

• Backend API file not deployed
• Endpoint path is wrong

500 Internal Server Error

• Chart doesn't exist in Frappe
• Report has an error
• Python code has a bug

401 Unauthorized

• Not logged in
• Session expired

403 Forbidden

• Chart is not Public
• User doesn't have permission

Step 7: Quick Fixes

If API endpoint doesn't exist (404):

# On Frappe server
cd frappe-bench/apps/asset_lite
ls -la asset_lite/api/  # Check if dashboard_api.py exists
bench restart

If chart names don't match:

Edit src/pages/ModernDashboard.tsx and update chart names to match exactly.

If charts are private:

In Frappe, for each Dashboard Chart:

1. Open the chart
2. Check Is Public
3. Save

If using wrong report:

The backend expects Report-based charts. Regular charts won't work.

Step 8: Enable Debug Mode

Add this to see what's being fetched:

Open src/hooks/useApi.ts and check if errors are being caught properly.

Step 9: Test with Mock Data

Temporarily add mock data to verify charts render:

// In ModernDashboard.tsx, replace chart fetch with:
const mockData = {
  labels: ['A', 'B', 'C'],
  datasets: [{
    name: 'Test',
    values: [10, 20, 15],
    color: '#4F46E5'
  }],
  type: 'Bar'
};

const { data: workOrderChart } = { data: mockData, loading: false, error: null };

If charts appear with mock data, the problem is the API. If not, it's the chart rendering logic.

Step 10: Contact Support

If none of the above work, provide:

1. Browser console errors
2. Network tab screenshots showing API responses
3. Frappe Dashboard Chart configuration screenshots
4. Frappe error logs: bench logs

---

Quick Checklist

• frappe_dashboard_api.py copied to asset_lite/api/dashboard_api.py
• Frappe server restarted (bench restart)
• Chart names in React match Frappe exactly
• All charts are marked "Is Public" in Frappe
• Charts are "Report" type with "Use Report Chart" checked
• Each chart has X Field and Y Axis configured
• Can access API endpoint directly in browser
• Browser console shows no 404/500 errors
• Logged in user has permissions

---

Most Common Issue: Backend API file not deployed to Frappe server yet!