Chartjs Bundle Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require avegao/chartjs-bundle
   

   Ensure your composer.json aligns with Symfony 2.7/3.0 constraints.

2. Enable the Bundle: Add to config/bundles.php:

   Avegao\ChartJsBundle\AvegaoChartJsBundle::class => ['all' => true],
   

3. Basic Usage: Create a Twig template (templates/chart.html.twig):

   {{ avegao_chartjs_chart({
       type: 'bar',
       data: {
           labels: ['Jan', 'Feb', 'Mar'],
           datasets: [{
               label: 'Sales',
               data: [10, 20, 30]
           }]
       }
   }) }}
   

4. First Use Case: Render a simple bar chart in a Symfony controller:

   // src/Controller/ChartController.php
   namespace App\Controller;
   use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
   use Symfony\Component\HttpFoundation\Response;
   
   class ChartController extends AbstractController {
       public function showChart(): Response {
           return $this->render('chart.html.twig');
       }
   }
   

Implementation Patterns

Common Workflows

1. Dynamic Data Binding: Pass PHP arrays to Twig for runtime-generated charts:

   {% set chartData = {
       labels: ['Q1', 'Q2', 'Q3'],
       datasets: [{
           label: 'Revenue',
           data: {{ app.data|json_encode }}
       }]
   } %}
   {{ avegao_chartjs_chart(chartData) }}
   

2. Reusable Chart Components: Extend Twig with custom chart macros:

   {% macro lineChart(data) %}
       {{ avegao_chartjs_chart({
           type: 'line',
           data: data,
           options: { responsive: true }
       }) }}
   {% endmacro %}
   

3. Integration with Symfony Forms: Use chart data from form submissions:

   // Controller
   $form = $this->createForm(ChartDataType::class);
   if ($form->isSubmitted()) {
       $data = $form->getData();
       return $this->render('chart.html.twig', ['data' => $data]);
   }
   

4. API-Driven Charts: Fetch data via API and render charts:

   {% set apiData = app.request.get('apiData') %}
   {{ avegao_chartjs_chart({
       type: 'pie',
       data: apiData
   }) }}
   

Advanced Patterns

• ChartJS Options: Customize chart behavior via options key:

  {{ avegao_chartjs_chart({
      type: 'doughnut',
      data: { ... },
      options: {
          cutoutPercentage: 50,
          plugins: { datalabels: { display: true } }
      }
  }) }}
  

• Event Handlers: Attach JavaScript events:

  {{ avegao_chartjs_chart({
      type: 'scatter',
      data: { ... },
      options: {
          onClick: "function(e) { console.log(e); }"
      }
  }) }}
  

Gotchas and Tips

Common Pitfalls

1. Symfony Version Mismatch:

   • The bundle only supports Symfony 2.7/3.0. Use symfony/chartjs-bundle for newer versions.
   • Fix: Check composer.json constraints and update dependencies if needed.

2. Twig Template Caching:

   • Charts may not update if Twig cache is enabled. Clear cache after changes:

     php bin/console cache:clear
     

3. JavaScript Conflicts:

   • Ensure ChartJS is loaded after the bundle’s assets:

     {{ parent() }} {# In base.html.twig #}
     

   • Debug: Check browser console for Chart is not defined errors.

4. Data Serialization:

   • Nested PHP arrays must be explicitly JSON-encoded in Twig:

     {{ app.data|json_encode|raw }} {# Not {{ app.data }} #}
     

Debugging Tips

• Inspect Rendered HTML: Open browser dev tools (F12) to verify the <canvas> element and data attributes. Example output:

  <canvas data-chartjs='{"type":"bar","data":{...}}'></canvas>
  

• Log ChartJS Errors: Wrap chart initialization in a try-catch for debugging:

  window.onload = function() {
      try {
          new Chart(document.getElementById('myChart'), JSON.parse(canvas.dataset.chartjs));
      } catch (e) {
          console.error('ChartJS Error:', e);
      }
  };
  

Extension Points

1. Custom Chart Types: Override the bundle’s Twig extension to add support for non-standard ChartJS types:

   // src/Twig/Extension/CustomChartExtension.php
   class CustomChartExtension extends \Twig_Extension {
       public function getFunctions() {
           return [
               new \Twig_SimpleFunction('custom_chart', [$this, 'renderCustomChart']),
           ];
       }
   }
   

2. Asset Overrides: Replace default ChartJS assets by publishing and overriding:

   php bin/console assets:install public
   

   Then copy custom JS/CSS to public/bundles/avegaochartjs/.

3. Configuration: Extend bundle config in config/packages/avegao_chartjs.yaml:

   avegao_chartjs:
       default_options:
           responsive: true
           maintainAspectRatio: false