[Chartjs]-Loading Laravel Chart consoletvs/charts:7.*

i am the author.

Some of the issues may be releated to laravel charts, and others to chartisan. I am doing my best to keep everybody happy here but seems people are not happy with the docs.

I am creating an example page with all sorts of examples on chartisan’s page.

Remember laravel charts now only acts as a wrapper around chartisan’s php package.

Its such a big project for a single person and i like to see constructive feedback.

What exacly isn’t clear from the chartisan docs?

try to run without public ?array $middlewares = ['auth']; set.
just public ?array $middlewares = [];

^^^^^^^^^^ this is how I used with Laravel package ^^^^^^^^^^

vvvvvvvvvvvvvvvvvvvv This is how I use now vvvvvvvvvvvvvvvvvvvv

After some time using the ConsoleTV/Charts I decided not to use it like Laravel package.
I get rid of any use of it and use the javascript version only.

To get the data I did this:

Create a controller named whatever you want and put a function like this:

    public function chartSample1()
    {
        $data = array(
            "chart" => array(
                "labels" => ["First", "Second", "Third"]
            ),
            "datasets" => array(
                array("name" => "Sample 1", "values" => array(10, 3, 7)),
                array("name" => "Sample 2", "values" => array(1, 6, 2)),
            )
        );

        return $data;
    }

On the "routes/web.php" added:

Route::get('/chartSample1', 'MyChartController@chartSample1')->name('chartSample1');

And on the page:

@extends('layouts.app')

@section('content')
<div class="row justify-content-center">
    <div class="col-sm-12 align-self-center">
        <div class="row">
            <div class="col-lg-3">
                <div class="card shadow p-3 mb-5 bg-white rounded">
                    <div class="card-body">
                        <h5 class="card-title">Special title treatment</h5>

                        <div id="chart" style="height: 300px;"></div>

                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="card shadow p-3 mb-5 bg-white rounded">
                    <div class="card-body">
                        <h5 class="card-title">Special title treatment</h5>
                        <div id="chart2" style="height: 300px;"></div>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="card shadow p-3 mb-5 bg-white rounded">
                    <div class="card-body">
                        <h5 class="card-title">Special title treatment</h5>
                        <div id="chart3" style="height: 300px;"></div>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="card shadow p-3 mb-5 bg-white rounded">
                    <div class="card-body">
                        <h5 class="card-title">Special title treatment</h5>
                        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


{{-- This script has more features --}}
<script src="https://unpkg.com/chart.js/dist/Chart.min.js"></script>
<script src="https://unpkg.com/@chartisan/chartjs/dist/chartisan_chartjs.js"></script>

{{-- 
<script src="https://unpkg.com/echarts/dist/echarts.min.js"></script>
<script src="https://unpkg.com/@chartisan/echarts/dist/chartisan_echarts.js"></script> 
--}}

</script>
<script>
    const chart = new Chartisan({
        el: '#chart',
        url: "{{ route('chartSample1') }}",
        hooks: new ChartisanHooks()
        .colors(['#ECC94B', '#4299E1'])
        .legend()
        loader: {
            color: '#ff00ff',
            size: [30, 30],
            type: 'bar',
            textColor: '#11ff00',
            text: 'Loading some chart data...',
        }
    });
    
    const chart2 = new Chartisan({
        el: '#chart2',
        data: {
            chart: { "labels": ["First", "Second", "Third"] },
            datasets: [
                { "name": "Sample 1", "values": [10, 3, 7] },
                { "name": "Sample 2", "values": [5, 6, 2] }
            ],
        },
        hooks: new ChartisanHooks()
            .colors(['#ECC94B', '#4299E1', '#AAEE11'])
            .legend({ position: 'left' })
            .beginAtZero()
            .datasets([{ type: 'line', fill: false }, 'bar']),
    });

    const chart3 = new Chartisan({
        el: '#chart3',
        data: {
            chart: { "labels": ["First", "Second", "Third"] },
            datasets: [
                { "name": "Sample 1", "values": [10, 3, 7] },
            ],
        },
        hooks: new ChartisanHooks()
            .colors(['#ECC94B', '#4299E1', '#AAEE11'])
            .datasets([{ type: 'pie', fill: true }, 'pie']),
    });

</script>

I had a similar problem and I’ve been able to solve it. The configuration in your chart class is not compulsory. You can choose to ignore them.

Your render url is also wrong. It is supposed to be in snake case:

//SampleChart will be
@chart('sample_chart')

//PostData will be
@chart('post_data')

If you specified the route in your Chart class, you will have to use that: @chart('your_route'). If you don’t know your route, use the php artisan route:list -c command to check.

If you want to specify the type of chart, you have to use hooks.

I ran into a bit of an issue myself. Everything Works for line chart and bar chart, but i can’t present a pie chart. The Doughnut is also not working.