Discussion on: Use Laravel charts in Laravel.

View post

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