How to toggle between two plotly charts with plain html, css, js
I am very new to javascript and need some initial acceleration from the forum to understand the javascript area better.
I am using plotly (python) to generate graphs from backend. I have two platforms and corresponding to them, two graphs would be generated from backend and substituted in HTML using Jinja2 syntax. I want to toggle between these two graphs with only one DIV element. Could you please guide me in doing so? I tried with about 10-15 solutions provided using jQuery and jsfiddle but no luck.
// Function to plot bar graph function plot1(){ var bar_graph = {{ bar_graph_json | safe }}; Plotly.plot('chart1',bar_graph,{}); } // Function to plot pie chart function plot2(){ var pie_chart = {{ pie_chart_json | safe }}; Plotly.plot('chart1',pie_chart,{}); } // When page loads, by default display the bar graph. plot1();<!-- Page 4 --> <section id="page-4" class="page"> <!-- Button to be used for toggling between two graphs --> <button class="btn btn-link" onclick="plot2();"></button> <!-- Now I Need help here to configure the button to toggle between two graphs. Button name should change as per toggle // DIV tag for displaying the required chart and toggle between the two charts --> <div class="row chart" id="chart1"> </div> </section>
I am assuming you are able to generate the chart but need functionality to switch between them by pressing a button.
// your logic to draw both charts //Plotly.plot('chart1', bar_graph, {}); //Plotly.plot('chart2', bar_graph, {}); const toggleBtn = document.querySelector(".btn-toggle-chart"); const charts = document.querySelectorAll(".chart"); toggleBtn.addEventListener("click", (event) => { charts.forEach(chart => { chart.classList.toggle("hide"); }) }).hide { display: none !important }<section id="page-4" class="page"> <button class="btn btn-link btn-toggle-chart">Toggle Chart</button> <div class="row chart" id="chart1"> <p>Demo Chart 1</p> </div> <!-- hide second chart by default --> <div class="row chart hide" id="chart2"> <p>Demo Chart 2</p> </div> </section>
Please try:
<div class="row chart" id="chart1"></div> <script> function plot1(){ var bar_graph = {{ bar_graph_json | safe }}; Plotly.plot(document.getElementById('chart1'),bar_graph,{}); } function plot2(){ var pie_chart = {{ pie_chart_json | safe }}; Plotly.plot(document.getElementById('chart1'),pie_chart,{}); } plot1(); </script> </section> 
I would define 2 buttons and hide the appropriate one when clicked.
// Function to plot bar graph function plot1() { /* var bar_graph = { { bar_graph_json | safe } }; Plotly.plot('chart1', bar_graph, {}); */ changeButtons(); } // Function to plot pie chart function plot2() { /* var pie_chart = { { pie_chart_json | safe } }; Plotly.plot('chart1', pie_chart, {}); */ changeButtons(); } // Change the buttons function changeButtons() { const buttons = [...document.getElementsByClassName("btn")]; buttons.map( (button) => button.classList.toggle("hide") ); } // When page loads, by default display the bar graph. plot1();.hide { display: none; }<section id="page-4" class="page"> <button class="btn btn-link" onclick="plot1();">Bar graph</button> <button class="btn btn-link hide" onclick="plot2();">Pie chart</button> <div class="row chart" id="chart1"> </div> </section>
