Google Chart API doesn't work with PHP?

Question

The Google API Chart doesn't take in the value I echo using php can anyone enlighten me to what I'm doing wrong?

This is where the user picks the job chart they want to view:

<form class="form-horizontal form-select-chart" method="post" action="analytics.php">
                <select name="chartname">
                <?php
                    $sel_user = "select * from tbl_jobs";
                    $run_user = mysqli_query($con, $sel_user);
                    while($row = mysqli_fetch_assoc($run_user))
                      {
                          echo "<option value=\"" . $row['Job_ID'] . "\">" . $row['Job_Name'] . "</option>";
                      }
                ?>
                </select>
                <br>
                <input type="submit" name="make_chart" value="Create the Chart" class="btn btn-primary" />
                </form>

Here is where the data should be processed:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
<?php
    if(isset($_POST['make_chart'])){
        $jid = mysqli_real_escape_string($con,$_POST['chartname']);
        $sel_user = "select * from tbl_jobs WHERE `ID` = '$jid'";
                    $run_user = mysqli_query($con, $sel_user);
                    while($row = mysqli_fetch_assoc($run_user))
                      {
                        $jname = $row['Job_Name'];
                        $overall_vacant = $row['Vacant'];   
                        $overall_filled = $row['Filled'];   
                      }
                      settype($overall_vacant, "integer");
                      settype($overall_filled, "integer");
    }
?>
  // Load the Visualization API and the corechart package.
  google.charts.load('current', {'packages':['corechart']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {
    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Vacant Positions', <?php  echo $overall_vacant; ?>],
      ['Filled Positions', <?php  echo $overall_filled; ?>],
    ]);

    // Set chart options
    var options = {'title':'<?php echo $jname; ?>',
                   'width':400,
                   'height':300};

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

Here is where the data to be displayed:

    <?php 
        if(isset($_POST['make_chart'])){
        echo"<div align=\"center\" id=\"chart_div\"></div>"; 
        }

        unset($_POST['make_chart']));
    ?>

Answer 1

Upon further investigation I've found out there's something wrong in my MySQL Query! I should've put "Job_ID" instead of "ID" which are two separate things!

My table goes like this:

ID | Job_ID | Job_Name | Vacant | Filled
1      0      Overall    0        0

Which in turn resulted to a blank chart! How dumb of me! Thanks to MECU for the heads up!