DEV Community

Use Laravel charts in Laravel.

Ariel Mejia on August 22, 2019

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 Chart...

Read full post

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>

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.

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

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.

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!

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

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]
]
]
]);

JackEmond • Apr 18 '20 • Edited

HI,

I just started using Laravel Charts in a personal project and I absolutely love it! The one thing is I cant seem to figure out how to set a title for the x axis and y axis. Is there a way to do this?

Also is there a way to hide part of the dataset? E.g all of my numbers are between 80-100 is there a way to hide 0-70 so it only shows the section with points on the graph?

Thanks!

Ariel Mejia • Apr 19 '20

Hi thanks! ummm x and y axis has a label property, this is the only value you can pass as array of strings, then to hide not used values, I really never hear about this I suppose this is not a feature, I had a great experience working with Laravel Charts package, there are some suggestions in comments so I decide to make my own implementation for apexcharts library another very cool javascript charts library, that has more flexibility in terms of work with css I will share you a link to the package maybe it would be interesting for you: madewithlaravel.com/larapex-charts

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>

Ariel Mejia • Jan 16 '20

Hi folks! thanks for comment to this post, I feel very happy about this post and all the interaction, I really feel that something is missing around this post, when I read your comments I feel that maybe another implementation is needed, some comments makes me feel like you expect some more functunallity or more features, so I decide to create a new package to provide a apex chart library wrapper for Laravel so you can read my most recent post about it here: dev.to/arielmejiadev/create-charts... and to get more info about the package you can visit the documentation site here: arielmejiadev.github.io/LarapexCha... thanks for all your support and thanks for reading.

yunior1630 • Sep 19 '19

Undefined variable: salesChart (View: C:\xampp\htdocs\Gestion_Politica\resources\views\users.blade.php)

hola ariel tengo ese error siguiendo tu tutorial

Ariel Mejia • Oct 23 '19

Hola lograste resolver? puede ser porque no enviaste la variable salesChart a la vista, puedes probar primero a debugear si la variable existe con:

dd($salesChart);

Si tiene valores puedes pasar el valor a la vista:

return view('yourView')->with('salesChart', $salesChart);

ritzchy04 • Apr 29 '20

you used $salesChart instead of $usersChart in users.blade.php

Ariel Mejia • Apr 29 '20

Well you got the idea ;)

Sammy Mwangangi • Apr 6 '21

dev-to-uploads.s3.amazonaws.com/up...

Sammy Mwangangi • Apr 6 '21

Is there a way to use icon as Label inside setLabel()? For example:

Ariel Mejia • Apr 6 '21

As I see the apexchartsjs library that is the one that built the charts behind the scene, does not provide a way to do it, but you can use some css to add styles to an image tag to make it absolute inside a div tag wrapper relative and place the icon where you want.

Ibnu mas ud • Jun 25 '20

Hello. i dunno why my view return white pages. really frustating. i follow every step but ended with white pages. can help?