Highcharts Bundle Laravel Package

Getting Started

Minimal Setup

1. Install the Bundle

   composer require 94noni/highcharts-bundle
   

   Enable in config/bundles.php:

   return [
       // ...
       ObHighchartsBundle::class => ['all' => true],
   ];
   

2. Basic Chart in Twig Create a chart object in a controller:

   use Ob\HighchartsBundle\Highcharts\Highchart;
   
   public function showChart(): Response
   {
       $chart = new Highchart();
       $chart->chart->type = 'line';
       $chart->title->text = 'Sample Chart';
   
       $series = new \Ob\HighchartsBundle\Highcharts\Series();
       $series->name = 'Data';
       $series->data = [1, 2, 3, 4, 5];
       $chart->series[] = $series;
   
       return $this->render('chart.html.twig', ['chart' => $chart]);
   }
   

3. Render in Twig

   {{ chart.render() }}
   

First Use Case: Line Chart with Dynamic Data

// Controller
$chart = new Highchart();
$chart->chart->type = 'line';
$chart->title->text = 'Monthly Visits';

// Fetch data from DB (e.g., Doctrine)
$visits = $entityManager->getRepository(Visit::class)->findVisitsByMonth();

// Configure series
$series = new Series();
$series->name = 'Visits';
$series->data = $visits; // Assumes array of numeric values
$chart->series[] = $series;

return $this->render('dashboard.html.twig', ['chart' => $chart]);

Implementation Patterns

1. Twig Integration

• Twig Extensions: Use chart() helper in Twig for quick rendering:

  {{ chart({
      'type': 'column',
      'title': { 'text': 'Sales' },
      'series': [{
          'name': 'Product A',
          'data': [10, 20, 30]
      }]
  }) }}
  

• Reusable Components: Store chart configurations in YAML/JSON and load via Highchart::createFromArray().

2. Dynamic Data Binding

• Doctrine Integration: Fetch data in controllers and bind to series:

  $series->data = $entityManager->getRepository(Product::class)
      ->getSalesByMonth();
  

• API Data: Use HttpClient to fetch JSON and map to chart data:

  $response = $client->request('GET', 'https://api.example.com/data');
  $chart->series->data = json_decode($response->getContent(), true);
  

3. Configuration Patterns

• Shared Config: Extend Highchart for reusable templates:

  class BaseChart extends Highchart {
      public function __construct() {
          $this->chart->type = 'line';
          $this->title->text = 'Default Title';
          $this->yAxis->title->text = 'Values';
      }
  }
  

• Theme Overrides: Customize via Twig:

  {{ chart.render({
      'options': {
          'colors': ['#FF5733', '#33FF57'],
          'plotOptions': {
              'series': { 'cursor': 'pointer' }
          }
      }
  }) }}
  

4. Event Handling

• Click Events: Bind via plotOptions:

  $chart->plotOptions->series->point->events->click =
      'function() { alert(this.category); }';
  

5. Lazy Loading

• AJAX Updates: Render empty charts initially and update via JS:

  // Fetch data and update chart
  $.get('/api/data', function(data) {
      chart.series[0].setData(data);
  });
  

Gotchas and Tips

Common Pitfalls

1. PHP/JS Type Mismatches

   • Highcharts expects numeric data values. Ensure Doctrine queries return integers/floats:

     // ❌ Avoid strings
     $series->data = ['1', '2', '3']; // Fails silently
     
     // ✅ Correct
     $series->data = [1, 2, 3];
     

   • Fix: Cast data in queries:

     $query->select('CAST(value AS DECIMAL(10,2))');
     

2. Twig Auto-escaping

   • Dynamic title or xAxis labels may break if not escaped:

     // ❌ Risky (XSS)
     $chart->title->text = $userInput;
     
     // ✅ Safe
     $chart->title->text = htmlspecialchars($userInput, ENT_QUOTES);
     

3. Highcharts JS Conflicts

   • If using multiple charts, ensure unique IDs:

     $chart->chart->renderTo = 'chart-container-' . uniqid();
     

   • Debug: Check browser console for Highcharts error #13.

4. Deprecated Methods

   • Avoid Highchart::set() in favor of direct property access:

     // ❌ Deprecated
     $chart->set('chart.type', 'line');
     
     // ✅ Modern
     $chart->chart->type = 'line';
     

Debugging Tips

1. Inspect Raw Config Dump the chart object to verify structure:

   dump($chart->toArray());
   

   • Compare with Highcharts Config Reference.

2. Browser DevTools

   • Open Elements tab → Check if Highcharts JS/CSS is loaded.
   • Console tab → Look for errors like Highcharts error #13 (missing dependency).

3. Symfony Profiler Enable ObHighchartsBundle's profiler data:

   # config/packages/dev/ob_highcharts.yaml
   ob_highcharts:
       profiler: true
   

Extension Points

1. Custom Series Types Extend Series for domain-specific logic:

   class UserActivitySeries extends Series {
       public function __construct(array $userActivities) {
           $this->name = 'User Activity';
           $this->data = array_map(fn($a) => $a->count, $userActivities);
       }
   }
   

2. Highcharts Plugins Load plugins via Twig:

   {{ chart.render({
       'options': {
           'plugins': ['exporting', 'boost']
       }
   }) }}
   

   • Ensure plugins are included in your base template:

     {# templates/base.html.twig #}
     <script src="https://code.highcharts.com/plugins/exporting.js"></script>
     

3. Symfony Messenger Integration Trigger chart updates via messages:

   $bus->dispatch(new UpdateChartDataMessage($chartId, $newData));
   

   • Handle in a controller/command to rebuild the chart.

4. Webpack Encore Customize Highcharts build:

   // webpack.config.js
   Encore
       .addEntry('highcharts', './vendor/highcharts/highcharts.js')
       .copyFiles({
           from: './vendor/highcharts/',
           to: 'build/highcharts/[path][name].[ext]'
       });
   

Performance Optimizations

1. Lazy Data Loading Use series.data as a callback for large datasets:

   $series->data = function() use ($repository) {
       return $repository->getLargeDataset();
   };
   

2. Caching Cache chart configurations (not data):

   $cache = $cachePool->getItem('chart_config_' . $chartId);
   if (!$cache->isHit()) {
       $chart = $this->buildChart();
       $cache->set($chart->toArray());
   } else {
       $chart = Highchart::createFromArray($cache->get());
   }
   

3. Avoid Over-fetching Use DQL to fetch only needed columns:

   $query->select('p.id, p.value');