Graphs vanish when they are displayed in concealed sections

Looking for a way to toggle between two charts (created with charts.js) by clicking a button?

Initially, I had them in separate divs, one hidden and the other visible:

<div id="one">
    <canvas id="myChart1" width="400" height="400"></canvas>
</div>
<div id="two" class="hidden">
    <canvas id="myChart2" width="400" height="400"></canvas>
</div>

Removing the 'hidden' class resulted in the chart not being displayed.

You can find an example on JSFiddle: http://jsfiddle.net/2rzkpzy9/12/

Is there a workaround or another approach to switch between these charts?

var data1 = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        }]
};
var data2 = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "#FD6260",
            strokeColor: "#FD6260",
            pointColor: "#FD6260",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        }]
};

var options = {
    scaleShowGridLines : false,
    scaleShowHorizontalLines: false,
    scaleShowVerticalLines: false,
 }

var cxt = document.getElementById("myChart1").getContext("2d");
var chart = new Chart(cxt).Bar(data1,options);

var cxt2 = document.getElementById("myChart2").getContext("2d");
var chart2 = new Chart(cxt2).Bar(data2,options);
        
swap= function() {
     console.log(document.getElementById("one").className);
     document.getElementById("one").className = "hidden";
     document.getElementById("two").className = '';
    console.log(document.getElementById("one").className);
}
.hidden {
    display: none;
}
<script src="http://www.chartjs.org/assets/Chart.js"></script>
<div id="one">
    <canvas id="myChart1" width="400" height="400"></canvas>
</div>
<div id="two" class="hidden">
    <canvas id="myChart2" width="400" height="400"></canvas>
</div>
<button type="button" class="btn" onClick="swap()">Swap!</button>
<div id="info"></div>

javascripthtmlcsshiddenchart.js

Answer №1

I have not had the opportunity to work with Chart.js directly, but after examining the source code, it appears that the library queries the Document Object Model (DOM) to retrieve height and width values for rendering purposes. If the containing div element is hidden from view, the query likely returns a value of `0`. Therefore, the chart within the hidden container will most likely be rendered as 0x0 in size. You can observe this behavior in action by visiting this example:

var width = document.getElementById('myChart').offsetWidth;

document.getElementById('info').innerHTML = width.toString();
.hidden {
    display: none;
}
<div class="hidden">
    <canvas id="myChart" width="400" height="400"></canvas>
</div>

<div id="info"></div>

To address this issue, one potential solution could involve setting the width and height explicitly (where available through Chart.js configuration), or alternatively rendering the chart first before hiding the respective element—albeit not an elegant approach due to possible flickering effects upon visibility toggles. A variation of the latter workaround entails utilizing techniques like `position: absolute; top: -1000px` to effectively relocate the 'hidden' div element off-screen rather than enforcing standard display concealment via `display: none`.

You can examine the updated fiddle illustrating the second option implemented here: http://jsfiddle.net/2rzkpzy9/13/ - showcasing successful resolution:

var data1 = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        }]
};
var data2 = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "#FD6260",
            strokeColor: "#FD6260",
            pointColor: "#FD6260",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        }]
};

var options = {
    scaleShowGridLines : false,
    scaleShowHorizontalLines: false,
    scaleShowVerticalLines: false,
 }

var cxt = document.getElementById("myChart1").getContext("2d");
var chart = new Chart(cxt).Bar(data1,options);

var cxt2 = document.getElementById("myChart2").getContext("2d");
var chart2 = new Chart(cxt2).Bar(data2,options);
        
swap= function() {
     console.log(document.getElementById("one").className);
     document.getElementById("one").className = "hidden";
     document.getElementById("two").className = '';
    console.log(document.getElementById("one").className);
}
.hidden {
    position: fixed;
    top: -1000px;
}
<script src="http://www.chartjs.org/assets/Chart.js"></script>
<div id="one">
    <canvas id="myChart1" width="400" height="400"></canvas>
</div>
<div id="two" class="hidden">
    <canvas id="myChart2" width="400" height="400"></canvas>
</div>
<button type="button" class="btn" onClick="swap()">Swap!</button>
<div id="info"></div>

Answer №2

Instead of concealing the tab that is not active, adjust its height to 0px and use overflow:hidden

Your CSS could appear like this:

#page1, #page2
{
height:auto;
overflow:inherit;
}
#page1.hidden, #page2.hidden
{
height:0;
overflow:hidden;
}

Answer №3

Give this a shot

toggleDisplay= function() {
 console.log(document.getElementById("first").className);
 if(document.getElementById("first").className == "hidden"){
 document.getElementById("first").className = '';
 document.getElementById("second").className = 'hidden';
 }else{
 document.getElementById("first").className = 'hidden';
 document.getElementById("second").className = '';
 }

console.log(document.getElementById("first").className);

}

var data1 = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "First Dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        }]
};
var data2 = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "Second Dataset",
            fillColor: "#FD6260",
            strokeColor: "#FD6260",
            pointColor: "#FD6260",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        }]
};

var options = {
    scaleShowGridLines : false,
    scaleShowHorizontalLines: false,
    scaleShowVerticalLines: false,
 }

var cxt = document.getElementById("chartOne").getContext("2d");
var chart = new Chart(cxt).Bar(data1,options);

var cxt2 = document.getElementById("chartTwo").getContext("2d");
var chart2 = new Chart(cxt2).Bar(data2,options);
        
toggleDisplay= function() {
     console.log(document.getElementById("first").className);
     if(document.getElementById("first").className == "hidden"){
     document.getElementById("first").className = '';
     document.getElementById("second").className = 'hidden';
     }else{
     document.getElementById("first").className = 'hidden';
     document.getElementById("second").className = '';
     }
     
    console.log(document.getElementById("first").className);
}
.hidden {
    position: fixed;
    top: -1000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<div id="first">
    <canvas id="chartOne" width="400" height="400"></canvas>
</div>
<div id="second" class="hidden">
    <canvas id="chartTwo" width="400" height="400"></canvas>
</div>
<button type="button" class="btn" onClick="toggleDisplay()">Toggle!</button>
<div id="info"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Choosing Between Select, Radio Buttons, and Checkboxes: A Comparison

What sets apart the meaning when choosing between a <select> element containing <option> children versus using an <input type="radio"> elements placed within a parent <fieldset>? Both options allow users to select only one choice. T ...

htmlformssemantic-markup

There seems to be an issue with the zebra striping in the rich:datatable component when using the rowClasses

I'm attempting to give my table a "zebra" color pattern for the rows, but it seems like the rowClasses attribute isn't functioning properly (edit: I don't see any colors applied to the table at all). Here is how I defined the styles: <s ...

cssrichfaceszebra-striping

Storing the radio button's selected value in local storage using Vue JS

I have a pair of radio buttons that are linked together to accept a boolean value, either true or false. I am trying to implement a functionality where the selected value is stored in local storage. For example, if true is chosen, then true will be saved i ...

javascriptvue.jsvuejs2local-storage

Discover the best method for sending multiple API requests to Vuex store using Nuxt middleware

I am having trouble figuring out how to make multiple API calls to Vuex store from Nuxt middleware. I have successfully implemented it for a single API call, but I can't seem to get it working for multiple APIs. // middleware/log.js import axios fro ...

javascriptvue.jsvuejs2vuexnuxt.js

Tips for reading user input in a terminal using node.js

Before deploying my code to the server, I'm looking to conduct some local node testing. How can I take terminal input and use it as an input for my JavaScript script? Is there a specific method like readline that I should be using? ...

javascriptnode.jsterminal

Unexpected "<" and dual output in jade include seem to defy explanation

i am currently redesigning my website to incorporate dynamic includes. These includes are pre-rendered on the server and then passed to res.render() however, I am encountering unexpected occurrences of < and > on the page, along with the issue of th ...

javascriptnode.jsexpressincludepug

Steps for adding a background image to a div element

I am struggling to place my background behind the jumbotron div, but no matter what I do, it always ends up appearing below the image instead of on top of it. Can someone please guide me on how to resolve this issue? Note: I have a specific requirement wh ...

htmlcssbootstrap-4

"Troubleshooting problem with fetching JSON data for Highcharts

As a relative newcomer to web development, my usual focus is on server-side work. Currently, I'm diving into a fun little electronic project where a Netduino server handles JSON requests within my LAN. The JSON response format from the Netduino looks ...

javascriptjsonhighcharts

Using the Backbone.js library to make secure requests over https

Currently, I am developing a single page application that involves using Backbone.js and Marionette on the front end, combined with Django and Tastypie on the back end. Recently, I successfully implemented an SSL certificate on the web server and configure ...

javascriptjquerydjangobackbone.jshttps

Transferring data from local storage to a PHP server using AJAX

My attempt to transfer data from local storage to PHP using AJAX resulted in an error mentioning 'undefined index data'. chart.php <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="t ...

javascriptphpjqueryajaxhtml

Transform website code into email-friendly HTML code

Is there any software available that can convert web HTML and CSS files to email HTML with inline CSS? This would allow the email to be viewable on various email clients such as Outlook, Thunderbird, Gmail, Yahoo, Hotmail, etc. I want to write my code lik ...

htmlcssxhtmlnewsletter

When making an Ajax request to another website, the response received is in HTML format instead of

I am attempting to retrieve an array by making an AJAX GET request to a URL. Below is my controller code, which is hosted locally at localhost:3000 def merchant_ids merchants = Merchant.where(id: params[:id]).pluck(:merchant_name, :id, :merchant_city, ...

javascriptjqueryruby-on-railsarraysajax

Explore the functions of jQuery's .css() method and the implementation of

Could use some assistance with the .css() method in jQuery. Currently working on a mouseover css menu, and encountering an issue when trying to include this code: $(this).siblings().css({backgroundColor:"#eee"}); at the end of my script. It seems to int ...

jquerycss

Interacting with HTML elements in Java programming

I am facing a challenging situation that requires some brainstorming. I would greatly appreciate any advice or guidance in the right direction. My goal is to incorporate a Google Map into my Java Swing project, with the map being specified as a URL wit ...

javajavascripthtmlmaps

Can React JSX and non-JSX components be combined in a single project?

I'm currently faced with a question: If I have a parent component in JSX but need to include an HTML tag like <i class="fa fa-window-maximize" aria-hidden="true"></i>, which is not supported by React JSX (correct me if I'm wrong), can ...

javascripthtmlreactjsjsx

Iterating through data to showcase vertical columns for a specific time span of 3 years, highlighting only the months with available data

If data has been available for every month over the past 3 years, I need it to be displayed in a specific format. You can refer to this example fiddle for reference: https://jsfiddle.net/bthorn/ncqn0jwy/ However, there are times when certain months may no ...

javascriptjqueryhtmlcss

Expanding the size of the number input in Twitter Bootstrap to accommodate changing content dimensions

I have a numeric input field that I want to customize in terms of width. I need the field to start with a minimum width so that -1, the default value, fits nicely inside. As the value changes, whether decreasing to -100 or increasing to -1,000 and beyond ...

javascriptjquerytwitter-bootstrap

Transitioning between states in React with animation

In my React application, I have a menu that contains a sub-menu for each item. Whenever an item is clicked, the sub-menu slides in and the title of the menu changes accordingly. To enhance user experience, I aim to animate the title change with a smooth fa ...

javascriptreactjs

Does the image alter based on the selection in the dropdown menu?

When I utilize the Templating Example from the select2 library, everything seems to work for the first dropdown value change. The correct image is previewed as expected. However, when trying to change the value a second time, a second image is appended but ...

javascriptjquery

Initializing ng-app with a specific name will prevent the initialization of variables

Here is the code snippet I am working with: <div ng-app="" ng-init="show_login=false;count=0"> <button> ng-click="show_login=!show_login;count=count+1">INSPIRE</button> <form ng-show="show_login"> Username <input type="t ...

javascriptangularjsangularjs-directiveangularjs-controller