change highcharts type combined with searchPanes only working before filter applied

cpshart

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Hi, I want to be able to change the Highcharts type (line, column, area etc.), the script below changes the chart type to line or column on selecting the buttons successfully.

Once I apply a filter using the Search or searchPanes, the filter is reflected in the datatable and applied to the chart, but I can no longer change the chart type on selecting the buttons.

Let me know if you need details PM'd of access to my system, otherwise script and webpage are given below, with thanks.

The client script is as follows

https://www.dividendview.co.uk/wp-admin/post.php?post=31911&action=edit

To run the script

https://www.dividendview.co.uk/holdings-by-portfolio/

client script extract below

<button id="column" style="margin-left: 2em">Column</button>
<button id="line">Line</button>
<div id="container_datatables" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    
        
<table id="holdings_byportfolio" class="display compact nowrap" style="width:100%">
<thead>
    
<tr>
<th>Portfolio</th>
<th>Symbol</th>
<th>Name</th>

... etc
$(document).ready(function() {

dt = $(dt).DataTable( {
    
... etc

  var tableData = getTableData(dt);     
  var groupBytableData = [];    
  console.log('tableData',tableData);
    
  createHighcharts(tableData);
  setTableEvents(dt);
    
function getTableData(dt) {
.... etc

dataArray.push(groupBySymbolArray, groupByValueArray);
    
return dataArray;
}
        
        
function createHighcharts(data) {
    $('#container_datatables').highcharts({ //2
        
    xAxis: [
      {
        categories: data[0],        
        labels: {
          rotation: -45
        }
      }
    ],
    yAxis: [
      {
        // first yaxis
        title: {
          text: "Value"
        }
      }
    ],  
    series: [
      {
        name: "Value",
        color: chartColor,
        type: chartType,
        data: data[1],
      }
    ]

        
}); //2
        
   var myChart = $('#container_datatables').highcharts();
        
    // Set type
    $.each(['line', 'column'], function (i, type) {
        $('#' + type).click(function () {
            console.log('281 myChart.series[0]: ',myChart.series[0]);
            
            myChart.series[0].update({
                type: type
            });
        });
    });
    
    
}
    
let draw = false;
 
function setTableEvents(table) {
  // listen for page clicks
  table.on("page", () => {
    draw = true;
  });
 
  // listen for updates and adjust the chart accordingly
  table.on("draw", () => {
    if (draw) {
      draw = false;
    } else {
      var tableData = getTableData(table);
      createHighcharts(tableData);
    }
  });
}   
    
});
    
}(jQuery));</script>

any help, much appreciated.

Thanks Colin

kthorngren

First I would check to make sure the button click events are firing. If they are then you will need to debug what is happening in the event function. Not sure why searching would affect highcharts.

Kevin

cpshart

Hi Kevin

Thanks for your quick response, I have just put extra debug into the code

To Change chart type line the following section of code is invoked which is the case before any filtering, however after filtering the console.log line 281 is not displayed. I will continue trying to debug, but let me know if you have any other ideas, thanks ?

   var myChart = $('#container_datatables').highcharts();

    // Set type
    $.each(['line', 'column'], function (i, type) {
        $('#' + type).click(function () {
            console.log('281 myChart.series[0]: ',myChart.series[0]);
             
            myChart.series[0].update({
                type: type
            });
        });
    });

Best Colin

kthorngren

I'm guessing that $.each(['line', 'column'] refers to the buttons which have the id's of line and column. Looks like you have that code inside the createHighcharts(tableData); function. You probably only want to create the event once. That function is called for each table draw or page event and is adding a new event each time called. Move that code outside the function so its executed only once.

Additionally move the assignment of the myChart variable inside the event, like this:

 // Set type
 $.each(['line', 'column'], function (i, type) {
     $('#' + type).click(function () {
         var myChart = $('#container_datatables').highcharts();
         console.log('281 myChart.series[0]: ',myChart.series[0]);

         myChart.series[0].update({
             type: type
         });
     });
 });

This is more a generic Javascript issue and not really a Datatables issue.

Kevin

cpshart

Hi Kevin

Many thanks, that has solved the problem for me, I am sorry if I should not have posted on this forum being more of a javascript issue, I will take that on board.

Nevertheless I am very pleased this issue is fixed.

Best Regards

Colin

cpshart

Hi Kevin

I will try an solve myself, but when you are applying a filter using searchPanes, each time a value is selected or deselected the chart type reverts to line, where as it needs to only change the chart type only when a button is pressed.

Pressing a button say for Column will change the chart to column, but then making a change to the searchPane filter reverts the chart type back to line

Best regards

Colin

kthorngren

When you are calling the createHighcharts() function it is setting the type using this:

    series: [
      {
        name: "Value",
        color: chartColor,
        type: chartType,
        data: data[1],
      }
    ]

You are probably defaulting the variable chartType to line but not changing the variable when changing the chart type in the click event.

Kevin

cpshart

Hi Kevin

Great just added line chartType = type; as follows

    $.each(['line', 'column'], function (i, type) {
        console.log("$('#' + type)",$('#' + type));
        $('#' + type).click(function () {
           var myChart = $('#container_datatables').highcharts();
            chartType = type;
            myChart.series[0].update({
                type: type
            });
        });
    });

This has fixed the problem, all sorted and makes sense !!

Many Thanks for your help Colin