I'm trying to integrate highcharts with yajra but for now I haven't succeeded, at the moment to display the table in the blade view file I have this code, but how to recognize the table with highcharts is not yet clear to me, I'm trying anyway with negative result I don't see any results, does anyone have any idea how to do this? In the table I have performed some counts and calculations that I would like to see with highcharts and therefore I should be able to recognize the TableDatatables.php table that I display with this code inserted in the view
@section('content')
<div class="main-panel">
<div class="content-wrapper">
<div class="row">
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<p class="card-title">Tickets</p>
<div class="row">
<div id="my-datatable" class="col-md-12">
{{ $dataTable->table() }}
</div>
<div id="container"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
@include('layout.footer')
</footer>
</div>
@endsection
@push('scripts')
<script src="https://code.highcharts.com/highcharts.js"></script>
{{ $dataTable->scripts() }}
<script type="text/javascript">
var table = $('#my-datatable').find('table');
var api = $( table ).DataTable();
const chart = Highcharts.chart('container', {
chart: {
type: 'pie',
styledMode: true
},
title: {
text: 'Staff Count Per Position'
},
series: [
{
data: chartData(table)
}
]
});
// On each draw, update the data in the chart
table.on('draw', function () {
chart.series[0].setData(chartData(table));
});
function chartData(table) {
var counts = {};
// Count the number of entries for each position
table
.column(1, { search: 'applied' })
.data()
.each(function (val) {
if (counts[val]) {
counts[val] += 1;
}
else {
counts[val] = 1;
}
});
return Object.entries(counts).map((e) => ({
name: e[0],
y: e[1]
}));
}
</script>
@endpush