Charts & Visualizations

Quick reference for creating interactive charts and data visualizations

Quick Reference

Gantt Chart JSON Structure

Basic Structure

{
  "title": "Project Name",
  "tasks": [
    {
      "id": "unique-id",
      "name": "Task Name", 
      "start": "YYYY-MM-DD",
      "end": "YYYY-MM-DD",
      "progress": 0-100
    }
  ]
}

Task Dependencies

"dependencies": ["task1", "task2"]

Date Format

Use ISO format: YYYY-MM-DD (e.g., 2024-01-15)

Progress Values

Integer from 0 to 100 representing completion percentage

Chart Features

| Feature | Description | |---------|-------------| | Interactive Timeline | D3.js powered interactive timeline with zoom and pan capabilities | | Progress Tracking | Visual progress bars showing task completion status | | Export Options | Download charts as SVG files for presentations | | Share Functionality | Share charts via email, social media, or direct links |

Property Builder

| Feature | Description | |---------|-------------| | Visual Editor | Build charts without writing JSON using form inputs | | Add/Remove Tasks | Dynamically add or remove tasks from your timeline | | Date Picker | Visual date selection for task start and end dates | | Real-time Preview | See chart updates instantly as you modify properties |

Best Practices

  • Task Naming: Use clear, descriptive names for better readability
  • Date Planning: Ensure end dates are after start dates
  • Progress Updates: Keep progress values realistic and up-to-date
  • Chart Title: Use descriptive titles that explain the project scope