chart

Hello everyone, Is there some way to display in the dashboard, more than one graph in a single widget?

18 Replies

If you create a custom dashboard, you may be able to customize the Blade view and group your charts into a single Card component. (still multiple widgets, but visually grouped)

malebestia.OP•2y ago

thanks for your answer, but where can I find some examples of use, in the documentation it seems to me there is written only to create the file

ZedoX•2y ago

Multiple lines on the graph? or multiple graphs? what wrong with multiple widgets?

malebestia.OP•2y ago

multiple graphs, because if I make multiple widgets, I should have the same header, as they are the result of the same set of input parameters, but displayed differently (for example average, monthly or weekly).

ZedoX•2y ago

You could create a single chart and use filters?

malebestia.OP•2y ago

I could, but I need to figure out how it works, I can't find a working example

Patrick Boivin•2y ago

If you create a custom Dashboard page with a custom view, this is what I'm thinking about:

<x-filament::page class="filament-dashboard-page">
    <x-filament::widgets
        :widgets="[
            Filament\Widgets\AccountWidget::class,
            Filament\Widgets\FilamentInfoWidget::class,
        ]"
        :columns="2"
    />

    <x-filament::card>
        <x-filament::widgets
            :widgets="[
                App\Filament\Widgets\ChartOne::class,
                App\Filament\Widgets\ChartTwo::class,
                App\Filament\Widgets\ChartThree::class,
            ]"
            :columns="2"
        />
    </x-filament::card>
</x-filament::page>

<x-filament::page class="filament-dashboard-page">
    <x-filament::widgets
        :widgets="[
            Filament\Widgets\AccountWidget::class,
            Filament\Widgets\FilamentInfoWidget::class,
        ]"
        :columns="2"
    />

    <x-filament::card>
        <x-filament::widgets
            :widgets="[
                App\Filament\Widgets\ChartOne::class,
                App\Filament\Widgets\ChartTwo::class,
                App\Filament\Widgets\ChartThree::class,
            ]"
            :columns="2"
        />
    </x-filament::card>
</x-filament::page>

https://filamentphp.com/docs/2.x/admin/dashboard/getting-started#customizing-the-dashboard-page

malebestia.OP•2y ago

where can i find an example of a graph with filter?

ZedoX•2y ago

https://filamentphp.com/docs/2.x/admin/dashboard/charts#filtering-chart-data

Filament

Charts - Dashboard - Admin Panel - Filament

The elegant TALL stack admin panel for Laravel artisans.

ZedoX•2y ago

It's in the docs

malebestia.OP•2y ago

https://filamentphp.com/docs/2.x/admin/dashboard/charts#available-chart-types in this link I read that there is a special class to use a specific graph. Is there a generic graph class where I can specify which graph I need? or rather, is there any method I can use to specify the type of graph I need?

Filament

Charts - Dashboard - Admin Panel - Filament

The elegant TALL stack admin panel for Laravel artisans.

ZedoX•2y ago

Yes there is Filament\Widgets\ChartWidget https://github.com/filamentphp/filament/blob/2.x/packages/admin/src/Widgets/ChartWidget.php You can use the getType method to specify the type of chart For an example see: https://github.com/filamentphp/filament/blob/2.x/packages/admin/src/Widgets/BarChartWidget.php

malebestia.OP•2y ago

this example is great: https://github.com/filamentphp/filament/blob/2.x/packages/admin/src/Widgets/BarChartWidget.php but unfortunately in the mount I can't pass a type string parameter, because it is incompatible with the ChartWidget class mount declaration

GitHub

filament/packages/admin/src/Widgets/BarChartWidget.php at 2.x · fil...

Admin panel, form builder and table builder for Laravel. Built with the TALL stack. Designed for humans. - filament/packages/admin/src/Widgets/BarChartWidget.php at 2.x · filamentphp/filament

malebestia.OP•2y ago

can I pass parameters to individual elements of this array? :widgets="[ App\Filament\Widgets\ChartOne::class, App\Filament\Widgets\ChartTwo::class, App\Filament\Widgets\ChartThree::class, ]"in my case I would pass directly the data to display, or even a simple string

Patrick Boivin•2y ago

:data="[
    'message' => 'Hello',
]"

:data="[
    'message' => 'Hello',
]"

Oh sorry, this is for all widgets. I don't think there's an easy way to do individual widgets. Have a look at the template : vendor/filament/filament/resources/views/components/widgets.blade.php Maybe this can give you an idea to handle the widgets individually.

marco76tv•2y ago

and how passing variable from custom dashboard ?

malebestia.OP•2y ago

this is a found solution, even if I don't really like it and that it could be done better
in laravel\config\filament.php dashboard changed

    'pages' => [
        'namespace' => 'App\\Filament\\Pages',
        'path' => app_path('Filament/Pages'),
        'register' => [
            \Modules\MyModule\Filament\Pages\Dashboard::class,
        ],
    ],

    'pages' => [
        'namespace' => 'App\\Filament\\Pages',
        'path' => app_path('Filament/Pages'),
        'register' => [
            \Modules\MyModule\Filament\Pages\Dashboard::class,
        ],
    ],

laravel\Modules\MyModule\Filament\Pages\Dashboard.php

<?php

 namespace Modules\MyModule\Filament\Pages;

use Filament\Pages\Dashboard as BasePage;
use Modules\MyModule\Models\QuestionChart;
use Illuminate\Database\Eloquent\Collection;
use Modules\MyModule\Filament\Widgets\ChartsWidget;
use Modules\MyModule\Filament\Widgets\StatsOverview;
use Modules\MyModule\Filament\Widgets\ChartsOverview;
use Modules\MyModule\Filament\Resources\QuestionChartResource\Widgets\WidgetTest;

class Dashboard extends BasePage
{
     public function getWidgets(): array{
         return [
            ChartsWidget::class,
         ];
     }

}

<?php

 namespace Modules\MyModule\Filament\Pages;

use Filament\Pages\Dashboard as BasePage;
use Modules\MyModule\Models\QuestionChart;
use Illuminate\Database\Eloquent\Collection;
use Modules\MyModule\Filament\Widgets\ChartsWidget;
use Modules\MyModule\Filament\Widgets\StatsOverview;
use Modules\MyModule\Filament\Widgets\ChartsOverview;
use Modules\MyModule\Filament\Resources\QuestionChartResource\Widgets\WidgetTest;

class Dashboard extends BasePage
{
     public function getWidgets(): array{
         return [
            ChartsWidget::class,
         ];
     }

}

laravel\Modules\MyModule\Filament\Widgets\ChartsWidget.php
where I pass the parameters I need, in this case the ids

<?php

namespace Modules\MyModule\Filament\Widgets;

use Filament\Widgets\Widget;

class ChartsWidget extends Widget
{
    protected static string $view = 'MyModule::filament.widgets.charts';

    public function getQuestionCharts(){
        return [4,5,6];
    }
}

<?php

namespace Modules\MyModule\Filament\Widgets;

use Filament\Widgets\Widget;

class ChartsWidget extends Widget
{
    protected static string $view = 'MyModule::filament.widgets.charts';

    public function getQuestionCharts(){
        return [4,5,6];
    }
}

his blade

<x-filament::widget>
    @foreach($this->getQuestionCharts() as $questionChart)
    <x-filament::card >
        <livewire:question-chart :questionChartId="$questionChart" />
    </x-filament::card>
    @endforeach
</x-filament::widget>

<x-filament::widget>
    @foreach($this->getQuestionCharts() as $questionChart)
    <x-filament::card >
        <livewire:question-chart :questionChartId="$questionChart" />
    </x-filament::card>
    @endforeach
</x-filament::widget>

component created and called laravel\Modules\MyModule\Http\Livewire\QuestionChart.php

<?php

declare(strict_types=1);

namespace Modules\MyModule\Http\Livewire;

use Livewire\Component;
use Filament\Widgets\ChartWidget;
use Illuminate\Contracts\Support\Renderable;
use Illuminate\Database\Eloquent\Collection;
/**
 * ---.
 */
class QuestionChart extends /*Component*/ ChartWidget {

    public string $questionChartId;

    public function mount(){
        parent::mount();
        [$questionChartId]=func_get_args();
        $this->questionChartId=strval($questionChartId);
    }

    protected function getType(): string
    {
        return 'line';
    }

    protected function getHeading(): string
    {
        return 'questionChartId['.$this->questionChartId.']';
    }

    protected function getData(): array
    {
        return [
            'datasets' => [
                [
                    'label' => 'Blog posts created',
                    'data' => [0, 5, 2, 21, 32, 45, 74, 65, 45, 77, 89],
                ],
            ],
            'labels' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        ];
    }
}

<?php

declare(strict_types=1);

namespace Modules\MyModule\Http\Livewire;

use Livewire\Component;
use Filament\Widgets\ChartWidget;
use Illuminate\Contracts\Support\Renderable;
use Illuminate\Database\Eloquent\Collection;
/**
 * ---.
 */
class QuestionChart extends /*Component*/ ChartWidget {

    public string $questionChartId;

    public function mount(){
        parent::mount();
        [$questionChartId]=func_get_args();
        $this->questionChartId=strval($questionChartId);
    }

    protected function getType(): string
    {
        return 'line';
    }

    protected function getHeading(): string
    {
        return 'questionChartId['.$this->questionChartId.']';
    }

    protected function getData(): array
    {
        return [
            'datasets' => [
                [
                    'label' => 'Blog posts created',
                    'data' => [0, 5, 2, 21, 32, 45, 74, 65, 45, 77, 89],
                ],
            ],
            'labels' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        ];
    }
}

I repeat, it is a solution, but it could be done better

malebestia.OP•2y ago

I managed to view some graphs inside the card (see photo). this is the blade code

<x-filament::card :heading="$title">
     @foreach($charts as $chart)
         <livewire:question-chart :chart="$chart" />
     @endforeach
</x-filament::card>

<x-filament::card :heading="$title">
     @foreach($charts as $chart)
         <livewire:question-chart :chart="$chart" />
     @endforeach
</x-filament::card>

unfortunately each graph is giant and one above the other, in a single column. how can I change the blade so that the graphs are displayed on one line?

Gaming

Programming

chart