Charts and live tables

DataTables

Make sure that you already integrated jQuery to your project.

PS: JQuery Tag has to be written before datatables.

<script src="https://code.jquery.com/jquery-3.7.1.js"</script>

Then, you have to include these two files;

<link rel="stylesheet" href="//cdn.datatables.net/2.2.1/css/dataTables.dataTables.min.css">
<script src="//cdn.datatables.net/2.2.1/js/dataTables.min.js"></script>

Initialise your DataTable:

<script>
let table = new DataTable('#myTable');
</script>

Now, you need to be sure, that you use the same id in your HTML Table.

For example;

<table id="myTable">
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
</table>

Live Charts with Chart.js

Make sure, that you've already written the route in your web.php.

Example;

Route::get('/diagram', function () {
return view('diagram');
});

To display live-updating charts, you can use Chart.js.

Add this to your <head> section:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

In the <body> you need to be sure, that you use the same id in your div Container.

Example;

<div>
  <canvas id="myChart"></canvas>
</div>

The JavaScript code for your diagram:

<script>
  const ctx = document.getElementById('myChart');
  new Chart(ctx, {
    type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
</script>