ChartJs multiple datasets

[Read2uk]

Hello all,

Can someone advise how can I get ChartJS to look like the one in the demo page:

Is there a repository with the demo that I can look at that specific chart controller please, I am not able to get multiple datasets showing at the same time.

Thanks all

[backpack-ai-bot[bot]]

To create a ChartJS chart with multiple datasets in Backpack, similar to the one in the demo page, you can follow these steps:

1. Create a chart controller that extends Backpack\CRUD\app\Http\Controllers\ChartController.
2. In the setup() method, configure your chart with multiple datasets.
3. Define the data for each dataset in the data() method.

Here's an example of how you can create a chart with multiple datasets:

<?php

namespace App\Http\Controllers\Admin\Charts;

use Backpack\CRUD\app\Http\Controllers\ChartController;
use ConsoleTVs\Charts\Classes\Chartjs\Chart;

class NewEntriesChartController extends ChartController
{
    public function setup()
    {
        $this->chart = new Chart();

        // Set labels for the dataset points
        $labels = [];
        for ($days_backwards = 30; $days_backwards >= 0; $days_backwards--) {
            $labels[] = $days_backwards.' days ago';
        }
        $this->chart->labels($labels);

        // Set URL for AJAX data loading
        $this->chart->load(backpack_url('charts/new-entries'));

        // Optional configurations
        $this->chart->minimalist(false);
        $this->chart->displayLegend(true);
    }

    public function data()
    {
        // Simulate data for multiple datasets
        $users = [/* ... */];
        $articles = [/* ... */];
        $categories = [/* ... */];
        $tags = [/* ... */];

        // Add multiple datasets
        $this->chart->dataset('Users', 'line', $users)
            ->color('rgb(77, 189, 116)')
            ->backgroundColor('rgba(77, 189, 116, 0.4)');

        $this->chart->dataset('Articles', 'line', $articles)
            ->color('rgb(96, 92, 168)')
            ->backgroundColor('rgba(96, 92, 168, 0.4)');

        $this->chart->dataset('Categories', 'line', $categories)
            ->color('rgb(255, 193, 7)')
            ->backgroundColor('rgba(255, 193, 7, 0.4)');

        $this->chart->dataset('Tags', 'line', $tags)
            ->color('rgba(70, 127, 208, 1)')
            ->backgroundColor('rgba(70, 127, 208, 0.4)');
    }
}

This example is based on the code provided in the Backpack documentation for Chart widgets.

To use this chart in your Backpack admin panel, you can add it as a widget:

[
    'type' => 'chart',
    'controller' => \App\Http\Controllers\Admin\Charts\NewEntriesChartController::class,
    // Other widget configuration options...
]

Unfortunately, I don't have information about a specific repository with the demo chart controller. However, the example provided above should give you a good starting point for creating a chart with multiple datasets.

Remember to adjust the data generation in the data() method to match your specific use case. The example uses simulated data, but you should replace it with actual data from your models or other data sources.

Backpack Documentation - Chart Widget

Relevant sources:

Github Issue (closed): [Feature Request] multiple charts from one controller
Github Issue (closed): [Feature Request] multiple charts from one controller
Github Issue (closed): [Feature Request] multiple charts from one controller
Github Issue (closed): [Feature Request] multiple charts from one controller
Github Issue (closed): [Feature Request] multiple charts from one controller
Widgets|Chart PRO Part 3
Widgets|Chart PRO Part 4
Github Issue (closed): [4.1][Feature] New widget: chart
Github Issue (closed): [Feature Request] multiple charts from one controller
[4.1.0][Feature][Merged] Chart widget + ChartController

[Read2uk]

Still not working, this is my setup method, I am not using the data() method

public function setup()
{
    $this->chart = new Chart();

    $months =[];
    $number_per_months =[];
    $total_fee_usd =[];
    foreach ($this->assignmentsPerMonth() as $numbers){
        $months[] = $numbers->month;
        $number_per_months[] = $numbers->number;
        $total_fee_usd[] = $numbers->total_fee_usd;
    }

    //Datasets
    $this->chart->dataset('Total Fee', 'line', array_reverse($total_fee_usd));
    $this->chart->dataset('Numbers', 'bar', array_reverse($number_per_months))
        ->color('rgba(205, 32, 31, 1)')
        ->backgroundColor('rgba(205, 32, 31, 0.4)');


    // MANDATORY. Set the labels for the dataset points
    $this->chart->labels(array_reverse($months));
    
    // RECOMMENDED. Set URL that the ChartJS library should call, to get its data using AJAX.
    $this->chart->load(backpack_url('charts/monthly-assignments'));

    // OPTIONAL
     $this->chart->minimalist(false);
     $this->chart->displayLegend(true);
}

[tabacitu]

Heads-up @Read2uk - the AI doesn't answer to follow-ups right now. Only to your first question.

[tabacitu]

Exactly, the easiest way would be to take a look at how that's done in our demo. See:

• the dashboard blade file here, which references:
• this NewEntriesChartController;

[Read2uk]

Salut @tabacitu

The AI did a pretty good job! I just managed to sort the issues I was having! thank you