> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vchata.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Charts & Maps

> Data visualization components including ApexCharts, organizational charts, and interactive maps for comprehensive data analysis

## Overview

VChata provides powerful data visualization tools including advanced charting capabilities with ApexCharts and interactive maps for comprehensive data analysis and presentation.

## Chart Components

### ApexCharts Integration

**Route:** `/charts/apexchart`

Comprehensive charting solution with ApexCharts for creating interactive and responsive data visualizations.

<CardGroup cols={2}>
  <Card title="Multiple Chart Types" icon="chart-bar">
    Line, bar, area, pie, donut, and scatter charts
  </Card>

  <Card title="Interactive Features" icon="mouse-pointer">
    Zoom, pan, tooltips, and drill-down capabilities
  </Card>
</CardGroup>

**Supported Chart Types:**

* **Line Charts:** Time series data and trends
* **Bar Charts:** Categorical data comparison
* **Area Charts:** Cumulative data visualization
* **Pie/Donut Charts:** Proportional data representation
* **Scatter Plots:** Correlation and distribution analysis
* **Candlestick Charts:** Financial data visualization
* **Heatmaps:** Matrix data representation
* **Radar Charts:** Multi-dimensional data comparison

**Features:**

* Responsive design for all screen sizes
* Real-time data updates
* Customizable themes and colors
* Export capabilities (PNG, SVG, PDF)
* Animation and transition effects
* Accessibility support

### Organizational Charts

**Route:** `/charts/org-chart`

Hierarchical organizational structure visualization with interactive node management.

<CardGroup cols={2}>
  <Card title="Hierarchical Display" icon="sitemap">
    Visual representation of organizational structure
  </Card>

  <Card title="Interactive Nodes" icon="network">
    Click, expand, and navigate through organizational levels
  </Card>
</CardGroup>

**Features:**

* Drag-and-drop node repositioning
* Expandable/collapsible branches
* Custom node styling and icons
* Search and filter functionality
* Export to various formats
* Integration with employee data

## Map Components

### Interactive Maps

**Route:** `/map`

Interactive map integration for geographic data visualization and location-based features.

<CardGroup cols={2}>
  <Card title="Geographic Data" icon="map-pin">
    Display location-based data and analytics
  </Card>

  <Card title="Interactive Markers" icon="navigation">
    Clickable markers with custom popups and information
  </Card>
</CardGroup>

**Features:**

* Multiple map providers (Google Maps, OpenStreetMap)
* Custom markers and clusters
* Drawing tools and annotations
* Geocoding and reverse geocoding
* Route planning and navigation
* Heatmap overlays for data density

## Chart Configuration

### Basic Chart Setup

<Steps>
  <Step title="Choose Chart Type">
    Select the appropriate chart type for your data visualization needs
  </Step>

  <Step title="Prepare Data">
    Format your data according to the chart requirements
  </Step>

  <Step title="Configure Options">
    Set up chart options, colors, and styling
  </Step>

  <Step title="Add Interactivity">
    Configure tooltips, zoom, and other interactive features
  </Step>

  <Step title="Test Responsiveness">
    Verify chart behavior across different screen sizes
  </Step>
</Steps>

### Advanced Configuration

<CodeGroup>
  ```javascript ApexCharts Configuration theme={null}
  const chartOptions = {
    chart: {
      type: 'line',
      height: 350,
      animations: {
        enabled: true,
        easing: 'easeinout',
        speed: 800,
      },
      toolbar: {
        show: true,
        tools: {
          download: true,
          selection: true,
          zoom: true,
          zoomin: true,
          zoomout: true,
          pan: true,
          reset: true,
        },
      },
    },
    series: [{
      name: 'Sales',
      data: [31, 40, 28, 51, 42, 109, 100],
      type: 'line',
    }],
    xaxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
      title: {
        text: 'Month',
      },
    },
    yaxis: {
      title: {
        text: 'Sales ($)',
      },
    },
    colors: ['#6366F1'],
    stroke: {
      curve: 'smooth',
      width: 3,
    },
    tooltip: {
      shared: true,
      intersect: false,
    },
  };

  // Initialize chart
  const chart = new ApexCharts(document.querySelector('#chart'), chartOptions);
  chart.render();
  ```

  ```python Data Preparation for Charts theme={null}
  import pandas as pd
  import json
  from datetime import datetime, timedelta

  def prepare_chart_data(data, chart_type='line'):
      """Prepare data for various chart types."""
      if chart_type == 'line':
          return {
              'series': [{
                  'name': 'Data Series',
                  'data': data['values']
              }],
              'xaxis': {
                  'categories': data['labels']
              }
          }
      elif chart_type == 'pie':
          return {
              'series': data['values'],
              'labels': data['labels']
          }
      elif chart_type == 'bar':
          return {
              'series': [{
                  'name': 'Data',
                  'data': data['values']
              }],
              'xaxis': {
                  'categories': data['labels']
              }
          }
  ```

  ```javascript Organizational Chart Configuration theme={null}
  const orgChartData = {
    name: 'CEO',
    title: 'Chief Executive Officer',
    children: [
      {
        name: 'CTO',
        title: 'Chief Technology Officer',
        children: [
          {
            name: 'Dev Team Lead',
            title: 'Development Team Lead',
            children: [
              { name: 'Developer 1', title: 'Senior Developer' },
              { name: 'Developer 2', title: 'Developer' },
            ],
          },
        ],
      },
      {
        name: 'CMO',
        title: 'Chief Marketing Officer',
        children: [
          { name: 'Marketing Manager', title: 'Marketing Manager' },
          { name: 'Content Creator', title: 'Content Creator' },
        ],
      },
    ],
  };

  const orgChartOptions = {
    chart: {
      type: 'orgChart',
      height: 'auto',
    },
    series: [orgChartData],
    colors: ['#6366F1', '#8B5CF6', '#EC4899'],
  };
  ```
</CodeGroup>

## Map Integration

### Map Configuration

<CodeGroup>
  ```javascript Map Integration theme={null}
  const mapConfig = {
    center: {
      lat: 40.7128,
      lng: -74.0060,
    },
    zoom: 10,
    markers: [
      {
        position: { lat: 40.7589, lng: -73.9851 },
        title: 'Times Square',
        description: 'Popular tourist destination',
      },
      {
        position: { lat: 40.7505, lng: -73.9934 },
        title: 'Madison Square Garden',
        description: 'Sports and entertainment venue',
      },
    ],
    heatmapData: [
      { lat: 40.7589, lng: -73.9851, weight: 100 },
      { lat: 40.7505, lng: -73.9934, weight: 80 },
    ],
  };

  // Initialize map
  const map = new VChataMap('map-container', mapConfig);
  ```

  ```python Geographic Data Processing theme={null}
  import geopandas as gpd
  import folium
  from folium import plugins

  def create_interactive_map(data, center_lat=40.7128, center_lon=-74.0060):
      """Create an interactive map with markers and heatmap."""
      # Create base map
      m = folium.Map(
          location=[center_lat, center_lon],
          zoom_start=10,
          tiles='OpenStreetMap'
      )
      
      # Add markers
      for idx, row in data.iterrows():
          folium.Marker(
              [row['lat'], row['lng']],
              popup=f"{row['name']}<br>{row['description']}",
              tooltip=row['name']
          ).add_to(m)
      
      # Add heatmap if data is available
      if 'weight' in data.columns:
          heat_data = [[row['lat'], row['lng'], row['weight']] 
                      for idx, row in data.iterrows()]
          plugins.HeatMap(heat_data).add_to(m)
      
      return m
  ```
</CodeGroup>

## Best Practices

<AccordionGroup>
  <Accordion title="Chart Design">
    * Choose appropriate chart types for your data (line for trends, bar for comparisons)
    * Use consistent color schemes across all charts
    * Provide clear labels, titles, and legends
    * Ensure charts are accessible with proper contrast and alt text
    * Keep charts simple and focused on key insights
  </Accordion>

  <Accordion title="Performance">
    * Optimize data processing for large datasets
    * Use data sampling or aggregation for better performance
    * Implement lazy loading for charts not immediately visible
    * Cache processed data to avoid repeated calculations
    * Consider using virtual scrolling for large datasets
  </Accordion>

  <Accordion title="User Experience">
    * Provide interactive features like zoom, pan, and tooltips
    * Include export functionality for charts and maps
    * Ensure responsive design for mobile devices
    * Add loading states and error handling
    * Provide clear navigation and controls
  </Accordion>
</AccordionGroup>

## Data Visualization Examples

### Business Analytics

<CardGroup cols={2}>
  <Card title="Sales Performance" icon="trending-up">
    Line charts showing sales trends over time with goal comparisons
  </Card>

  <Card title="Customer Distribution" icon="users">
    Pie charts displaying customer segments and geographic distribution
  </Card>
</CardGroup>

### Marketing Analytics

<CardGroup cols={2}>
  <Card title="Campaign Performance" icon="megaphone">
    Bar charts comparing campaign effectiveness across channels
  </Card>

  <Card title="Geographic Reach" icon="globe">
    Heatmaps showing campaign reach and engagement by location
  </Card>
</CardGroup>

### Operational Metrics

<CardGroup cols={2}>
  <Card title="System Performance" icon="activity">
    Real-time dashboards with multiple chart types for system monitoring
  </Card>

  <Card title="Resource Utilization" icon="cpu">
    Gauge charts and progress bars for resource monitoring
  </Card>
</CardGroup>

## Troubleshooting

### Common Issues

<AccordionGroup>
  <Accordion title="Chart Rendering Issues">
    * Check data format and structure matches chart requirements
    * Verify CSS and container dimensions are properly set
    * Ensure chart libraries are properly loaded and initialized
    * Check for JavaScript errors in browser console
    * Verify responsive breakpoints are configured correctly
  </Accordion>

  <Accordion title="Performance Problems">
    * Optimize data size and structure for better rendering
    * Use data aggregation for large datasets
    * Implement proper loading states and error handling
    * Check for memory leaks in chart instances
    * Consider using web workers for heavy data processing
  </Accordion>

  <Accordion title="Map Integration Issues">
    * Verify API keys and permissions for map providers
    * Check coordinate format and projection systems
    * Ensure proper error handling for geocoding failures
    * Test map functionality across different browsers
    * Verify responsive behavior on mobile devices
  </Accordion>
</AccordionGroup>