Highcharts for DataTables basic example not working for me

spacemancw · October 2023

I have been using DataTables on my HTML tables for a few years. Now I want to add some charts with Highcharts.
I am trying to add the basic Pie chart example seen here, https://datatables.net/examples/api/highcharts.html
I have some modifications to my datatables such as hiding the default search box and adding a custom search box and exclude box, and striping the columns with alternate light and darker colors.

My web server is Apache 2.4 running on Red Hat 9

My HTML web page structure looks like this:

<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<HTML>
 <HEAD>
  <META HTTP-EQUIV=Refresh CONTENT=5000>

   <TITLE>STUFF</TITLE>
   <LINK REL="STYLESHEET" TYPE="text/css" HREF="/includes/new-nav.css">
   <LINK REL="STYLESHEET" TYPE="text/css" HREF="/includes/dropdownnav.css">
        <link rel="shortcut icon" href="/images/Favicon.png">
   <BODY MARGINWIDTH=0 MARGINHEIGHT=0 TOPMARGIN=0 LEFTMARGIN=0 RIGHTMARGIN=0>
 </HEAD>

<!-- DataTables JS -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script type="text/javascript" src="/js/DataTables-1.13.6/js/jquery.dataTables.min.js"></script>


<!-- my custom JS -->
<script type="text/javascript" src="/js/search.js"></script>
<script type="text/javascript"  src="/js/rdhighchart.js"></script>


<!-- DataTables CSS -->
<LINK REL="STYLESHEET" TYPE="text/css" HREF="/js/DataTables-1.13.6/css/jquery.dataTables.min.css">



<!-- Other CSS  for fa-info-circle and tooltop -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<LINK REL="STYLESHEET" TYPE="text/css" HREF="/resources/tooltip.css">

<!-- Additional files to make Highcharts work-->
    <LINK REL="STYLESHEET" TYPE="text/css" HREF="https://cdn.datatables.net/select/1.7.0/css/select.dataTables.min.css">
    <LINK REL="STYLESHEET" TYPE="text/css" HREF="//code.highcharts.com/css/highcharts.css">

    <script type="text/javascript" src="https://cdn.datatables.net/select/1.7.0/js/dataTables.select.min.js"></script>
    <script type="text/javascript" src="//code.highcharts.com/highcharts.js"></script>

.
My table's ID is "example".
My table has been working fine using all the js and css links above.
To try to add Highcharts, I added the links under "Additional files to make Highcharts work"

The HTML table looks like this, the div section comes from the above example from the dataTables website

<div id="demo-output" style="margin-bottom: 1em;" class="chart-display"></div>

<table style="table-layout:fixed; width:650px; border:0;" align=center  id="example" class="display" cellspacing="0">
<thead>
 <tr>
   <th class="column-title" width=100>COMPLETED</th>
   <th class="column-title" width=170>PROJECT</th>
   <th class="column-title" width=130>JOBNAME</th>
   <th class="column-title" width=80>USER</th>
   <th class="column-title" width=70>JOBID</th>
   <th class="column-title" width=60>STATUS </th>
 </tr>
</thead>

<tbody>

<tr> 
  <td align=left>2023-09-12 15:47:21</td> 
  <td align=left>mydata1</td> 
  <td align=left>mydata2/td> 
  <td align=left>mydata3</td> 
  <td align=left>mydata4</td> 
</tr>

</tbody>
</table>

In my custom JS section above, I have a file named rdhighchart.js that contains the Highcharts code lifted from the example above from the datatables web site

    // Create DataTable
const table = new DataTable('#example');

// Create chart
const chart = Highcharts.chart('demo-output', {
    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(3, { 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]
    }));
}

According to the example, I have the right javascript, the right HTML and CSS.
I am loading all the external js and css files required.

My table shows up as it always has, paginated and search box, but no pie chart.

So I decided to just make a blank html file and copy and paste the all the components from the example at https://datatables.net/examples/api/highcharts.html
This new page doesnt even show the table "DataTable-ized", no pagination, no search box and no chart.

If my both attempts, Chrome developers tools shows,

Uncaught TypeError: Cannot read properties of  rdhighchart.js:32
undefined (reading 'each')
   at chartData (rdhighchart.js:32:9)
   at rdhighchart.js:15
 chartData    @ rdhighchart.js:32
 (annonymous) @ rdhighchart.js:15

Line 32 is .each(function (val) {
Line 15 is data: chartData(table)

I do not know javascript, so I don't understand what's happening here.

There's another post about this example here, https://techsolutionstuff.com/post/how-to-integrate-datatable-with-highcharts, and the code looks to be the same.

Any help or pointing in the right direction would be greatly appreciated.

thanks

kthorngren · October 2023

Its usually best to create a test case or provide a link to your page so we can help debug. So I copied your code into this test case:
https://live.datatables.net/wujogufo/1/edit

I updated the CDN links for the Datatables code and removed others that may or may not apply to the problem. I added a column to the table so the number of columns match. The test case executes without errors. There must be something else on your page causing the error.

Please provide a link to your page or a test case or update the one I posted to show the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

spacemancw · October 2023

kthorngren .. thanks very much for looking at this.
I took you live code and put it into a file and that worked.
Then I copied elements of my file one by one back into the file to try to get it back to it's original. So I have a working version of it now. But it seems one of my scripts are conflicting wit it and causing double initialization.

So it looks like the High charts initializes with

// Create DataTable
 const table = new DataTable('#example');

this is my script for adding and exclude box, so that I can eliminate some of the search results,

/* Custom filtering function which will search data in column four between two values */
$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var exc = $('#exc').val();

        //process only if input value
        if (exc.length > 0) {
        var vrc = data[0]; // use data for the vc column
        var clu = data[1]; // use data for the cluster column
        var vfw = data[2]; // use data for the vfw column
        var ver = data[3]; // use data for the version column
        var wan = data[4]; // use data for the WAN column
        var six = data[5]; // use data for the WAN column
        var sev = data[6]; // use data for the seven column
        var eig = data[7]; // use data for the eight column
        var nin = data[8]; // use data for the nine column
        var ref = new RegExp(exc, 'ig');

        // VC
        if (vrc.match(ref))
        {
            return false;
        }

        // CLUSTER
        if (clu.match(ref))
        {
            return false;
        }

        // VFW
        if (vfw.match(ref))
        {
            return false;
        }

        // VERSION
        if (ver.match(ref))
        {
            return false;
        }

        // WAN
        if (wan.match(ref))
        {
            return false;
        }

        //SIX
        if (six.match(ref))
        {
            return false;
        }




    }


        return true;
    }
);



$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Blfrtip',
        buttons: [


            'colvis',

            {
                extend: 'excelHtml5',
                exportOptions: {
                    columns:  ':visible'
                }
            },
            {
                extend: 'csvHtml5',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'pdfHtml5',
                exportOptions: {
                    columns: [ ':visible' ]
                }
            },

            {
                extend: 'copyHtml5',
                exportOptions: {
                    columns: [ 0, ':visible' ]
                }
            },

            {
            extend: 'print',
              exportOptions: {
                    columns: ':visible'
               }
            }

        ]
    } );
} );

$(document).ready(function() {
     var table = $('#example').DataTable();

    // Event listener to the two range filtering inputs to redraw on input
    $('#exc').keyup( function() {
        table.draw();
    } );
} );

I suspect line 113, " var table = $('#example').DataTable(); " is conflicting with Highcharts. But I'm not sure how to make these 2 scripts play nicely together.

thanks

kthorngren · October 2023

So it looks like the High charts initializes with
const table = new DataTable('#example');

This initializes Datatables with the table containing the id example.

I suspect line 113, " var table = $('#example').DataTable(); " is conflicting with Highcharts

This will also initialize Datatables with the id of example.

The two statements do the same thing they are just using different syntax styles. The syntax is also used to get an instance of the Datatable's API. See this doc for details. The first one that executes will initialize Datatables and the second will just get the Datatables API.

It could be that you are using const then trying to reassign with var. Javascript constants cannot be reassigned. This might be the issue. I would make sure const table = new DataTable('#example'); executes first and remove var table = $('#example').DataTable();.

If you still need help then please post a link to a test case that replicates the issue so we can follow the code flow and help debug. Otherwise we will be guessing what the problem might be.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

spacemancw · October 2023

Kevin

thanks. I have set up a live demo here

https://live.datatables.net/bituyelo/2/
you will see that it initializes twice.
But the Exclude still works ...

Roger

allan · October 2023

You are initialising the DataTable 4 times there . You only need to do it once.

Try https://live.datatables.net/bituyelo/3/edit .

Allan

spacemancw · October 2023

Wow .. good catch! .. thanks very much. It looks and works a whole lot better now.

Next I have to figure out how to change those chart colors to match the color of the info circles.

But this is great!
thanks again

Highcharts for DataTables basic example not working for me

Highcharts for DataTables basic example not working for me

Answers

Howdy, Stranger!

Categories

DataTables

Highcharts for DataTables basic example not working for me

Highcharts for DataTables basic example not working for me

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables