Google chart does not display results from MySql database

I have a problem with google charts but nothing appears. When I delete php code, it says no data, but with the code it just does not appear. Here’s the code:

   <?php
    $con = mysqli_connect('localhost', 'root', '');
    mysqli_select_db($con, 'gamefort');

    $s = " select naziv, broj from konzola group by naziv ";
    $result = mysqli_query($con, $s);
    ?>

<script type="text/javascript">
        google.charts.load('current', {
            'packages': ['corechart']
        });
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = new google.visualization.arrayToDataTable([
                ['Naziv','Broj'],
                <?php
                while($row = mysqli_fetch_assoc($result)){
                    echo "['".$row["naziv"].",".$row["broj"]."'],";
                }
                ?>
            ]);

            var options = {
                'title': 'Statistika',
                'width': 400,
                'height': 300
            };

            var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
</script>

Any suggestions? Thanks in advance.

Answer

Working with dynamic php code

<?php 
$con = mysqli_connect('localhost', 'root', '','gamefort');

$s = "select naziv, broj from konzola group by naziv";
$result = mysqli_query($con, $s);
$data_array = array();

while($row = mysqli_fetch_assoc($result)){

    //$data_array[] = array_values($row);
    $data_array[] = ($row);
}
  $chart= json_encode($data_array);


?>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>


 <!-- <input type="text" value="x" id="test" /> -->
  <div id="Salesman" style="width: 650px; height: 500px;"></div> 

</body>

</body>
</html>



<script type="text/javascript">



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

  function drawVisualization() {
    var chart_array= <?php echo $chart; ?>;

    var header = ['Naziv', 'Broj'];
    var row = "";            
    var rows = new Array();

      jQuery.each(chart_array, function( i, d ) {
         row = [d.naziv,Number(d.broj)];
          rows.push(row);
        });  

       var jsonData = [header].concat(rows);

      var data = google.visualization.arrayToDataTable(jsonData);
    var options = {
      title : 'Month & Yearly Total Sales Values',
      vAxis: {title: 'Total Sales'},
      hAxis: {title: 'Month & Year'},
      seriesType: 'bars',
      showRowNumber: 'false'

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


</script>

Advertisement

Answer