I am currently working on a project where I need to create functionality for three buttons, each triggering a unique graph effect. The key requirement is that when one button is pressed, the other two should be deactivated along with their corresponding functions.
Button 1 should activate Function 1 and deactivate Functions 2 and 3. Button 2 should activate Function 2 and deactivate Functions 1 and 3. Button 3 should activate Function 3 and deactivate Functions 1 and 2.
For example, pressing Button 1 will display a graph with points 14, 10, and 11. Button 2 will display points 26, 31, and 28, while Button 3 will display points 52, 48, and 38.
For reference, you can view the implementation on jsfiddle http://jsfiddle.net/sctcmr1h/6/
HTML
<button type="button" class="btn" id="button1" >Button 1</button>
<button type="button" class="btn" id="button2">Button 2</button>
<button type="button" class="btn" id="button3">Button 3</button>
<div id="container"></div>
CSS
.btn.active, .btn:active {
background: #124364;
text-decoration: none;
}
#container{
width: 400px;
height: 100%;
background-color: #336699;
color: white;
}
JavaScript
$(function button1() {
var data = [{
X: 14
}, {
X: 10
}, {
X: 11
}];
var processedData = [];
Highcharts.each(data, function button1(d) {
processedData.push(d.X);
});
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 1
},
series: [{
data: processedData,
}],
});
});
$(function button2() {
var data = [{
X: 26
}, {
X: 31
}, {
X: 28
}];
var processedData = [];
Highcharts.each(data, function button2(d) {
processedData.push(d.X);
});
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 1
},
series: [{
data: processedData,
}],
});
});
$(function button3() {
var data = [{
X: 52
}, {
X: 48
}, {
X: 38
}];
var processedData = [];
Highcharts.each(data, function button3(d) {
processedData.push(d.X);
});
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 1
},
series: [{
data: processedData,
}],
});
});
http://jsfiddle.net/sctcmr1h/6/
My approach to tackling this problem involves utilizing specific JavaScript functions for the buttons to ensure exclusivity and proper functionality. Here is a simplified version of what I am attempting:
$(document).ready(function() {
$('#Button ID').click(function 1 2 or 3() {
if ($(this).hasClass('active')) {
$('#container').hide();
} else {
$('#container').show();
function 1 2 or 3();
}
$(this).toggleClass('active');
});