Erro no gráfico... não exibe nada!

HTML

SQL

JavaScript

PHP

03/12/2018

Olá pessoas, estou com um problema que já estou tentando resolver tem um tempinho e ainda não consegui identificar.

Tenho um banco com 3 tabelas simples.

Ambiente
TABELA RENDA
id id_usuario nome data valor rd
22 1 Renda 6 2018-06-29 123.53 0
23 1 Renda 11 2018-11-10 34.65 0
24 1 Renda 9 2018-09-15 54.23 0

TABELA DESPESA
id id_usuario nome data valor rd
5 1 Despesa 1 2018-10-20 37.58 1
6 1 Despesa 2 2018-11-14 124.43 1
7 1 Despesa 3 2018-10-19 42 1
8 1 Despesa 4 2018-09-10 99.9 1
9 1 Despesa 5 2018-09-05 69.74 1
10 1 Despesa 6 2018-08-12 46.54

TABELA USUÁRIO
id p_nome u_nome sexo email senha
1 admin admin 0 admin@admin.br admin

Tenho um SQL que agrupa por mês a renda e a despesa de um determinado usuário. Por exemplo... se eu definir que quero os últimos 3 meses, então (segundo o ambiente) vamos ter

ANOME SUM(renda.valor) SUM(despesa.valor)
2018-09 54.23 169,64
2018-10 0 79,58
2018-11 34.65 124.43

E preciso de um gráfico para exibir isto, eu estou usando o Google Column Chart, já implementei em outras 2 paginas minhas... mas quando estou colocando nessa ele esta ficando branco. Eu já fiz o teste e esta parecendo que é o sql. Eu não consigo entender o motivo, pois quando executo o sql direto no banco ele funciona e retorna o que eu desejo mas quando coloco na pagina ele fica em branco.

SQL 
SELECT
                    tab.ANOMES,
                    (SELECT SUM(r.valor) FROM renda r
                              WHERE r.id_usuario = tab.id_usuario and DATE_FORMAT(r.data, '%Y-%m') = tab.ANOMES) vlr_renda,
                    (SELECT SUM(d.valor) FROM despesa d
                              WHERE d.id_usuario = tab.id_usuario and DATE_FORMAT(d.data, '%Y-%m') = tab.ANOMES) vlr_despesa
                  FROM
                    (SELECT id_usuario, DATE_FORMAT(data, '%Y-%m') ANOMES FROM renda
                     GROUP BY id_usuario, DATE_FORMAT(data, '%Y-%m')
                     UNION
                     SELECT id_usuario, DATE_FORMAT(data, '%Y-%m') ANOMES FROM despesa
                     GROUP BY id_usuario, DATE_FORMAT(data, '%Y-%m')
                     ) tab
                  WHERE
                    tab.id_usuario = 1
                    AND tab.ANOMES BETWEEN DATE_FORMAT(NOW() - INTERVAL 60 DAY, '%Y-%m') AND DATE_FORMAT(NOW(), '%Y-%m')
                  ORDER BY tab.ANOMES ASC


Eu já coloquei outro sql e ele funcionou... então por eliminação é um problema no SQL, mas o estranho é que ele funciona quando executado no banco. Se alguém puder me dar uma luz, agradeço desde já

Outra coisa é que o gráfico fica todo branco... não é uma questão que não esta vindo nenhum dado pois quando coloco um usuário que não existe ou que não tem registros o grafico fica null/null, mas o gráfico fica em branco...

Att Ian Costa
Ian Costa

Ian Costa

Curtidas 0

Respostas

Ian Costa

Ian Costa

03/12/2018

Código da página
<?php
  // Para não exibir mensagem de alerta
  error_reporting(1);

  // inicia a sessão
  session_start();

  // Não está logado?
  if ( $_SESSION["logado"] != "on" ) {

    // Redireciona para a página de login
    header("Location: index.php");

  }
?>


<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

    <title>Help</title>

    <!-- Bootstrap core CSS-->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom fonts for this template-->
    <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <!-- Page level plugin CSS-->
    <link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">
    <!-- Custom styles for this template-->
    <link href="css/sb-admin.css" rel="stylesheet">
    <!-- Add Fonte Montserrat-->
    <style>
      @import url('https://fonts.googleapis.com/css?family=Montserrat');
    </style>

    <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
    <!-- SCRIPT GRÁFICO - SCRIPT GRÁFICO - SCRIPT GRÁFICO - SCRIPT GRÁFICO  - SCRIPT   -->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      <?php
        // Variaveis
        $servidor = '';
        $usuario = '';
        $senha = '';
        $banco = '';

        $id_u = $_SESSION["id_usuario"];

        // Conectar ao BD
        $con1 = new mysqli($servidor, $usuario, $senha, $banco);

        //Arrays de renda
        $dataGraph = array();
        $valorRGraph = array();
        $valorDGraph = array();

        $i = 0;

        $sql = "  SELECT
                    tab.ANOMES,
                    (SELECT SUM(r.valor) FROM renda r
                              WHERE r.id_usuario = tab.id_usuario and DATE_FORMAT(r.data, '%Y-%m') = tab.ANOMES) vlr_renda,
                    (SELECT SUM(d.valor) FROM despesa d
                              WHERE d.id_usuario = tab.id_usuario and DATE_FORMAT(d.data, '%Y-%m') = tab.ANOMES) vlr_despesa
                  FROM
                    (SELECT id_usuario, DATE_FORMAT(data, '%Y-%m') ANOMES FROM renda
                     GROUP BY id_usuario, DATE_FORMAT(data, '%Y-%m')
                     UNION
                     SELECT id_usuario, DATE_FORMAT(data, '%Y-%m') ANOMES FROM despesa
                     GROUP BY id_usuario, DATE_FORMAT(data, '%Y-%m')
                     ) tab
                  WHERE
                    tab.id_usuario = 1
                    AND tab.ANOMES BETWEEN DATE_FORMAT(NOW() - INTERVAL 60 DAY, '%Y-%m') AND DATE_FORMAT(NOW(), '%Y-%m')
                  ORDER BY tab.ANOMES ASC";

        $resultado = mysqli_query($con1 ,$sql);

        while ($row = mysqli_fetch_object($resultado)) {

          $dataNew = explode("-", $row->ANOMES);

          $ano = $dataNew[0];
          $mes = $dataNew[1];

          $data = "$mes/$ano";
          $valR = $row->vlr_renda;
          $valD = $row->vlr_despesa;

          $dataGraph[$i] = $data;
          $valorRGraph[$i] = $valR;
          $valorDGraph[$i] = $valD;

          $i = $i +1;
        }

      ?>

      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() 
      {
        var data = google.visualization.arrayToDataTable
        ([
          ['Mês', 'Valor Renda', 'Valor Despesa'],
            <?php
              for ($k = 0 ; $k < $i ; $k++)
              {
            ?>
              ['<?php echo $dataGraph[$k] ?>', <?php echo $valorRGraph[$k]?> , <?php echo $valorDGraph[$k]?>],
            <?php 
              }
            ?>
        ]);

        var options = 
        {
          colors: ['#83BA2D','#CE4D4D'],
          legend: { position: 'none' }
        };

        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
    <!-- SCRIPT GRÁFICO - SCRIPT GRÁFICO - SCRIPT GRÁFICO - SCRIPT GRÁFICO  - SCRIPT   -->
    <!-- ############################################################################# -->
  </head>

  <body id="page-top">
    <div id="wrapper">
      <div id="content-wrapper">
        <div class="container-fluid">
          <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
          <!-- GRÁFICO - GRÁFICO - GRÁFICO - GRÁFICO - GRÁFICO --GRÁFICO - GRÁFICO - GRÁFICO -->
          <div align="center">
            <div id="columnchart_material" style="height: 500px; width: 1000px;"/>
          </div>
          <!-- GRÁFICO - GRÁFICO - GRÁFICO - GRÁFICO - GRÁFICO --GRÁFICO - GRÁFICO - GRÁFICO -->
          <!-- ############################################################################# -->
        </div>
        <!-- /.container-fluid -->
      </div>
      <!-- /.content-wrapper -->
    </div>
    <!-- /#wrapper -->

    <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
    <!-- SCRIPT - SCRIPT - SCRIPT - SCRIPT - SCRIPT - SCRIPT - SCRIPT - SCRIPT - SCRIPT-->
    <!-- Bootstrap core JavaScript-->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- Core plugin JavaScript-->
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
    <!-- Page level plugin JavaScript-->
    <script src="vendor/chart.js/Chart.min.js"></script>
    <!-- Custom scripts for all pages-->
    <script src="js/sb-admin.min.js"></script>
    <!-- Demo scripts for this page-->
    <script src="js/demo/chart-bar-demo.js"></script>
    <!-- SCRIPT - SCRIPT - SCRIPT - SCRIPT - SCRIPT - SCRIPT - SCRIPT - SCRIPT - SCRIPT-->
    <!-- ############################################################################# -->

  </body>

</html>
GOSTEI 0
Leonardo

Leonardo

03/12/2018

se não é questão de conexão com banco de dados então os valores retornados devem estar retornando 0
GOSTEI 0
Ian Costa

Ian Costa

03/12/2018

Leonardo, na verdade os valores estavam retornando NULL e por algum motivo estava dando conflito na hora de gerar o gráfico. Eu coloquei uma verificação de : se o valor da renda ou valor da despesa for null, transforme em 0. Depois disso começou a aparecer o gráfico =)
Obrigado!
GOSTEI 0
POSTAR