I am new to laravel charts.I thought following the documentation to make a sample chart will be a stepping stone. Having followed the documentation form adding the package into my project using poser require consoletvs/charts:7.* and publishing the configuration file by running php artisan vendor:publish --tag=charts and then creating a new chart with the mand: php artisan make:chart SampleChart a SampleChart was made under App\Chart

In the SampleChart class i made the following chart configuration

 public ?string $name = 'SampleChart';
  public ?string $routeName = 'SampleChart';
   public ?array $middlewares = ['auth'];

I then manually register using the App\Providers\AppServiceProvider with the code as stated from the documentation

 public function boot(Charts $charts)
        {
            $charts->register([
                \App\Charts\SampleChart::class
            ]);
        }

On rendering the chart in my views; I put in the following code

<div id="chart" style="height: 300px;">    </div>
<!-- Charting library -->
 
<script src="{{ asset('js/Chart.min.js') }}"></script>//downloaded from .min.js
<!-- Chartisan -->
<script src="{{ asset('js/chartisan_chartjs.js') }}">
</script> //downloaded from /@chartisan/echarts/dist/chartisan_echarts.js
<!-- Your application script -->
<script>
  const chart = new Chartisan({
    el: '#chart',
    url: "@chart('SampleChart')",
    loader: {
        color: '#222',
        size: [30, 30],
        type: 'bar',
        textColor: '#000',
        text: 'Loading some chart data...',
    },
  });
</script>

the output is a flex item with a caption "Loading some chart data... " and nothing shows. Am Stucked

I used the tutorial form and / but none was able to made me acplish having a chart. though the two tutorial links are for chart6.* i later read the two have different approaches to chart design. I am Usning Laravel7 and charts:7.*

I am new to laravel charts.I thought following the documentation to make a sample chart will be a stepping stone. Having followed the documentation form adding the package into my project using poser require consoletvs/charts:7.* and publishing the configuration file by running php artisan vendor:publish --tag=charts and then creating a new chart with the mand: php artisan make:chart SampleChart a SampleChart was made under App\Chart

In the SampleChart class i made the following chart configuration

 public ?string $name = 'SampleChart';
  public ?string $routeName = 'SampleChart';
   public ?array $middlewares = ['auth'];

I then manually register using the App\Providers\AppServiceProvider with the code as stated from the documentation

 public function boot(Charts $charts)
        {
            $charts->register([
                \App\Charts\SampleChart::class
            ]);
        }

On rendering the chart in my views; I put in the following code

<div id="chart" style="height: 300px;">    </div>
<!-- Charting library -->
 
<script src="{{ asset('js/Chart.min.js') }}"></script>//downloaded from https://unpkg./echarts/dist/echarts.min.js
<!-- Chartisan -->
<script src="{{ asset('js/chartisan_chartjs.js') }}">
</script> //downloaded from https://unpkg./@chartisan/echarts/dist/chartisan_echarts.js
<!-- Your application script -->
<script>
  const chart = new Chartisan({
    el: '#chart',
    url: "@chart('SampleChart')",
    loader: {
        color: '#222',
        size: [30, 30],
        type: 'bar',
        textColor: '#000',
        text: 'Loading some chart data...',
    },
  });
</script>

the output is a flex item with a caption "Loading some chart data... " and nothing shows. Am Stucked

I used the tutorial form https://dev.to/arielmejiadev/use-laravel-charts-in-laravel-5bbm and https://izwebtechnologies./2019/06/03/how-to-create-charts-in-laravel/ but none was able to made me acplish having a chart. though the two tutorial links are for chart6.* i later read the two have different approaches to chart design. I am Usning Laravel7 and charts:7.*

• javascript
• php
• laravel
• charts
• chart.js

• Did you figure it out? If you did I'm sure many people will upvote your answer (seeing how tutorials are lacking) – usernotnull Commented Sep 4, 2020 at 4:46
• It has taking a toll of my time then and i had to switch. But will sure look into it and made a tutorial for it – Othman Commented Sep 5, 2020 at 9:48

3 Answers 3

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./chart.js/dist/Chart.min.js"></script>
<script src="https://unpkg./@chartisan/chartjs/dist/chartisan_chartjs.js"></script>

{{-- 
<script src="https://unpkg./echarts/dist/echarts.min.js"></script>
<script src="https://unpkg./@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 pulsory. 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 mand 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.