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

by

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.

Leave a comment