How do I alternate displaying two graphs by clicking one of two buttons using jquery and ajax?

jquery toggle between two classes
jquery add remove class onclick
jquery toggle class onclick
javascript toggle class onclick
jquery add remove class onclick codepen
how to show form input fields based on select value
jquery toggle multiple classes
jquery toggleclass not working

I have two graphs I want to display to the user. I want the first graph to display with two buttons below it when the page loads. I want to substitute the first graph with the second graph after the user clicks the first button (without reloading the page). I then want the first graph to reappear if the user clicks the second button.

I have successfully been able to achieve what I'm trying to do with the use of a dropdown. I just can't figure out how to adjust my code to work with buttons instead of a dropdown. Any help would be greatly appreciated.

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>

$('.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>

JQuery ajax changing between 2 button's class with 2 click event but , It changed to this <button class="open" id="1">Close</button> It only changed the class, the close text to open not. Can someone explain why it is  I want to be able to create multiple graphs on the same page where the data to each graph comes from separate CSV files. Is it possible to display buttons on the webpage, for each chart to appear, with the on click option ? This reply was modified 4 years, 1 month ago by ASK123.

Could you try this?

<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 );
        }
    });
}

JavaScript Examples, If you would like to display a form based on a single checkbox selection, you Hide the submit button on your form until certain fields are filled in. In order for this example to work, you must add two divs to your HTML field, like this: <script type="text/javascript"> jQuery(document).ready(function(){ var  1. Basic jQuery.each() Function Example. Let’s see how the jQuery.each() function helps us in conjunction with a jQuery object. The first example selects all the a elements in the page and

You have a select control with ID atl_graph. Let's imagine that you have two buttons, with IDs szns and noszns. Let's also give each button the same class, btnSznChg, so that both button clicks can be detected with a single click event.

Here's how it could work:

<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>

Top 18 Most Common AngularJS Mistakes That Developers Make , Common Mistake #1: Accessing The Scope Through The DOM It can be useful even when not using jQuery with its CSS, but should not be used Clicking the button labelled “Set primitive” will set foo in the inner scope to 2, but will not The alternative and most efficient way to assign models to use a controller object​  How to Show and Hide div elements using radio buttons? In order to display data/content of a specific element by selecting the particular radio button in jQuery we can use the following two methods: hide() methods: This method is used to hiding the syntax or the element of html that you want to hide.

.toggleClass(), Description: Add or remove one or more classes from each element in the set of matched elements, toggleClass( "bounce spin" ) to the same <div> alternates between <div 1. 2. 3. 4. 5. 6. 7. $( "div.foo" ).toggleClass(function() {. if ( $( this ).​parent().is( ".bar" ) ) { Toggle the class 'highlight' when a paragraph is clicked. This method is a shortcut for .on( "click", handler ) in the first two variations, and .trigger( "click" ) in the third. The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. Any HTML element can receive this event.

[PDF] Examples for the SIMATIC S7-1200 / S7-1500 Web Server, n s A. G 2. 0. 1. 8. A ll righ ts re se rv e d. Legal information. Use of application Transferring Data without Reloading Pages Using AJAX . Displaying a datalog generated by the controller as a graph Restarting the CPU using a button Some application examples use the “jQuery” and S7 Framework JavaScript libraries  To Perform a click event using jQuery, select the item and mention the .click() method. [code]<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com

Tutorial on Creating Charts, An interactive tutorial on creating HTML5 JavaScript Charts using CanvasJS. Alternate way of setting / updating data Show Axis Y line, axisY, lineThickness – 0, 1, 2, etc. with series name and y-axis value when user click on bar or line of chart. I basically don't want any lines on the graph, on the y axis, so I've set:. The difference between the 3 approaches in terms of speed should not be much, although I have observed that the animation extender is a little slower than the other two. Watch out for one of my forthcoming articles where I show a similar approach using jQuery! Mark: Thanks. Yes you can print the article.

Comments
  • This worked beautifully. Thank you so much! One small tweak I made to your code was to add the selected class (.selected) to the first button. That way the first button is shown to be selected and matches the graph being displayed on page load.
  • Nice tweak, great idea :)
  • This would work fine with two graphs, but not if there are more than two. Why not just assign the graph name to the button value, and use that?
  • Well, first Dustin said he had two graphs, so I went with that, and secondly I wanted to demo the ternary operator in case it was new to him. A useful little operator, that.