Как я могу чередовать отображение двух графиков, нажимая одну из двух кнопок, используя jquery и ajax?

Question

У меня есть два графика, которые я хочу показать пользователю.Я хочу, чтобы первый график отображался с двумя кнопками под ним при загрузке страницы.Я хочу заменить первый график вторым графиком после того, как пользователь нажмет первую кнопку (без перезагрузки страницы).Затем я хочу, чтобы первый график снова появлялся, если пользователь нажимает вторую кнопку.

Мне удалось добиться того, что я пытаюсь сделать, с помощью раскрывающегося списка.Я просто не могу понять, как настроить мой код для работы с кнопками вместо выпадающего списка.Любая помощь будет принята с благодарностью.

jQuery:

$('#atl_graph').on('change',function(){

    $.ajax({
        url: "/atlanta",
        type: "GET",
        contentType: 'application/json;charset=UTF-8',
        data: {
            'selected': document.getElementById('atl_graph').value

        },
        dataType:"json",
        success: function (data) {
            Plotly.newPlot('graph', data );
        }
    });
})

HTML:

<div class="graph-container">
    <div class="graph-options">
        <label> Choose the plot type....</label>
        <select class="graph-options" id="atl_graph">
                <option value="No Seasons">No Seasons</option>
                <option value="Seasons">Seasons</option>
        </select>
    </div>

    <div id="graph">
        <script>
            var graphs = {{graph | safe}};
            Plotly.plot('graph',graphs,{});
        </script>
    </div>
</div>

Answer 1

$('.atl_graph').on('click',function(){

$('#selected').html(this.value);
$('.atl_graph').removeClass('selected');
$(this).addClass('selected');


    $.ajax({
        url: "/atlanta",
        type: "GET",
        contentType: 'application/json;charset=UTF-8',
        data: { 'selected': this.value },
        dataType:"json",
        success: function (data) {
            Plotly.newPlot('graph', data );
        }
    });
    
});

.selected {
  background-color: green;
  color: #fff;
  }

#selected {
  background-color: #ffffcc;
}
  
  .left {
  border-radius: 3px 0 0 3px;
  margin-right: 0;
  }
    
  .right {
  border-radius: 0 3px 3px 0;
  margin-left: 0;
  }
  
  button {
  background-color: #fff;
  color: #000;
  padding: 3px;
  border: 1px solid gray;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="graph-container">
    <div class="graph-options">
        <label> Choose the plot type....</label>
        <span class="graph-options" id="atl_graph">
                <button class="atl_graph left" value="NoSeasons">No Seasons</button><button class="atl_graph right" value="Seasons">Seasons</button>
        </span>
    </div>

    <div id="graph">
        <script>
            var graphs = {{graph | safe}};
            Plotly.plot('graph',graphs,{});
        </script>
       <p>You selected: <span id="selected"></span></p>
    </div>
</div>

Вместо использования события change для элемента select, используйте событие click для кнопки (сделав так, чтобы кнопки имели тот же класс, и используя этот класс в качестве селектора). Затем передайте значение нажатой кнопки (this.value) функции AJAX.

В коде есть дополнительная скобка {, но она не влияет на функциональность.

Answer 2

У вас есть элемент управления с идентификатором atl_graph. Давайте представим, что у вас есть две кнопки с идентификаторами szns и noszns. Давайте также присвоим каждой кнопке один и тот же класс btnSznChg, чтобы оба нажатия кнопки можно было обнаружить с помощью одного события щелчка.

Вот как это может работать:

<button id="szns" class="btnSznChg">Seasons</button>
<button id="noszns" class="btnSznChg">No Seasons</button>

$('.btnSznChg').click(function(){
    var tmp = this.id;
    var getgraph = (tmp == 'szns') ? 'Seasons' : 'No Seasons';

    $.ajax({
        url: "/atlanta",
        type: "GET",
        contentType: 'application/json;charset=UTF-8',
        data: {
            'selected': getgraph /* getgraph value is either "Seasons" or "No Seasons" */

        },
        dataType:"json",
        success: function (data) {
            Plotly.newPlot('graph', data );
        }
    });

});

$('.btnSznChg').click(function(){
    var tmp = this.id;
    var getgraph = (tmp == 'szns') ? 'Seasons' : 'No Seasons';
    console.log('Data sent via ajax is: ' + getgraph);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<button id="szns" class="btnSznChg">Seasons</button>
<button id="noszns" class="btnSznChg">No Seasons</button>

Answer 3

Не могли бы вы попробовать это?

<button type="button" onclick="reloadGraph('No Seasons');">No Seasons</button>
<button type="button" onclick="reloadGraph('Seasons');">Seasons</button>

function reloadGraph(type) {
  $.ajax({
        url: "/atlanta",
        type: "GET",
        contentType: 'application/json;charset=UTF-8',
        data: {
            'selected': type

        },
        dataType:"json",
        success: function (data) {
            Plotly.newPlot('graph', data );
        }
    });
}