Getting Started

Minimal Steps to First Chart

Installation

composer require aldaflux/chartjs-bundle dev-master

Add to config/bundles.php:

return [
    // ...
    Aldaflux\ChartjsBundle\ChartjsBundle::class => ['all' => true],
];

Basic Configuration Create config/packages/aldaflux_chartjs.yaml with default settings (see README).

Asset Setup

php bin/console assets:install public

Add to your base template (base.html.twig):

<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('bundles/chartjsbundle/js/Chart.min.js') }}"></script>

First Controller

// src/Controller/ChartController.php
namespace App\Controller;
use Aldaflux\ChartjsBundle\Model\ChartBuilderData;
use Aldaflux\ChartjsBundle\Utils\TypeCharjs;
use Aldaflux\ChartjsBundle\Utils\TypeColors;

class ChartController extends AbstractController {
    public function simplePie() {
        $chart = new ChartBuilderData();
        $chart->setType(TypeCharjs::CHARJS_PIE);
        $chart->setLabels(['Q1', 'Q2', 'Q3', 'Q4']);
        $chart->setData(['Sales' => [12, 19, 3, 5]]);
        $chart->setBackgroundColor([TypeColors::red, TypeColors::blue, TypeColors::green, TypeColors::yellow]);

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

First Twig Template

{% block body %}
    <canvas id="myPieChart"></canvas>
    {{ chartjs_canvas('myPieChart', 500, 300, chart) }}
{% endblock %}

Implementation Patterns

Common Workflows

1. Database-Driven Charts

Use the transformer service to convert Doctrine collections into Chart.js data:

// Controller
$grafica = $this->get('app.chartjs.transformer_char')
    ->transform(
        TypeCharjs::CHARJS_BAR,
        $repository->findAll(),
        'region',       // labels
        'metric',       // dataset label
        [],             // options
        'value'         // data field
    )
    ->toArray();

2. Dynamic Chart Updates

For AJAX-driven updates (e.g., real-time dashboards):

// Frontend (JavaScript)
function updateChart(newData) {
    const ctx = document.getElementById('myChart').getContext('2d');
    const chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: newData.labels,
            datasets: [{
                label: 'Dynamic Data',
                data: newData.data,
                backgroundColor: newData.colors
            }]
        }
    });
}

3. Reusable Chart Components

Create a base template for consistent styling:

{# templates/components/chart_wrapper.html.twig #}
<div class="chart-container">
    <h3>{{ title|default('Chart') }}</h3>
    <canvas id="{{ id }}"></canvas>
    {{ chartjs_canvas(id, width, height, chart) }}
</div>

4. Configuration Inheritance

Extend global config per chart:

# config/packages/aldaflux_chartjs.yaml
chartjs:
    defaults:
        animation: { duration: 500 }
    charts:
        dashboard:
            animation: { duration: 1000 }
            responsive: true

Integration Tips

Laravel-Symfony Bridge: Use Symfony’s HttpFoundation components (e.g., Response) in Laravel via symfony/http-foundation.

Asset Management: For Laravel mix/webpack, alias the bundle’s JS:

// webpack.mix.js
mix.copy('vendor/aldaflux/chartjs-bundle/Resources/public/js/Chart.min.js', 'public/js/');

Doctrine Integration: Pair with doctrine/orm for seamless database-to-chart pipelines:

$qb = $entityManager->createQueryBuilder()
    ->select('z.region, AVG(m.value) as avg_value')
    ->from('App\Entity\Metric', 'm')
    ->join('m.region', 'z')
    ->groupBy('z.region');
$grafica = $this->get('app.chartjs.transformer_char')->transform(
    TypeCharjs::CHARJS_BAR,
    $qb->getQuery()->getResult(),
    'region',
    'Average Metric',
    [],
    'avg_value'
);

Gotchas and Tips

Pitfalls

Asset Paths in Laravel
- The bundle assumes Symfony’s asset system. In Laravel, manually copy assets to public/bundles/chartjsbundle/ or configure a symlink:
```
ln -s vendor/aldaflux/chartjs-bundle/Resources/public public/bundles/chartjsbundle
```
Chart.js Version Lock
- The bundle ships with Chart.js 2.4.0. For newer features (e.g., v3.x), override the JS file or use a CDN:
```
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1"></script>
```

Twig Extension Conflicts

If chartjs_canvas fails, ensure the Twig extension is registered. In Laravel, manually load it in AppServiceProvider:

public function boot() {
    $this->loadTwigExtensions();
}
protected function loadTwigExtensions() {
    $loader = new \Twig\Loader\FilesystemLoader([$this->getProjectDir().'/vendor/aldaflux/chartjs-bundle/Resources/views']);
    $twig = new \Twig\Environment($loader);
    $twig->addExtension(new \Aldaflux\ChartjsBundle\Twig\ChartjsExtension());
}

Configuration Overrides
- Global config in aldaflux_chartjs.yaml overrides per-chart settings. Use setOptions() in ChartBuilderData for chart-specific tweaks:
```
$chart->setOptions('{
    responsive: true,
    plugins: { title: { display: true } }
}');
```

Debugging Tips

Inspect Generated HTML/JS
- Check the rendered <canvas> and its data-* attributes for malformed JSON:
```
{{ dump(chart) }}  {# Debug the ChartBuilderData object #}
```

Chart.js Console Errors

Enable Chart.js debug mode:

window.onload = function() {
    Chart.defaults.global.animation = false; // Disable animations for debugging
};

Transformer Service Issues

Validate input data structure:

// Example valid input for transformer
$data = [
    ['region' => 'Europe', 'value' => 100],
    ['region' => 'Asia', 'value' => 200],
];

Extension Points

Custom Chart Types Extend ChartBuilderData to support non-standard Chart.js types:

namespace App\Model;
use Aldaflux\ChartjsBundle\Model\ChartBuilderData;

class CustomChartData extends ChartBuilderData {
    public function setCustomType(string $type) {
        $this->type = 'custom:' . $type;
    }
}

Dynamic Data Fetching Create a controller listener to auto-fetch data:

// src/EventListener/ChartDataListener.php
namespace App\EventListener;
use Symfony\Component\HttpKernel\Event\ControllerEvent;

class ChartDataListener {
    public function onKernelController(ControllerEvent $event) {
        $controller = $event->getController();
        if (is_array($controller) && $controller[0] instanceof ChartController) {
            $data = $this->fetchDynamicData();
            $event->getRequest()->attributes->set('chartData', $data);
        }
    }
}

Theme Support Add a theme service to switch color schemes:

// src/Service/ChartTheme.php
namespace App\Service;
use Aldaflux\ChartjsBundle\Utils\TypeColors;

class ChartTheme {
    public function getDarkTheme(): array {
        return [
            TypeColors::dark_gray,
            TypeColors::dark_blue,
            TypeColors::dark_purple,
        ];
    }
}

Usage:

$chart->setBackgroundColor($this->get('app.chart_theme')->getDarkTheme());

Laravel Mix Integration Override the bundle’s

Chartjs Bundle Laravel Package