What is Larapex Chart ?
Larapex chart is a library to add beautiful charts for blade. It’s a laravel wrapper of Apex chart library. Larapex chart allow you to generate chart writting with php.
How to use it ?
To use it add Larapex chart with composer to your project
composer require arielmejiadev/larapex-charts
Then publish config file with this command
php artisan vendor:publish --tag=larapex-charts-config
with this, the setup is done ! And you can start to use Larapex Chart ! 🙂
Chart example
To create chart use this command :
php artisan make:chart MonthlyUsersChart
Then select a chart type :
- [x] Pie Chart
- [ ] Donut Chart
- [ ] Radial Bar Chart
- [ ] Polar Area Chart
- [ ] Line Chart
- [ ] Area Chart
- [ ] Bar Chart
- [ ] Horizontal Bar Chart
- [ ] HeatMap Chart
- [ ] Radar Chart
Now you have a new file with the chart in app/Charts/MonthlyUsersChart.php
<?php
namespace App\Charts;
use ArielMejiaDev\LarapexCharts\LarapexChart;
class MonthlyUsersChart
{
protected $chart;
public function __construct(LarapexChart $chart)
{
$this->chart = $chart;
}
public function build()
{
return $this->chart->pieChart()
->setTitle('Top 3 scorers of the team.')
->setSubtitle('Season 2021.')
->addData([40, 50, 30])
->setLabels(['Player 7', 'Player 10', 'Player 9']);
}
}
now in your controller you inject the chart object :
public function index(MonthlyUsersChart $chart)
{
return view('users.index', ['chart' => $chart->build()]);
}
And to finish add $chart->container(), $chart->cdn() and $chart->script() methods in the view to render a chart
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Chart Sample</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="h-screen bg-gray-100">
<div class="container px-4 mx-auto">
<div class="p-6 m-20 bg-white rounded shadow">
{!! $chart->container() !!}
</div>
</div>
<script src="{{ $chart->cdn() }}"></script>
{{ $chart->script() }}
</body>
</html>
You can retrieve other charts in the documentation :
Top comments (0)