Can't display chart.js after fadeOut the pageloader

Question

I use preloader screen of MaterializeCSS Framework when loading. But when loaded. My chart that I create with Chart.js isn't display after fade the preloader out. Can someone look my code from jsFiddle solve the problem?

//Preloader
$(window).load(function() {
});
function show() {
	$('#preloader').fadeOut(500);
	$('#canvas').delay(500).fadeIn();
};

setTimeout(show, 3000);

//Chart.js
var radarChartData = {
    labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
    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,90,81,56,55,40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28,48,40,19,96,27,100]
        }
    ]
};
window.onload = function(){
    window.myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData, {
        responsive: true
    });
}

<script src="http://materializecss.com/js/init.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="valign-wrapper" id="preloader" style="height: 100%;">
    <div class="valign center-align" style="width: 100%;">
        <div class="preloader-wrapper big active" style="width: 100px; height: 100px">
            <div class="spinner-layer spinner-blue">
                <div class="circle-clipper left"><div class="circle"></div></div>
                <div class="gap-patch"><div class="circle"></div></div>
                <div class="circle-clipper right"><div class="circle"></div></div>
            </div>
            <div class="spinner-layer spinner-red">
                <div class="circle-clipper left"><div class="circle"></div></div>
                <div class="gap-patch"><div class="circle"></div></div>
                <div class="circle-clipper right"><div class="circle"></div></div>
            </div>
            <div class="spinner-layer spinner-yellow">
                <div class="circle-clipper left"><div class="circle"></div></div>
                <div class="gap-patch"><div class="circle"></div></div>
                <div class="circle-clipper right"><div class="circle"></div></div>
            </div>
            <div class="spinner-layer spinner-green">
                <div class="circle-clipper left"><div class="circle"></div></div>
                <div class="gap-patch"><div class="circle"></div></div>
                <div class="circle-clipper right"><div class="circle"></div></div>
            </div>
        </div>
        <p>Wait a minute...</p>
    </div>
</div>
<div id="chartcanvas" style="width:30%;">
    <canvas id="canvas" height="450" width="450" style="display: none"></canvas>
</div>

Answer 1

Move the chart initialization into the fadeIn call back

$('#canvas').delay(500).fadeIn(function() {
    window.myRadar = ...

If you need to fadeIn the chart as well, first show the canvas element with opacity 0 (or visibility hidden), initialize the chart and then fade it in.

If the canvas element (or sometimes the parent, when responsive is set) has no size when new Chart is called the height and width is taken as 0 and the chart is not visibly drawn.

---

Fiddle - http://jsfiddle.net/1jd9bmgo/