Highcharts with dataTable->table

Highcharts with dataTable->table

cmpluscmplus Posts: 65Questions: 13Answers: 0

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

Replies

  • kthorngrenkthorngren Posts: 21,325Questions: 26Answers: 4,949

    See this blog and example.

    Kevin

  • cmpluscmplus Posts: 65Questions: 13Answers: 0

    @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?

  • kthorngrenkthorngren Posts: 21,325Questions: 26Answers: 4,949
    edited September 2023

    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

  • cmpluscmplus Posts: 65Questions: 13Answers: 0
    edited September 2023

    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

  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin

    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

Sign In or Register to comment.