anvasJS chart rendering trouble in display:none div

[fede72bari]

Rendering a canvajs chart in an expandable div that by default at the page load is collapsed and not visible, creates an overlapping problem: the chart is shown in the background of the following divs. If I replace the chart with a predefined image, this image is rendered correctly being shown before the following divs elements. I have to underline that

1. the code for the chart creation and rendering is at the bottom of the html page
2. I cannot fix a size in the chart data because I need it responsively adapts to the container div dimension. The pre-defined image adapts properly to the display size.

This is the fragment of code where the chart is placed, you can recognize it in the remark tag <!– –>

<div class="panel table-responsive">
<div class="col-sm-12 col-xs-12 col-md-12 kp">
<form>

<div class="col-sm-12 col-xs-12 col-md-12 nor-inputs no-padding">
<div class="col-sm-12 mmt-12 col-md-12 col-xs-12 side-padding">
<!– <div id="chartContainer<?=$alarm->id?>"></div> –>
<img src="assets/img/graph.png" />
</div>

<!– <img src="assets/img/graph.png" /> –>
</div>
<div class="col-sm-12 col-xs-12 col-md-12 nor-inputs no-padding">

<div class="col-sm-6 mmt-10 col-md-6 col-xs-12 side-padding">
<input type="text" class="form-control artdpic" name="min_price_threshold" placeholder="2.5 USD">
<h6 class="posi2">MIN</h6>
</div>

<div class="col-sm-6 mmt-10 col-md-6 col-xs-12 side-padding">
<input type="text" class="form-control artddpic" name="max_price_threshold" placeholder="2.5 USD">
<h6 class="posi2">MAX</h6>
</div>

</div>

This is how the layout correctly appears opening the collapsable div when the first element is an image

while this is what happens once I try to render the graph:

the chart goes behind all the other elements. Any idea?

[fede72bari]

don’t know why screenshots links are not rendered, anyway here their URLs

image 1: https://www.dropbox.com/s/luagc3jw5j2qkbr/img%201.png?dl=0

image 2: https://www.dropbox.com/s/m4ibt5thnsk8e68/img%202.png?dl=0

[Vishwas R]

@fede72bari,

Rendering chart on shown.bs.collapse event should work fine in your case. Please take a look at this JSFiddle.

If you are still facing issue, kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can look in to the code, understand the scenario better and help you out.

—
Vishwas R
Team CanvasJS

[fede72bari]

Thank you for answering. The DIVs with the chart are opened clicking on another DIV and managed with this script

$(‘.active_alarms_modification_div’).each(function(i, obj) {
$(this).on(“click”, function(evt) {
setTimeout(function(){

/* Toggle between adding and removing the “active” class,
to highlight the button that controls the panel */
$(this).toggleClass(‘active’);

/* Toggle between hiding and showing the active panel */
var panel = $(this).next();
if (panel.css(“display”) === “block”) {
panel.css(‘display’, ‘none’);
} else {
panel.css(‘display’, ‘block’);
}

}, 100);
});

});

so it is a display attribute, none/block, rather than a .collapse. By default, all the containers have the attribute display=”none” at the page loading. The page is made by several .css and js files so the only way i can reproduce it for you is to save the page as HTML and send all the files and folder to you in a zip file or giving to you the URL and credential to access that pages. Is this fine?

• This reply was modified 4 years, 5 months ago by fede72bari.

[fede72bari]

here the zip file you can open the two section “keywords: …” to see what happens: https://www.dropbox.com/s/ahimeex9ql8i16o/TEST.zip?dl=0

[Vishwas R]

@fede72bari,

It would help us understand the scenario better and provide solution faster if you could navigate us to the exact code related to CanvasJS or share a sample by isolating the CanvasJS related code which reproduces the issue.

From what we have observed, sometimes things get delayed mostly when we are unable to reproduce the issue or when we are unable to debug CanvasJS related code as the application has many dependencies (.js files).

—
Vishwas R
Team CanvasJS