Upload Screen

0

I'm here again.

I have a page (index), which calls a javaScript, to put a graphic on the screen, I am getting it, however the graphic is taking a while to render and how much it does not render the screen is all white, , but I'm not getting it, I tried the solution:

How to make a screen loading before opening the site

But I did not succeed, in fact the gif appears and goes very fast from the screen and it turns white until loading the graphic.

My html

<!doctype html>
<html lang="pt-br">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="refresh" content="900">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <!-- jQuery -->
    <script src="js/jquery-3.3.1.js"></script>

<title>Idade</title>
 </head>
   <body> 

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div id="grafico" class="chart-container">
                <canvas id="graficoIdade"></canvas> //Lugar de renderização do grafico
            </div>
        </div>
    </div>
</div>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script><!--Chart--><scriptsrc="js/graficoIdade.js"></script> //chamando o arquivo do grafico
</body>
</html>

My Js

   $(document).ready(function(){

      $.post({
      url:"graficos/gerarGraficoIdade.php",
      method: "POST",
      cache: false,
      success: function(idades){

        var nome = [];
        var idades = [];
        var color = [];
        var colorBorder = [];


        $.each(JSON.parse(idades), function(i, obj){
            nome.push([obj.nome]);
            idades.push(obj.idade);
            color.push('rgba(42, 99, 206, 0.2)');
            colorBorder.push('rgba(42, 99, 206, 1)');                
        });

        var ctx = document.getElementById("graficoIdade").getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: nome,
                datasets: [{
                    label: 'Idades',
                    data: idades,
                    backgroundColor: color,
                    borderColor: colorBorder,
                    borderWidth: 1
                }]
            },
            options: {
                legend: {
                    display: true,
                    position: 'top',
                    labels: {
                        fontColor: "#2a63ce",
                        padding: 10
                    }
                },
                responsive: true,
            }
        });
    },
    error: function() {

    }
   })

}); '

    
asked by anonymous 28.09.2018 / 15:27

0 answers