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

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.