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>

JavaScript
​x
 
   <?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>

JavaScript
 
<?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