F
Filament•4w ago
John

Add ChartJS charts to custom page (not widget)

I want to add charts to my custom page, so I'm free to tweak layout. Since ChartJS seems fine, and it's already in Filament, I tried to use a similar approach to what I found in /vendor/filament/widget/resources/views/chart-widget.blade.php. 
<x-filament::page>
    <section>
        <h2>Question Statistics</h2>
        @foreach ($questionStats as $question)
            <div class="mt-4">
                <h3>{{ $question['question'][app()->getLocale()] }}</h3>
                <div
                    x-load
                    x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('chart', 'filament/widgets') }}"
                    x-data="chart({
                        type: 'pie',
                        options: {},
                        cachedData: {
                            labels: @js($question['options']->pluck('label')),
                            datasets: [{
                                data: @js($question['options']->pluck('percentage')),
                                backgroundColor: ['#F87171', '#FB923C', '#FACC15', '#4ADE80', '#60A5FA', '#A78BFA', '#F472B6'],
                            }],
                        },
                    })"
                    wire:ignore
                >
                    <canvas
                        x-ref="canvas"
                        style="max-height: 500px"
                    ></canvas>
                </div>
            </div>
        @endforeach
    </section>
</x-filament::page>
<x-filament::page>
    <section>
        <h2>Question Statistics</h2>
        @foreach ($questionStats as $question)
            <div class="mt-4">
                <h3>{{ $question['question'][app()->getLocale()] }}</h3>
                <div
                    x-load
                    x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('chart', 'filament/widgets') }}"
                    x-data="chart({
                        type: 'pie',
                        options: {},
                        cachedData: {
                            labels: @js($question['options']->pluck('label')),
                            datasets: [{
                                data: @js($question['options']->pluck('percentage')),
                                backgroundColor: ['#F87171', '#FB923C', '#FACC15', '#4ADE80', '#60A5FA', '#A78BFA', '#F472B6'],
                            }],
                        },
                    })"
                    wire:ignore
                >
                    <canvas
                        x-ref="canvas"
                        style="max-height: 500px"
                    ></canvas>
                </div>
            </div>
        @endforeach
    </section>
</x-filament::page>
I don't see charts rendered. There are no console errors. I do see chart.js being loading in network tab. In browser console, both chart and Chart are undefined. (If I try this on a Filament Chart Widget, Chart class is known.) Should I try to fix this and am I missing some steps Filament does internally? Or should I approach this in a completely different way?
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?