Highcharts with dataTable->table

cmplus

If I now have this code here in the Laravel viewer to see the table, how can I integrate Highcharts? How do I recall the table in the Highcharts code to display the right records in the chart?

@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 class="col-md-12">
                                    {{ $dataTable->table() }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer>
            @include('layout.footer')
        </footer>
    </div>
@endsection
@push('scripts')
    {{ $dataTable->scripts() }}
@endpush

kthorngren

See this blog and example.

Kevin

cmplus

@kthorngren Yes, I have always managed to do it with that but now I don't know how to do it, I don't have the id of the table, recalling it with the code I showed in this post I don't understand how to show the table to Highcharts, how do I get the id of the table outside the code I'm using for the tables?

kthorngren

I'm not familiar with Laravel. It looks like you are using Laraval Datatables. Not sure how Datatables is defined in this framework nor if there is a global variable assigned that you can access. If not possibly you can add an id attribute to the div wrapping the table, something like this:

                                <div id="my-datatable" class="col-md-12">
                                    {{ $dataTable->table() }}
                                </div>

Then use jQuery to find the table to get access to the Datatables API:

var table = $('#my-datatable').find('table');
var api = $( table ).DataTable();

If you have server side processing enabled you will only have access to the rows at the client, ie the current page or rows. In this case, depending on your requirements, you might want to find a Laravel Highcharts tutorial which won't use the Datatables data but will use the data from the DB.

Kevin

cmplus

I'm trying this way but I don't see anything, I don't understand, I can't recall the table records, the method doesn't work, I performed some counts in the table and I wanted to display them in the graph but if I can't make the graph communicate with the table I can't see them

allan

If you give us a link to what you are working on, perhaps we'll be able to spot something. As you can see from the link that Kevin gave, it is possible to draw a Highchart based on the content of a DataTable. Given that the example is working okay, we'd really need to see your own to understand why it isn't working.

Allan