Ariel Mejia

Posted on Aug 22, 2019 • Edited on Apr 17, 2020

Use Laravel charts in Laravel.

#laravel #chartjs #laravelcharts

If you need to add some graphs to your views, maybe you have work with some js library to add cool graphics but even with a good library like ChartJS implementing this is not so easy.

Installation

First we need to add a package to your Laravel project so in terminal add:



composer require consoletvs/charts:6.*

If you are working with Laravel 5.5 or higher thats all you need to install the package thanks by autodiscover feature.

If you work with Laravel lower than 5.5 you will need to register a service provider, add this line into the config/app.php file in the providers section:



ConsoleTVs\Charts\ChartsServiceProvider::class,

And to publish the configuration in terminal with the command:



php artisan vendor:publish --tag=charts_config

Now you have the package installation done!

Use the package

We are going to use artisan cli to create a chart class.



php artisan make:chart UserChart

Now in app directory we can see a folder named charts and there is our new class UserChart.php.

I will explain with an easy example but you can add as many complexity as you want, we are going to create a controller of type resource to display user chart:



php artisan make:controller UserChartController -r

Now you can edit the file in app/Http/Controllers/UserChartController.php and only hold the index method all other rest full methods can be deleted, and you will have something like this:



<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UserChartController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
    }

}

To make it more easy I will create a fake data but you can use eloquent o queryBuilder to create queries as you need, I will import the new chart class created before to the controller, and start to create a chart with Laravel chart api fluid syntax:



<?php

namespace App\Http\Controllers;

use App\Charts\UserChart;
use Illuminate\Http\Request;

class UserChartController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $usersChart = new UserChart;
        $usersChart->labels(['Jan', 'Feb', 'Mar']);
        $usersChart->dataset('Users by trimester', 'line', [10, 25, 13]);
        return view('users', [ 'usersChart' => $usersChart ] );
    }

}

Now we need a view to show the data in the last code snippet the index method returns a view for users charts, so I will create a file in resources/views/ named users.blade.php, with next content:



@extends('layouts.app')

@section('content')
<h1>Sales Graphs</h1>

<div style="width: 50%">
    {!! $salesChart->container() !!}
</div>
@endsection

Now we pass the chart script to the view file we only need to add the chart css and js library files, to keep it simple we are going to use the layout app blade file, it is located in resources/views/layout/app.blade.php, here we are going to add in header section the next line at the very bottom:



<head>
    <meta charset="utf-8">
    ...
    {{-- ChartScript --}}
    @if($usersChart)
    {!! $usersChart->script() !!}
    @endif
</head>

To add JS library file we are going to the bottom to the file app.blade.php, before the html close tag and add the scripts:



@extends('layouts.app')

@section('content')
<h1>Users Graphs</h1>

<div style="width: 50%">
    {!! $usersChart->container() !!}
</div>
@endsection

Finally we only need a route to access to the graphic view, in routes/web.php file you can add a route with get method to access to the usersChartController class in method index() in the example I set a route to 'sales':



<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

....

Route::get('users', 'UserChartController@index');

Well it is simple but, maybe you want to customize it a little bit more, you can customize the charts by two ways, you can customize the "dataset" and the chart as itself, to start we are going to customize the "dataset":



<?php

namespace App\Http\Controllers;

use App\Charts\UserChart;
use Illuminate\Http\Request;

class UserChartController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $usersChart = new UserChart;
        $usersChart->labels(['Jan', 'Feb', 'Mar']);
        $usersChart->dataset('Users by trimester', 'line', [10, 25, 13])
            ->color("rgb(255, 99, 132)")
            ->backgroundcolor("rgb(255, 99, 132)");
        return view('users', [ 'usersChart' => $usersChart ] );
    }

}

The method "color" set the border color in the case of a "line" or "area" charts it sets the line color, and as param requires a string with the rgb or rgba color
The method "backgroundcolor" set the area color, the color to fill, and as param requires a string with the rgb or rgba color

"fill" method requires a boolean and it paint the area or not if it is set as false, by default a chart is filled.

"linetension" method make less curved a line and it requires a float from 0.0 to 1.0

"dashed" method makes the line a dashed line and it requires an array.

Customize the chart

To customize the chart we can use some methods:
- "minimalist" method requires a boolean and it removes the grid background and the legend of the chart
- "displaylegend" methods requires a boolean and it is true by default, to hide the legend set false as param.
- "displayaxes" method requieres a boolean and by default is true it, paint the background grid of the chart, to hide it just set false as the param.
- "barWidth" this method does not do anything in line and area charts, it requires a double.



<?php

namespace App\Http\Controllers;

use App\Charts\UserChart;
use Illuminate\Http\Request;

class UserChartController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $usersChart = new UserChart;
        $usersChart->title('Users by Months', 30, "rgb(255, 99, 132)", true, 'Helvetica Neue');
        $usersChart->barwidth(0.0);
        $usersChart->displaylegend(false);
        $usersChart->labels(['Jan', 'Feb', 'Mar']);
        $usersChart->dataset('Users by trimester', 'line', [10, 25, 13])
            ->color("rgb(255, 99, 132)")
            ->backgroundcolor("rgb(255, 99, 132)")
            ->fill(false)
            ->linetension(0.1)
            ->dashed([5]);
        return view('users', [ 'usersChart' => $usersChart ] );
    }

}

Doughnutexample:



<?php

namespace App\Http\Controllers;

use App\Charts\UserChart;
use Illuminate\Http\Request;

class UserChartController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $borderColors = [
            "rgba(255, 99, 132, 1.0)",
            "rgba(22,160,133, 1.0)",
            "rgba(255, 205, 86, 1.0)",
            "rgba(51,105,232, 1.0)",
            "rgba(244,67,54, 1.0)",
            "rgba(34,198,246, 1.0)",
            "rgba(153, 102, 255, 1.0)",
            "rgba(255, 159, 64, 1.0)",
            "rgba(233,30,99, 1.0)",
            "rgba(205,220,57, 1.0)"
        ];
        $fillColors = [
            "rgba(255, 99, 132, 0.2)",
            "rgba(22,160,133, 0.2)",
            "rgba(255, 205, 86, 0.2)",
            "rgba(51,105,232, 0.2)",
            "rgba(244,67,54, 0.2)",
            "rgba(34,198,246, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)",
            "rgba(233,30,99, 0.2)",
            "rgba(205,220,57, 0.2)"

        ];
        $usersChart = new UserChart;
        $usersChart->minimalist(true);
        $usersChart->labels(['Jan', 'Feb', 'Mar']);
        $usersChart->dataset('Users by trimester', 'doughnut', [10, 25, 13])
            ->color($borderColors)
            ->backgroundcolor($fillColors);
        return view('users', [ 'usersChart' => $usersChart ] );
    }

}

Bar example

With a little effort and the default bootstrap from Laravel installation:

UserChartController to generate the chart



<?php

namespace App\Http\Controllers;

use App\Charts\UserChart;
use Illuminate\Http\Request;

class UserChartController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $borderColors = [
            "rgba(255, 99, 132, 1.0)",
            "rgba(22,160,133, 1.0)",
            "rgba(255, 205, 86, 1.0)",
            "rgba(51,105,232, 1.0)",
            "rgba(244,67,54, 1.0)",
            "rgba(34,198,246, 1.0)",
            "rgba(153, 102, 255, 1.0)",
            "rgba(255, 159, 64, 1.0)",
            "rgba(233,30,99, 1.0)",
            "rgba(205,220,57, 1.0)"
        ];
        $fillColors = [
            "rgba(255, 99, 132, 0.2)",
            "rgba(22,160,133, 0.2)",
            "rgba(255, 205, 86, 0.2)",
            "rgba(51,105,232, 0.2)",
            "rgba(244,67,54, 0.2)",
            "rgba(34,198,246, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)",
            "rgba(233,30,99, 0.2)",
            "rgba(205,220,57, 0.2)"

        ];
        $usersChart = new UserChart;
        $usersChart->minimalist(true);
        $usersChart->labels(['Jan', 'Feb', 'Mar']);
        $usersChart->dataset('Users by trimester', 'bar', [10, 25, 13])
            ->color($borderColors)
            ->backgroundcolor($fillColors);
        return view('users', [ 'usersChart' => $usersChart ] );
    }

}

blade view with some bootstrap for styling



@extends('layouts.app')

@section('content')


<div class="container">
    <h1>Users Graphs</h1>
    <div class="row">
        <div class="col-6">
            <div class="card rounded">
                <div class="card-body py-3 px-3">
                    {!! $usersChart->container() !!}
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

Here is the code on Github repo:

https://github.com/ArielMejiaDev/SNIPPET_Laravel-charts

Top comments (66)

Beenitanep • Jul 12 '20

Hello,
I follow all your steps as per your instruction but i gives me error: Undefined variable: usersChart
when i do dd(usersChart ) it does not give any output.
steps:

Add package: composer require consoletvs/charts
php artisan vendor:publish --tag=charts_config
php artisan make:chart UserChart
make controller add code in controller: public function index() { $usersChart = new UserChart; $usersChart->labels(['Jan', 'Feb', 'Mar']); $usersChart->dataset('Users by trimester', 'line', [10, 25, 13]); return view('users', [ 'usersChart' => $usersChart ] ); }
In my blade added: {!! $usersChart->container() !!}

Ariel Mejia • Jul 12 '20

Hi Beenitanep, please execute this in your controller:

dd($usersChart);

You should see the chart class object, if this is not the case I maintain another package for charts...

I hear too many reasons why this package is not working as ideally expected in this post comments, so a few months ago I created a library inspired in this package, here the post:

dev.to/arielmejiadev/create-charts...

I maintain this other package, I add a more clear documentation and if you have some trouble with this normally I can bring support quickly.

Expect this is helpful in someway.

barfrakud • Jun 12 '20

Hello. There is new version of Laravel Charts 7 with Chartisan. Any tutorial will be appreciated.

Ariel Mejia • Jun 13 '20

Maybe by the moment I recommend you my own chart package, created by many comments requiring some features: packagist.org/packages/arielmejiad...

Sammy Mwangangi • Jun 20 '20 • Edited

Your package is awesome. I like the way it has easy-to-use features. I have an obstacle though. I am getting "ErrorException Undefined variable: chart". It's coming up when I register $chart->script() on my blade file. What could be the problem?

Ariel Mejia • Jun 20 '20

Thanks for using Larapex charts, please before return a view, make a dd($chart), just to see if the variable is getting the LarapexChart class, if this is not the case maybe you could paste your controller and view code here I would be glad to make a little review

Sammy Mwangangi • Jun 20 '20

This is my controller

use Illuminate\Http\Request;
use ArielMejiaDev\LarapexCharts\LarapexChart;

class HomeController extends Controller
{

public function index()
{

    $chart = (new LarapexChart)
        ->setType('line')
        ->setTitle('Earnings')
        ->setDataset([0, 10000, 5000, 15000, 10000, 20000, 15000, 25000, 20000, 30000, 25000, 40000])
        ->setLabels(["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]);

    $chart2 = (new LarapexChart)
        ->setTitle('My dataset')
        ->setType('area')
        ->setDataset([55, 30, 15])
        ->setColors(['#4e73df', '#1cc88a', '#36b9cc'])
        ->setLabels(["Direct", "Referral", "Social"]);

    return view('home', compact('chart', 'chart2'));
}

Sammy Mwangangi • Jun 20 '20

This is view code

            <div class="lg:flex mb-4">
                <div class="transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100 hover:shadow-2xl shadow-xl bg-white rounded-lg mx-auto p-6 lg:w-3/5 mb-2">
                    {!! $chart->container() !!}

                    {!! $chart->script() !!}
                </div>
                <div class="transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100 hover:shadow-2xl shadow-xl bg-white rounded-lg mx-auto p-6 lg:ml-4 lg:w-2/5">
                    {!! $chart2->container() !!}

                    {!! $chart2->script() !!}
                </div>
            </div>

Sammy Mwangangi • Jun 20 '20

I succefully eradicated the error by placing the $chart->script() inside the view div element but now the charts are not visible.

Sammy Mwangangi • Jun 20 '20

This is what i get when i dd($chart)

ArielMejiaDev\LarapexCharts\LarapexChart {#312 ▼
+id: "ywklbqzivadhtegmrnouxfsjc"
#title: "Earnings"
#subtitle: null
#subtitlePosition: null
#type: "line"
#labels: ""Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec""
#dataset: "[0,10000,5000,15000,10000,20000,15000,25000,20000,30000,25000,40000]"
#height: 350
#colors: "["#008FFB","#00E396","#feb019","#ff455f","#775dd0","#80effe","#0077B5","#ff6384","#c9cbcf","#0057ff","00a9f4","#2ccdc9","#5e72e4"]"
#horizontal: "{"horizontal":false}"
#xAxis: "[]"
#grid: "{"show":false}"
#stroke: null
-chartLetters: "abcdefghijklmnopqrstuvwxyz"
}

Sammy Mwangangi • Jun 20 '20

The charts cannot now show on browser. I get this error on console log:

Uncaught ReferenceError: ApexCharts is not defined

Ariel Mejia • Jun 20 '20

Do you add the CDN of apexcharts in your blade layout file? if you dont want to go to the apexchart site to get the cdn you can use the helper

<script src="{!! $chart->cdn() !!}"></script>

Remember to print in the script tags you need the bang bang syntax not the blade mustaches.

Ariel Mejia • Jun 20 '20

Do you host the code in github, to get more context, please just review if you are importing the package class, you need to add the namespace of the package class:

use ArielMejiaDev\LarapexCharts;

This is something that the editor can do automatically by you, since I got only the code from the controller method I cannot verify if you has this class imported

Sammy Mwangangi • Jun 21 '20

This is the github code:

github.com/sammymwangangi/TALL-Das...

Ariel Mejia • Jun 22 '20

Hi Sammy, excuse me for the wait, today I make some time to review the code, I create an example using the data that you want, everything is working fine just remeber in docs I add an alert on line, area charts because in this charts you can represent more than one series of data you need to set the data like this:

$chart->setDataset([
    [
        "name" => "Earnings",
        "data" => [100, 200, 300]
    ]
])

As you can see its a multidimensional array an every subset is an associative array, then you can see that the "data" key has an array as its value, I add a live example here: github.com/ArielMejiaDev/Larapex-C...

you can check the code, thanks for using Larapex Charts, I saw your dashboard project so I add the example using Tailwindcss to you can get a pretty good idea how it looks on your project, please let me know about your project it seems very interesting, there is something more that I could help you I will be here.

Sammy Mwangangi • Jun 23 '20 • Edited

Thank you for your feedback. I appreciate your effort to help me. I was trying to use your package for charts on my project instead of using chartsJs. I will follow your advice and also check your example there to rectify the problem.
Thanks also for the interest in my project. It's an open-source TALL Stack dashboard. I am trying to make sure all the technologies have been represented well on the dashboard. Tailwind for UI design, Alpine Js, and Livewire for UX and of course Laravel for backend stuff. I have implemented the new Laravel component features also. It's still a WIP though. I'll need to clean the code once I am done with everything.
You're welcome to fork or do a pull request. Or give me a star.

Sammy Mwangangi • Jun 23 '20

I have noticed something with the "undefined variable $chart" error. It was caused when I moved the main layout file to the components folder. That is when I started to implement the Laravel's components feature.
I have created a similar file and placed it on the layouts folder and changed my view file to use the initial methods; @extends and @yield().

Ariel Mejia • Jun 23 '20

Hi, you are using the new Laravel components? in this case if you are using variables you need to add a class to add the component logic, look at "app/Views" folder, you can create a view composition class with the artisan command: "php artisan make:component yourcomponent", then it will add a file with a render function that calls directly the view then in the constructor add the $chart variable that you need maybe something like:

php artisan make:component EarningsChart

go to app/Views/chart.php

<?php
namespace App\View\Components;

use Illuminate\View\Component;
use ArielMejiaDev\LarapexCharts\LarapexChart;

class Alert extends Component
{

    /**
     * Chart instance.
     *
     */
    public $chart;

    /**
     * Create the component instance.
     *
     * @param $chart
     * @return void
     */
    public function __construct(LarapexChart $chart)
    {
        $this->chart = (new LarapexChart)
        ->setType('line')
        ->setTitle('Earnings')
        ->setXAxis([
            'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'
        ])
        ->setDataset([
            [
                'name'  =>  'Earnings',
                'data'  =>  [0, 10000, 15000, 10000, 20000, 15000, 25000, 20000, 30000, 25000, 40000]
            ]
        ])
    ;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return view('components.alert');
    }
}

Please let me know if this approach works, and congrats your Tall dashboard looks amazing, I am doing a secret open source project with similar aproach but I prefer VueJS

Sammy Mwangangi • Jun 24 '20

Thanks for your feedback. I will try out this approach and I'll let you know if it works. Also, I can't wait to see your project.

Ariel Mejia • Jun 24 '20

Thanks!

alexander lim • Sep 25 '20

hi,, i'm using larapexchart in laravel but i keep on getting a error .. saying that Call to a member function container() on array.. can you help me please...

Ariel Mejia • Sep 25 '20

Hi there! thanks for using Larapex charts, here is a live sample with TailwindCSS: larapex-chart-example.herokuapp.com/

Here the controller where I built the charts: github.com/ArielMejiaDev/Larapex-C...

Here the view: github.com/ArielMejiaDev/Larapex-C...

If you want to share the code I can give a look at the code, alternatively you can make a "dd()" to the chart variable before pass it to the view and check that its a LarapexChart object instance.

CamelJohn • Aug 23 '19

Hi there,

I'm new to laravel/web-development/the whole lot. so my understanding is quite basic (maybe i have a lot of common knowledge).

for some reason My charts are not appearing. and i feel like the joke is on me - like there is some thing that i fail to see - that is quite obvious to the rest of the reader.

i've also downloaded the chart.js library to try and make the chart work.

"Failed to load resource: the server responded with a status of 404 (Not Found)" is the console message i get.

i followed the line chart example

help please :)

Ariel Mejia • Aug 24 '19

Ofcourse, you have a repo of the proyect? if you like I could make a repo with the example just to show some example or if you have one, maybe you can share the link and I will try, just a question, do you see a circle loader?

I will be waiting to help

CamelJohn • Aug 24 '19

Hi Ariel,

Yes, I see a circle loader. but for some reason I think there is a component/vaiable/library-link missing.

I do not have a repository of the project - it is simply a new project in wich i followed your post's instructions to see if i could make a chart using ChartJS.

so far i've seen people use a html tag and some JS code to render charts.

i came upon your post when i wanted to use laravel queries/route-model-binding to retun some data to the chart.

I't would be most helpful is you could send me an example so i can try and understand what is wrong.

thank you so much.

Ariel Mejia • Aug 24 '19

Ok I will send you a the original code maybe in an hour or more, but at this moment I think you should review in header of your template, you need to have :

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js" charset="utf-8">
</script>

If you already have it, remember to end your template with:

...
{!! $yourVar->script() !!}
</html>

I will send you an example, thanks for follow the post.

CamelJohn • Aug 24 '19 • Edited

so,

i've played around with the code and the chart is rendered.

now i'm trying to pass data from my project's controller via two query's
one for the labels and one for the data - those two results i have stored in two variables in the controller. i then attempted to insert those variables into the relevant field functions: labels, dataset..
but what i get is an empty table with "object Object" in the x axis and 0 - 1.0 in the y axis but no line is rendered.

i've tried to die-dump the variables. then i figured out i can parse them "toArray()" but still i got the same result.

any idea's what i should do ?

Ariel Mejia • Aug 24 '19

The code is already added in the post, ok Maybe because the "toArray()" function returns a wrapper that certanly is similar to array you can access to data like an array, but It is not a pure php array because you can use some methods with the result array, maybe try adding mock data "[10,40,20]" and pass it at "dataset()" method.

CamelJohn • Aug 24 '19

so...the mock data works just fine.
but i want to pass data from something like this:

$label = DB::table('users')->where('name', 'like', '%john%')->get('name');

and then pass the variable $label to the chart like so:

$usersChart->labels($label);

the same for the dataset:

$data = DB::table('users')->where('name', 'like', '%john%')->get('age');

$usersChart->dataset('all users named like john of age 44 and up', 'line', $data)
->color("rgb(255, 99, 132)")
->backgroundcolor("rgb(255, 99, 132)")
->fill(true)
->linetension(0.3);

    return view('users', [ 'usersChart' => $usersChart ] );

but when i dye dump it says they are collections holding arrays. and the chart does not work :/

Ariel Mejia • Aug 25 '19

I recommend you to make first a dd() of $label, maybe it returns an array of Users model collection and you need to pass a simple array not a multidimensional one, so maybe you need something like:

$label = DB::table('users')->where('name', 'like', '%john%')->get('name').toArray();
$data = DB::table('users')->where('name', 'like', '%john%')->get('age').toArray();

you need to see something like:

[
  'John Doe',
  'John Johnson',
  'John Davids'
]

I mean maybe you try this but just to be sure if these not work, you can create a array from a loop, it is not elegant way but only to be sure:

$johns = Users::where('name', '=', 'John')->get('name');
//or
//$johns = Users::where('name', '=', 'John')->pluck('name');
//or
//$johns = Users::where('name', '=', 'John')->get()->name->toArray();
$johnnys = [];
foreach($johns as $john){
  $johnnys[] = $john->name;
}
dd($johnnys);

Later you can use a tap() method to make it more elegant

CamelJohn • Aug 25 '19 • Edited

Hi ariel,

Sorry im new to this community and am trying to see how i can send code snippets like tou do.

Ive dye dumped the label and dataset collections (the come from querries) and i recieve a collection of php arrays. The problem is that they are key value paired so im guessing the blade does get an object and not an array of data.

Ive looked around for different methids and it seems there might be a get_data() function that takes the params and returns an array.

If it works ill let you know.

If you have some insights for me i'll be more than happy.

Other than that thank you so much !

Ariel Mejia • Aug 25 '19

Thanks I try to explain it as much as I can, you write markdown in dev.to, so to write code snippets you only need to add alt+96 it writes " ` " you need to write this aphostrophe three times to open a block and three times to close the block, inside the block just paste your code, I think that you can use other ways to get data as you want but is a eloquent stuff, if you wish you can paste the dd() output and maybe I could help.

Happy code!

rohaizimohamed • Oct 22 '20

Hi Sir,
how i can make something like this

options = {
dataLabels: {
enabled: true,
formatter: function (val) {
return val + "%"
},
dropShadow: {
...
}
}
}
using larapex package

and how to show labels on donut chart?

Ariel Mejia • Oct 22 '20

Hi, you are working on a pie chart? what you need? to add a "%" symbol to the labels?

rohaizimohamed • Oct 23 '20

yes sir, I want to add % to the label, and also want the label appear on chart

Ariel Mejia • Oct 23 '20

I will add an example on docs as soon as I can, thanks for using the package

rohaizimohamed • Oct 23 '20

thank you sir, I really appreciate it

philipiree • Jan 26 '20

chart:26 Uncaught TypeError: Cannot read property 'getContext' of null. I have followed all the steps but the error shows this in console var
ctvChart = document.getElementById('hamlwzcyqxfksvupbergjdnto').getContext('2d');

Ariel Mejia • Jan 26 '20

Many developers talk me about Laravel charts package inconsistence so I decide to write my own package to provide a similar solution with easy api, you can read about it here: dev.to/arielmejiadev/create-charts...

Ariel Mejia • Jan 26 '20

There is a chance to view the code to get more context?

philipiree • Jan 26 '20

Hi, thank you so much for your reply! The problem was the CDN. I have put this instead and it worked!

Ariel Mejia • Jan 28 '20

Great! is difficult to get this bugs because there are not code bugs, cool

dgloriaweb • Nov 23 '19

Hi, I have laravel 6.5 and there is no app.blade.php or layouts.app, can you please include what do you need from there since it is removed from latest versions? Using your code, without the layouts.app I see an ellipse (...) only and an error in the console:

Uncaught TypeError: Cannot read property 'getContext' of null
    at users:11

var ctvChart = document.getElementById('tuownvcasfgpremkbzdxyliqh').getContext('2d');

Thank you.

Ariel Mejia • Nov 25 '19

Hi to add the auth scaffold with layouts and all blade files included and authentication feature, you need to add another composer package because the artisan command:

make:auth

Is not available anymore, I published a post with different ways to get this scaffold again, is very easy, you can see the post here

Neeraj Singh • Oct 30 '19 • Edited

Charts is wroking fine but when i jumped to other url, THis shows me error:
Undefined variable: chart (View: C:\wamp64\www\AdBlog\resources\views\admin\layouts\footer.blade.php)
I faced this issued when i jumped to other page.

And i have add this code end of the footer. this show an error
 <footer class="main-footer">
    <div class="pull-right hidden-xs">
      <b>Version</b> 2.3.8
  </div>
  <strong>Copyright &copy; 2019-{{ Carbon\carbon::now()->year }} <a href="http://facebook.com">NS Tech</a>.</strong> All rights
  reserved.
  <script src="{{ asset('admin/plugins/jQuery/jquery-2.2.3.min.js') }}"></script>
  <!-- jQuery UI 1.11.4 -->
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
  <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
  <script>
      $.widget.bridge('uibutton', $.ui.button);
  </script>
  <!-- Bootstrap 3.3.6 -->
  <script src="{{ asset('admin/bootstrap/js/bootstrap.min.js') }}"></script>
  <!-- Morris.js charts -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
  <script src="{{ asset('admin/plugins/morris/morris.min.js') }}"></script>
  <!-- Sparkline -->
  <script src="{{ asset('admin/plugins/sparkline/jquery.sparkline.min.js') }}"></script>
  <!-- jvectormap -->
  <script src="{{ asset('admin/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js') }}"></script>
  <script src="{{ asset('admin/plugins/jvectormap/jquery-jvectormap-world-mill-en.js') }}"></script>
  <!-- jQuery Knob Chart -->
  <script src="{{ asset('admin/plugins/knob/jquery.knob.js') }}"></script>
  <!-- daterangepicker -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
  <script src="{{ asset('admin/plugins/daterangepicker/daterangepicker.js') }}"></script>
  <!-- datepicker -->
  <script src="{{ asset('admin/plugins/datepicker/bootstrap-datepicker.js') }}"></script>
  <!-- Bootstrap WYSIHTML5 -->
  <script src="{{ asset('admin/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js') }}"></script>
  <!-- Slimscroll -->
  <script src="{{ asset('admin/plugins/slimScroll/jquery.slimscroll.min.js') }}"></script>
  <!-- FastClick -->
  <script src="{{ asset('admin/plugins/fastclick/fastclick.js') }}"></script>
  <!-- AdminLTE App -->
  <script src="{{ asset('admin/dist/js/app.min.js') }}"></script>
  <!-- AdminLTE dashboard demo (This is only for demo purposes) -->

  <script src="{{ asset('admin/dist/js/pages/dashboard.js') }}"></script> 
  <!-- AdminLTE for demo purposes -->
  <script src="{{ asset('admin/dist/js/demo.js') }}"></script>



   @if($chart)
     {!! $chart->script() !!}
     @endif




  @section('footerSection')
  @show
</footer>

Ariel Mejia • Oct 30 '19

you need to add your chart helper

{!! $chart->script() !!}

in the blade file of the view, this error is because it is added to the master blade layout, and if you extends other views from this layout you need to pass the chart variable to any file to extend from this layout, but the correct way is to pass the helper ONLY to your dashboard view not in the layout so it only be required there, I hope it works, happy coding!

Dávid Pavličko • Apr 18 '20 • Edited

Hello, I am facing three problems I would like to discuss, mazybe someone could help me.

1.) Firstly, the easier one -> how can I hide a dots in line chart? I would like to have two datasets in one line chart which I already have but one dataset would be only simple line (imagine sth like level of recommended value) and the other dataset would be as it is and can go above or under this simple dataset line.

2.) Is it possible to make dots in line chart or sections in doughnut chart clickable? I mean make a redirect on specific dot of line chart for example.

3.) I have one page with full of ajax, table data are dynamic and contains "show" modal button which is also made by ajax .. I always have the loading animation in ajax modal for every kind of chart... Any advice? Thanks :)

In general this tutorial is very helpful and for basic usage It works like a charm.

Ariel Mejia • Apr 19 '20

Hi David, I will recommend you:

Laravel charts works with many chart libraries some of them very old and the most cool and used is chart js, in chart js exists a property call minimalist(), I am pretty sure that this will work with this package as a fluent method like:

$chart->setMinimalist()->setLabels()...

I will recommend you another cool charts library it is apexcharts is really similar but its better in terms of variety of charts, customization and respond better to css rules.
in this post many devs comment about customizations for the tutorial package so I created a similar package for apexchart if you prefer you can see the js original package here: apexcharts.com/ and the package that I wrote to work similar as Laravel charts is:
Larapex charts: madewithlaravel.com/larapex-charts is another wrapper for this other library, it has more customizations.
About the modal, well is pretty much the same, apexcharts does not load with any loader as "preloader" so it would be more convinient to customize it... I would recommend you, if you work directly you can use the wrapper madewithlaravel.com/larapex-charts and then just call directly a controller that serve a Chart class like a service with this implementation then do not use the blade helpers because you want it dinamically so just fetch all json object and you are able to render it anywhere.

I know this text is a little dense but, there are no simple way to respond, there are many requests about Laravel charts features, but to keep it simple I just find another cool js library more flexible and create a wrapper taking all good stuffs that I like of these package, and try to make it as flexible as posible.

Dávid Pavličko • Apr 23 '20

Thank you I am gonna take a look at this.

Juan J Cadima • Oct 16 '19 • Edited

Thank you for the detailed article, the author's Laravel Chart website and github documentation and examples are lame, he should include a link to this article.
Also it is important to know that the author removed some useful functionality that worked out of the box, for example when working with eloquent models and filtering data by week, month, year etc, the previous v.5 had all of this , the new v.6 doesnt and that makes it more difficult to get the labels and data in these charts, the new version api is not elegant like the previous version, it looks more like a hardcoded version and more lines of code when trying to filter data instead of just using grouByMonth() like it was possible in version 5.
It is hard to see what go better in this new version compared to the previous one, even the charts in the previous one had more options and support for eloquent models, this new one looks more like any js charts library which you just put hardocoded values in it, not very dynamic.

Ariel Mejia • Oct 23 '19

At the moment it is the most complete package to implement an easy graphs by far, a very cool option is the APEX Graphs library, is a JS library the downside is that you need to implement by your own the api to consume the data in the view, another aproach could be good if the data is static and it will not change, to create a blade include to add the html tags for the graph, and create a slot to print the values from vainilla Javascript with blade syntax you can add values as:

var options = {
            chart: {
                height: 350,
                type: 'area',
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                curve: 'smooth'
            },
            series: [{
                name: 'series1',
                //data: [31, 40, 28, 51, 42, 109, 100]
                //with blade syntax
                data: {{ $dataSeriesOne }}
            }, {
                name: 'series2',
                //data: [11, 32, 45, 32, 34, 52, 41]
                data: {{ $dataSeriesTwo }}
            }],

            xaxis: {
                type: 'datetime',
                categories: ["2018-09-19T00:00:00", "2018-09-19T01:30:00", "2018-09-19T02:30:00", "2018-09-19T03:30:00", "2018-09-19T04:30:00", "2018-09-19T05:30:00", "2018-09-19T06:30:00"],                
            },
            tooltip: {
                x: {
                    format: 'dd/MM/yy HH:mm'
                },
            }
        }

        var chart = new ApexCharts(
            document.querySelector("#chart"),
            options
        );

        chart.render();

This aproach is a good one and it is pretty similar to the aproach of laravel chart, definitely, I will work on an example to post here, and thanks for your comment!

Overseer • Jan 8 '20 • Edited

Hi, loved your tutorial, as others have mentioned laravel chart's tutorial really need to be improved with more examples.

I hope you can help me out, Ariel, or maybe if you have the answer to update your post as well.

I'm able to read chart.js's tutorial (which is the library I'm using)
But, I'm not too sure on how I can access those parameters from laravel chart's object. I believe it's done through their so called APIs, but documentation is scant...

For example in chart.js i need to set this option.
I'm not sure how I can pass this in via the options API in laravel charts
options: {
scales: {
xAxes: [{
type: 'time',
ticks: {
autoSkip: true,
maxTicksLimit: 20
}
}]
}
}

Okay, I figured it out until this part
the options API accepts arrays in 'parameter=>setting'
->options(['maintainAspectRatio'=>false); this works to set maintainAspectRatio of chart js to false correctly

My problem comes with the 'scales' part of the nested xAxes parameter.
I'm not too sure how I can form it correctly so that I'm able to do xAxes something like this (when rendered in HTML)

options: {"maintainAspectRatio":false,"scales":{"xAxes":[{"display":false}],"yAxes":[{"ticks":{"beginAtZero":true},"display":true}]},"legend":{"display":true}},

I figured, if I can get the syntax, then I'll be able to do what I need with the other options

Ariel Mejia • Jan 8 '20

Hi, I think that It does not have all ChartJS methods available, I suppose it could be for compatible reasons, because the package has methods that are support by ChartJS and other libraries so you can search as I did to make this post, in Vendero/ConsoleTV/Charts/ChartJS I think but there is only a small part of all ChartJS methods available.

You could create your own class that extends from this and add the setters for the methods that you need and build the chart object with this values, this is maybe the most practical way in your case.

Overseer • Jan 8 '20 • Edited

Hi Ariel, you pointed me to the right location, in the chart.php i was able to see how they formatted the default variable, and from there I was able to feed in what was needed, if this is of help to others.

return $this->options([
'maintainAspectRatio' => false,
'scales' => [
'xAxes' => [],
'yAxes' => [
[
'ticks' => [
'beginAtZero' => true,
],
],
],
],
]);

$projectProgress[$ctr]->labels($days)
->minimalist(false)
->height(300)
->width(100)
->options([
'maintainAspectRatio'=>false,
'scales'=>[
'xAxes'=>[
['display'=>false]
]
]
]);

Neeraj Singh • Oct 30 '19

Charts JS working fine but when i jumper to other page this gives me an error. please help me.

Undefined variable: chart (View: C:\wamp64\www\AdBlog\resources\views\admin\layouts\footer.blade.php)

THis is my footer page

 <footer class="main-footer">
    <div class="pull-right hidden-xs">
      <b>Version</b> 2.3.8
  </div>
  <strong>Copyright &copy; 2019-{{ Carbon\carbon::now()->year }} <a href="http://facebook.com">NS Tech</a>.</strong> All rights
  reserved.
  <script src="{{ asset('admin/plugins/jQuery/jquery-2.2.3.min.js') }}"></script>
  <!-- jQuery UI 1.11.4 -->
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
  <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
  <script>
      $.widget.bridge('uibutton', $.ui.button);
  </script>
  <!-- Bootstrap 3.3.6 -->
  <script src="{{ asset('admin/bootstrap/js/bootstrap.min.js') }}"></script>
  <!-- Morris.js charts -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
  <script src="{{ asset('admin/plugins/morris/morris.min.js') }}"></script>
  <!-- Sparkline -->
  <script src="{{ asset('admin/plugins/sparkline/jquery.sparkline.min.js') }}"></script>
  <!-- jvectormap -->
  <script src="{{ asset('admin/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js') }}"></script>
  <script src="{{ asset('admin/plugins/jvectormap/jquery-jvectormap-world-mill-en.js') }}"></script>
  <!-- jQuery Knob Chart -->
  <script src="{{ asset('admin/plugins/knob/jquery.knob.js') }}"></script>
  <!-- daterangepicker -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
  <script src="{{ asset('admin/plugins/daterangepicker/daterangepicker.js') }}"></script>
  <!-- datepicker -->
  <script src="{{ asset('admin/plugins/datepicker/bootstrap-datepicker.js') }}"></script>
  <!-- Bootstrap WYSIHTML5 -->
  <script src="{{ asset('admin/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js') }}"></script>
  <!-- Slimscroll -->
  <script src="{{ asset('admin/plugins/slimScroll/jquery.slimscroll.min.js') }}"></script>
  <!-- FastClick -->
  <script src="{{ asset('admin/plugins/fastclick/fastclick.js') }}"></script>
  <!-- AdminLTE App -->
  <script src="{{ asset('admin/dist/js/app.min.js') }}"></script>
  <!-- AdminLTE dashboard demo (This is only for demo purposes) -->

  <script src="{{ asset('admin/dist/js/pages/dashboard.js') }}"></script> 
  <!-- AdminLTE for demo purposes -->
  <script src="{{ asset('admin/dist/js/demo.js') }}"></script>

   @if($chart)
     {!! $chart->script() !!}
     @endif 

  @section('footerSection')
  @show
</footer>

View full discussion (66 comments)

DEV Community

Use Laravel charts in Laravel.

Installation

Use the package

Customize the chart

Doughnutexample:

Bar example

UserChartController to generate the chart

blade view with some bootstrap for styling

Top comments (66)

This is my controller

This is view code

This is what i get when i dd($chart)

The charts cannot now show on browser. I get this error on console log:

This is the github code:

Read next

Update Front-end Dev.to Challenge

🤖 AI Testers: Revolutionizing Software Testing with GenQE.ai 🧪

Mastering software architecture patterns PART 2

Terminalizer: Record, Edit, and Share Terminal Sessions