I have a DataTable that has a column of checkboxes. As well as a HighStock chart. I'm trying to make it so when the corresponding checkbox in the datatable is checked, it shows/hides the appropriate series line on the chart as well as the axis that line is using.
Table:
<div class="panel-body">
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>List</th>
<th class="all">Foods</th>
<th class="all"><input name="select_all" value="1" type="checkbox"></th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>1</td>
<td>Apples</td>
<td><input type="checkbox" id="name1" /></td>
</tr>
<tr class="odd gradeX">
<td>2</td>
<td>Oranges</td>
<td><input type="checkbox" id="name2" /></td>
</tr>
<tr class="odd gradeX">
<td>3</td>
<td>Pears</td>
<td><input type="checkbox" id="name3" /></td>
</tr>
</tbody>
</table>
</div>
HighStock:
var seriesOptions = [],
seriesCounter = 0,
names = ['MSFT', 'AAPL', 'GOOG'];
/**
* Create the chart when all data is loaded
* @returns {undefined}
*/
function createChart() {
Highcharts.stockChart('container', {
alignTicks: false,
rangeSelector: {
selected: 4
},
yAxis: [{ // Primary yAxis
tickAmount: 8,
tickInterval: 1,
offset: 26,
labels: {
format: '{value}Apples',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Apples',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true,
min: 0,
max: 100,
}, { // Secondary yAxis
tickAmount: 8,
tickInterval: 1,
title: {
text: 'Pears',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} pears',
style: {
color: Highcharts.getOptions().colors[0]
}
},
id: 'pears-axis',
opposite: true,
min: 0,
max: 25,
}, { // Tertiary yAxis
tickAmount: 8,
gridLineWidth: 0,
title: {
text: 'Oranges',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} Oranges',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true,
id: 'orange-axis',
min: 0,
max: 100,
}],
plotOptions: {
series: {
compare: '',
showInNavigator: true
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2,
split: true
},
series: [{
name: 'Pears',
type: 'spline',
yAxis: 1,
data: [
[Date.parse('05/30/2017 13:30:00'), 24],
[Date.parse('05/30/2017 13:45:00'), 24],
[Date.parse('05/30/2017 14:00:00'), 24],
[Date.parse('05/30/2017 14:15:00'), 24],
[Date.parse('05/30/2017 14:30:00'), 24],
[Date.parse('05/30/2017 14:45:00'), 24],
[Date.parse('05/30/2017 15:00:00'), 24],
[Date.parse('05/30/2017 15:15:00'), 24],
[Date.parse('05/30/2017 15:30:00'), 24],
[Date.parse('05/30/2017 15:45:00'), 24],
[Date.parse('05/30/2017 16:00:00'), 24],
[Date.parse('05/30/2017 16:15:00'), 24]
],
tooltip: {
valueSuffix: ' V'
}
}, {
name: 'Oranges',
type: 'spline',
yAxis: 2,
data: [
[Date.parse('05/30/2017 13:30:00'), 20],
[Date.parse('05/30/2017 13:45:00'), 30],
[Date.parse('05/30/2017 14:00:00'), 40],
[Date.parse('05/30/2017 14:15:00'), 50],
[Date.parse('05/30/2017 14:30:00'), 60],
[Date.parse('05/30/2017 14:45:00'), 60],
[Date.parse('05/30/2017 15:00:00'), 60],
[Date.parse('05/30/2017 15:15:00'), 60],
[Date.parse('05/30/2017 15:30:00'), 70],
[Date.parse('05/30/2017 15:45:00'), 76],
[Date.parse('05/30/2017 16:00:00'), 78],
[Date.parse('05/30/2017 16:15:00'), 80]
],
marker: {
enabled: false
},
dashStyle: 'shortdot',
tooltip: {
valueSuffix: ' %'
}
}, {
name: 'Apples',
type: 'spline',
yAxis: 0,
data: [
[Date.parse('05/30/2017 13:30:00'), 70],
[Date.parse('05/30/2017 13:45:00'), 70],
[Date.parse('05/30/2017 14:00:00'), 76],
[Date.parse('05/30/2017 14:15:00'), 75],
[Date.parse('05/30/2017 14:30:00'), 78],
[Date.parse('05/30/2017 14:45:00'), 72],
[Date.parse('05/30/2017 15:00:00'), 80],
[Date.parse('05/30/2017 15:15:00'), 73],
[Date.parse('05/30/2017 15:30:00'), 75],
[Date.parse('05/30/2017 15:45:00'), 78],
[Date.parse('05/30/2017 16:00:00'), 72],
[Date.parse('05/30/2017 16:15:00'), 73]
],
tooltip: {
valueSuffix: ' °F'
}
}]
});
}
$.each(names, function (i, name) {
$.getJSON('http://ift.tt/2s0U00j' + name.toLowerCase() + '-c.json&callback=?', function (data) {
seriesOptions[i] = {
name: name,
data: data
};
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter += 1;
if (seriesCounter === names.length) {
createChart();
}
});
});
I tried using this code to make it so when the oranges checkbox is selected, it hides the line/series for Oranges, as well as the Oranges axis, then upon unchecking the box, both reappear. But instead, it keeps adding the Oranges axis over and over no matter it its checking the box or unchecking the box. How would I go about fixing this situation?
$('#name2').click(function() {
var chart = $('#container').highcharts();
var series = chart.series;
var seriesIndex = 0
if (this.selected) {
series[seriesIndex].hide();
chart.get('oranges-axis').remove();
} else {
series[seriesIndex].show();
chart.addAxis({ // Tertiary yAxis
tickAmount: 8,
gridLineWidth: 0,
title: {
text: 'Oranges',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} Oranges',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true,
id: 'orange-axis',
min: 0,
max: 100,
});
}
});
