Custom charts

dcat-admin 1.5 has removed all chart components, if you want to add a chart component to your page, you can refer to the following procedure

To use chartjs as an example, first download chartjs and put it in the public directory, for example, in public/vendor/chartjs.

Then include the component in `app/Admin/bootstrap.php’.

  1. use Dcat\Admin\Facades\Admin;
  3. Admin::js('/vendor/chartjs/dist/Chart.min.js');

New view file resources/views/admin/charts/bar.blade.php

  1. <canvas id="myChart" width="400" height="400"></canvas>
  2. <script>
  4. $(function () {
  5.    var ctx = document.getElementById("myChart").getContext('2d');
  6.    var myChart = new Chart(ctx, {
  7.        type: 'bar',
  8.        data: {
  9.            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  10.            datasets: [{
  11.                label: '# of Votes',
  12.                data: [12, 19, 3, 5, 2, 3],
  13.                backgroundColor: [
  14.                    'rgba(255, 99, 132, 0.2)',
  15.                    'rgba(54, 162, 235, 0.2)',
  16.                    'rgba(255, 206, 86, 0.2)',
  17.                    'rgba(75, 192, 192, 0.2)',
  18.                    'rgba(153, 102, 255, 0.2)',
  19.                    'rgba(255, 159, 64, 0.2)'
  20.                ],
  21.                borderColor: [
  22.                    'rgba(255,99,132,1)',
  23.                    'rgba(54, 162, 235, 1)',
  24.                    'rgba(255, 206, 86, 1)',
  25.                    'rgba(75, 192, 192, 1)',
  26.                    'rgba(153, 102, 255, 1)',
  27.                    'rgba(255, 159, 64, 1)'
  28.                ],
  29.                borderWidth: 1
  30.            }]
  31.        },
  32.        options: {
  33.            scales: {
  34.                yAxes: [{
  35.                    ticks: {
  36.                        beginAtZero:true
  37.                    }
  38.                }]
  39.            }
  40.        }
  41.    }); 
  42. });
  43. </script>

You can then include this chart view anywhere on the page:

  1. public function index()
  2. {
  3.     return Admin::content(function (Content $content) {
  5.         $content->header('chart');
  6.         $content->description('.....');
  8.         $content->body(view('admin.charts.bar'));
  9.     });
  10. }

Any chart library can be introduced in the above way, see view layout for multi-chart page layout