change highcharts type combined with searchPanes only working before filter applied
change highcharts type combined with searchPanes only working before filter applied
cpshart
Posts: 246Questions: 49Answers: 5
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
This question has accepted answers - jump to:
Answers
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
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 ?
Best Colin
I'm guessing that
$.each(['line', 'column']refers to the buttons which have the id's oflineandcolumn. Looks like you have that code inside thecreateHighcharts(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
myChartvariable inside the event, like this:This is more a generic Javascript issue and not really a Datatables issue.
Kevin
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
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
When you are calling the
createHighcharts()function it is setting the type using this:You are probably defaulting the variable
chartTypetolinebut not changing the variable when changing the chart type in the click event.Kevin
Hi Kevin
Great just added line
chartType = type;as followsThis has fixed the problem, all sorted and makes sense !!
Many Thanks for your help Colin