Google charts returning empty php mysql

Asked

Viewed 193 times

0

I’m creating a Chart with php mysql, but the same is not returning anything on the screen.

Queries are working normally in mysql.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawVisualization);


  function drawVisualization() {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'DATA');
    data.addColumn('string', 'VENDAS');
    data.addColumn('string', 'METAS');
    data.addRows([
    <?php
    $metas = mysql_query("SELECT 
                 i.imp_data AS DATA,
                 m.mt_mes   AS MES,
                 m.mt_ano   AS ANO,
                 FORMAT(m.mt_valor,2,'de_DE') AS META_TOTAL,
                 FORMAT(m.mt_valor / CAST(day(LAST_DAY(now())) as decimal),2,'de_DE') AS META_DIARIA,
                 FORMAT(SUM(i.imp_venda),2,'de_DE') AS VENDA
                   FROM metas AS m
                        LEFT JOIN importacao AS i ON m.mt_loja = i.imp_loja
                     WHERE m.mt_loja = 1
                            GROUP BY i.imp_data,i.imp_loja");
     while ($r = mysql_fetch_array($metas)) {
        echo "['$r[0]', '$r[3]]', '$r[5]]', \n";
    }
    ?>
    ]);

var options = {
  title : 'VENDAS ACUMULADAS',
  vAxis: {title: 'PERCENTUAL'},
  hAxis: {title: 'DIAS'},
  seriesType: 'bars',
  series: {2: {type: 'line'}}
};

var chart = new google.visualization.ComboChart(document.getElementById('vendas_diarias'));
chart.draw(data, options);

}

php mysql google-charts

  • Check what comes on your date, use console.log(date)

1 answer

1


Your code is not passing the data in the right way. See this example:

<?php
 $con = mysqli_connect('hostname','username','password','database');
?>

<!DOCTYPE HTML>
<html>
   <head>
      <meta charset="utf-8">
       <title>
          Create Google Charts
       </title>
       <script type="text/javascript" src="https://www.google.com/jsapi"></script>
       <script type="text/javascript">
          google.load("visualization", "1", {packages:["corechart"]});
          google.setOnLoadCallback(drawChart);

          function drawChart() {

             var data = google.visualization.arrayToDataTable([    
             ['Date', 'Visits'],
                <?php 
                   $query = "SELECT count(ip) AS count, vdate FROM visitors GROUP BY vdate ORDER BY vdate";    
                   $exec = mysqli_query($con,$query);

                   while($row = mysqli_fetch_array($exec)){    
                      echo "['".$row['vdate']."',".$row['count']."],";
                   }
                ?>     
             ]);

             var options = {
                title : 'Date wise visits'
             };

             var chart = new google.visualization.ColumnChart(document.getElementById("columnchart"));
             chart.draw(data, options);
          }
       </script>
   </head>
   <body>
       <h3>Column Chart</h3>
       <div id="columnchart" style="width: 900px; height: 500px;"></div>
   </body>
</html>

Just adapt to your code, changing the query and the options.

Browser other questions tagged php mysql google-charts

You are not signed in. Login or sign up in order to post.