Google Chart ajax | Gráficos na web parte 3: trabalhando com mais tipos e fontes de dados

Olá Cassia. Joia? Eu estou tendo construir um gerador de gráfico com requisição ajax. O erro que da é esse: "SyntaxError: Unexpected end of JSON input". Ele carrega o gráfico, busca o banco de dados ao iniciar. O problema é qd dou submit. Ele está gravando os dados mas não está atualizando. Provavelmente está relacionado com manipulação de Callback. Sei que o código está monstruoso e provavelmente eu cometi uns 30 erros de boas práticas de programação. rsrs Um deles está muito na cara pq a função de carregamento do gráfico e a de atualização são duas funções com códigos iguais, mas eu só sei fazer assim. Bom. É isso. Se puder me ajudar.

index.php

<html>
  <head>
    <meta charset="UTF-8">

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  </head>

  <body>
      <div class="container column">
      <div class="grafico">
          <div id="columnchart_values"></div>
      </div> 
            <form id="cadastra" action="" method="post" >
              <table class="tabela">
                <thead>
                  <tr>
                    <th>Ano</th>
                    <th>Fantasy & Sci Fi</th>
                    <th>Romance</th>

                  </tr>
                </thead>
                  <tr>
                  <td><input class="form-control" name="Ano" type="text"></input></td>
                  <td><input class="form-control" name="Fantasy" type="number"></input></td>
                  <td><input class="form-control" name="Romance" type="number">
                  </tr>
                  </table>
                  <button id="adicionar" type="submit">Adicionar</button>
            </form>
    </div>
  </body>
  <?php include("grafico.php");?>
  <script type="text/javascript">
    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);
        <?php include("conexao.php");
        include("banco-produto.php");?>

    function drawChart(){
        <?php $produtos = listaProdutos($conexao);?>

    var data = google.visualization.arrayToDataTable([
      ['Genre', 'Fantasy & Sci Fi', 'Romance',  { role: 'annotation' } ],
       <?php 
       foreach($produtos as $produto)
        {echo "['".$produto['Ano']."',"
        .$produto['Fantasy'].",".$produto['Romance'];}
      ?> 
    ]);

    var options = {
      width: 300,
      height: 300,
      legend: { position: 'top', maxLines: 3 },
      bar: { groupWidth: '75%' },
      isStacked: true,
    };
    var grafico = new google.visualization.ColumnChart(document.getElementById('columnchart_values'));
          grafico.draw(data, options);
    }
     $("#adicionar").click( function(event ) {
    // document.querySelector("#adicionar").addEventListener("click", function(event) {
    event.preventDefault();

    $.ajax({
        url: 'https://www.google.com/jsapi?callback',
        cache: true,
        dataType: 'script',
        success: function(){
            google.load('visualization', '1', {packages:['corechart'], 'callback' : function()
      {
        var form = document.querySelector("#cadastra");

        var dados = $('#cadastra').serialize();
        form.reset();

            $.ajax({
                 type: "POST",
                 dataType: "json",
                 async: true,
                 data: dados,
                 url: 'salvar.php',
                 success: function(response) {console.log("chegou aqui");
                    var data = google.visualization.arrayToDataTable([

      ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
       'Western', 'Literature', { role: 'annotation' } ],
<?php 
       foreach($produtos as $produto)
        {echo "['".$produto['Ano']."',"
        .$produto['Fantasy'].",".$produto['Romance'];}
      ?> 
    ]);
                    var options = options = {
      width: 300,
      height: 300,
      legend: { position: 'top', maxLines: 3 },
      bar: { groupWidth: '75%' },
      isStacked: true,
    };

                    var grafico = new google.visualization.ColumnChart(document.getElementById('columnchart_values'));
          grafico.draw(data, options);
                 },
                 error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        alert(thrownError);
      }
            });    
      }
    });
  }
});
});
    </script>
</html>

salvar.php

<?php
  include("conexao.php");
  include("banco-produto.php");

$Ano = $_POST['Ano'];
$Fantasy = $_POST['Fantasy'];
$Romance= $_POST['Romance'];

Oi Andrey,

eu não consigo rodar o seu código aqui, mas olhando para ele, como o erro reclama do JSON, suspeito do campo data:

data: dados

Como está o JSON de dados que você está passando?

Já te adianto que uma possível solução seria transformar o dado do JSON em string com stringify, então ficaríamos com

data: JSON.stringify(dados)

Me fale o que acontece, e, se possível, me mande um link do Github que eu rodo o projeto aqui para te ajudar melhor :).

Sobre boas práticas e o código, confie em você e continue fazendo como sabe. ^^

O mais importante é seguir aprendendo e praticando (e isso você já está fazendo). Outra coisa, é que você já apontou partes que acha que poderia melhorar, o que é fenomenal, porque ter essa consciência é o passo mais difícil, depois disso, é só executar.

Aguardo a sua resposta e siga mandando bala aí :P!

Mergulhe em programação