Chartisan/Laravel - > "Call to undefined method" error

Question

I am trying to figure out how to use Chartisan and my controllers in Laravel. Having spend a couple of days on this, I have to admit that I am missing some fundamental because I understand the error, I just can't fix it..

What I have done so far is followed this https://charts.erik.cat/guide/installation.html#publish-the-configuration-file and reading multiple other guides online on how to solve it. If I stick to the guide, with the basic example then it works fine, but I want to create multiple charts, based on id/user variables which require I get the information from my database..

My problem is: "Call to undefined method App\Charts\SampleChart::labels()"

Are there anyone who has experience with this issue and tell me how to fix?

SampleChart.php (location: app/Charts/SampleChart.php)

declare(strict_types = 1);

namespace App\Charts;

use Chartisan\PHP\Chartisan;
use ConsoleTVs\Charts\BaseChart;
use Illuminate\Http\Request;

class SampleChart extends BaseChart
{
    /**
     * Handles the HTTP request for the given chart.
     * It must always return an instance of Chartisan
     * and never a string or an array.
     */
    public ?string $name = 'my_chart';
    public ?string $routeName = 'my_chart';

    public function handler(Request $request): Chartisan
    {
        return Chartisan::build();
    }
}

My Controller is:

namespace App\Http\Controllers;

use App\Charts\SampleChart;
use App\Charts\ExerciseInsight;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;

class ExerciseInsightChartController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(Request $request): Chartisan
    {
        $samplechart = new Samplechart;

        $exercise = 16;
        $created_at = [];
        $exercise_name = [];
        $exercise_weight = [];
        $exercise_rep = [];
        $records = DB::table('dump_all_records')->where('exercise_id',"=", $exercise)->get();
        foreach ($records as $record)
        {
            array_push($created_at, $record->created_at);
            array_push($exercise_name, $record->exercise_name);
            array_push($exercise_weight, $record->exercise_unit_value);
            array_push($exercise_rep, $record->exercise_round_value);
        }
        // dd($samplechart);
        
        $samplechart->labels($created_at);
        $samplechart->dataset(['Weight','line', $exercise_weight]);
        // $samplechart->dataset('Reps','line', $exercise_rep);

        return view('insight.exercise_insight', compact('samplechart'));

    }
}

my view is:

    <!-- Charting library -->
    <script src="https://unpkg.com/echarts/dist/echarts.min.js"></script>
    <!-- Chartisan -->
    <script src="https://unpkg.com/@chartisan/echarts/dist/chartisan_echarts.js"></script>
    <!-- Chart's container -->
    <div id="chart" style="height: 300px;"></div>
    <script>
        const chart = new Chartisan({
            el: '#chart',
            url: "@chart('my_chart')",
            hooks: new ChartisanHooks()
            .colors(['#4299E1','#FE0045','#C07EF1','#67C560','#ECC94B'])
            // .datasets([{ type: 'line', fill: false }, 'bar'])
            .datasets(
                [
                    {
                        type: 'line',
                        fill: true ,fillColor : 'rgba(38,198,218,1)',
                        strokeColor         : 'rgba(38,198,218,0)',
                        pointColor          : '#26c6da',
                        pointStrokeColor    : 'rgba(38,198,218,0)',
                        pointHighlightFill  : '#fff',
                        pointHighlightStroke: 'rgba(38,198,218,1)',
                    },
                    {
                        type: 'line',
                        fill: true
                    }
                ]
            )
            .axis(true)
            .tooltip()
        });
    </script>

Answer 1

Since the documentation has wroten, you can pass the data manually using data : {...} property.

So, the first step is call the Chartisan class, but don't forget to call the ServerData Class first, because the Chartisan Class constructor need parameter a ServerData Class.

In YourController.php

use Chartisan\PHP\Chartisan;
use Chartisan\PHP\ServerData;

In your method,

public function index () {
    $serverdata = new ServerData;
    $chart = new Chartisan($serverdata);
    $chart->labels(
            ['First', 'Second', 'Third', 'Four', 'Five',
            'Six', 'Seven', 'Eight', 'Nine', 'Ten']);

    /**
    * This your query will be placed,
    * just for example :
    */
    for ($i = 1; $i < mt_rand(5,9); $i++) {
        $chart->dataset('Attribute '. $i, [
            mt_rand(3,50), mt_rand(3,50), mt_rand(3,50), mt_rand(3,50), mt_rand(3,50),
            mt_rand(3,50), mt_rand(3,50), mt_rand(3,50), mt_rand(3,50), mt_rand(3,50)
        ]);
    }

    /**Please remember on this chartisan version,
    * Chartisan class will return an Object
    * But the frontend loader just read a JSON format only.
    * so it's easily to call Chartisan toJSON method.
    * */
    $chart = $chart->toJSON();

    return view('your.view', [
        'chart' => $chart,
    ]);

}

Next, in your blade view, this must be same scheme to load the chart according the documentation. But don't forget to escape $chart variable at blade syntax.

<script>
    const chart = new Chartisan({
      el: '#chart',
      data: {!! $chart !!},
      hooks: new ChartisanHooks()
      .title({
        textAlign: 'center',
        left: '50%',
        text: 'Example Chart Title',
      })
      .colors()
      .datasets('line')
      .axis(true)
      .tooltip()
    });
</script>

And the html part,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">

        <!-- here your chart-->
        <div id="chart" style="height: 300px;"></div>

    </div>
</body>
</html>

CMIIW. Hope its help. Thank you.