score:2

Accepted answer

In addition to Beetlejuice being correct about timeouts loading the charts, it looks like you're following the fullscreen overlay tutorial on w3schools, but only in part: the overlay styling from the tutorial is missing from your example code (and your JSFiddle).

The big 'Add CSS' section and the 'Add JavaScript' section is what actually hides the overlay and makes it work. If you'd like the overlay to hide, I suggest following the full tutorial instead of just the small HTML snippet at the top.

This is nothing to do with Bootstrap, or Laravel.

Edited JSFiddle with the tutorial CSS copy-pasted in:

/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */    
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}

score:2

You can put all the code that you have written directly into your <script> tag into a function, say show_charts() like this:

function show_charts()
{
  //All your code over here
}

and then you can associate it with an onclick function to any element you want to be clicked to load the charts, like this:

<img onclick="show_charts()" src="..." />

You can associate this to any element just by adding onclick="show_charts()" to your element tag. Hope this helps

score:3

When the browser comes across a <script> block, it will run what's inside the <script> tag, even if there is no window.load function.

Your browser is executing this line:

setTimeout(chart1, 30)

Once the timeout expires, it runs your chart1 and builds the chart.

Remove that line and this will no longer happen without user interaction.


Related Query

More Query from same tag