Discussion on: Use Laravel charts in Laravel.

View post

Replies for: 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 ...

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