0

I have a table named 'Marks' in Mysql database(practice_database), containing the following values: (I am using a xampp server) Name, Sem, Internal, End_Sem, Avani 1 55 56 Alka 1 26 29 Saurabh 1 44 40 Rekha 1 42 39 Ralph 1 52 60 Avani 2 57 51 Alka 2 53 52 Saurabh 2 33 22 Rekha 2 37 29 Ralph 2 47 55 Avani 3 56 59 Alka 3 47 45 Saurabh 3 33 45 Rekha 3 32 25 Ralph 3 44 59

I need to create a graph where both the internal and end_sem marks will be displayed, based on the value that I select in a corresponding dropdown menu. The dropdown menu has to be populated by the column Sem. This is the following code:

<?php
 $con = mysqli_connect('localhost','root','','practice_database');
?>
<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
<body>
<form name="frmdropdown" method="POST" >
     <center>
            <h2 align="right">SEMESTER</h2>

            <strong> Select Semester: </strong> 
            <select align="right" name="empName"> 
               <option value=""> -----ALL----- </option> 
            <?php
                 $Sem="Select DISTINCT Sem from Marks";
                 $exec1 = mysqli_query($con,$Sem);
                 while($r=mysqli_fetch_array($exec1)) {

                  echo "<option value='$r[0]'> $r[0] </option>";
                 }
             ?>
            </select>

</body>
 <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([

 ['Name', 'Internal', 'End_sem'],

<?php 
   if($_SERVER['REQUEST_METHOD'] == "POST")
   {
         $des=$_POST["empName"]; 
         if($des=="")  // if ALL is selected in Dropdown box
         { 
             $query="SELECT Name, Internal, End_sem FROM Marks";
         }
         else
         { 
             $query="SELECT Name, Internal, End_sem FROM Marks where sem='".$des."'";
         }
    }
    while($row = mysqli_fetch_row($query)) {
 echo "['".$row['Name']."',".$row['Internal'].",".$row['End_sem']."],";
 }
 ?>

 ]);

 var options = {
      title: 'Student Performance',titleTextStyle: {color: 'black'},
      hAxis: {title: 'Student Name-->', titleTextStyle: {color: 'red'}},
      vAxis: {title: 'Marks', titleTextStyle: {color: 'green'}},
      colors: ['blue','red'],
      is3D:true
};
 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; color: red;"></div>
</body>
</html>

However, its not working. The code works fine without the dropdown menu part. But my manager wants the dropdown menu included with compulsion. Since I have no prior programming experience, I found google charts to be easier. Can somebody please please rectify the errors in this particular code? Will be grateful. Thanks.

IndigoChild
  • 842
  • 3
  • 11
  • 29

1 Answers1

0

The problem is that you do not submit the query. You are trying to do a mysqli_fetch_row on a string instead of a mysqli_result. Do you want to load all rows on the initial page load? Then you also need to put the query outside of the check for the REQUEST_METHOD. Do this:

if($_SERVER['REQUEST_METHOD'] == "POST" && $_POST["empName"])
{
     $query="SELECT Name, Internal, End_sem FROM Marks where sem='".$_POST["empName"]."'";
} 
else
{ 
     $query="SELECT Name, Internal, End_sem FROM Marks";
}

$result = mysqli_query($con, $query);

while($row = mysqli_fetch_row($result)) {
    echo "['".$row['Name']."',".$row['Internal'].",".$row['End_sem']."],";
}

Some notes about your code: you should use the object oriented style for mysqli instead of the procedural mysqli_ functions, especially for security reasons. You need to sanitize $_POST["empName"] and your query to prevent mysql injections. You should read this: How can I prevent SQL injection in PHP?

Have you considered doing the filtering by semester with JavaScript instead of reloading the page? This could be achieved rather easily, as you load the full data on init anyway. You could store the data in a global variable outside of the drawChart() method and define an onchange callback method for the select, which filters the rows and redraws the chart.

masterfloda
  • 2,908
  • 1
  • 16
  • 27
  • Hi, thanks for your suggestion. However, its still not working. And I haven't considered javascript because in most of the cases, I have seen that the dropdown values have been manually coded in the java script codes. My manager wants more of a dynamic dropdown menu. – IndigoChild Jan 11 '18 at 07:00
  • Can you please describe what exactly is not working? Do you get an error? As for JS: You can populate the drop down as well as the initial dataset the way you do now, and then filter the data with JavaScript when you change the selected value. – masterfloda Jan 11 '18 at 16:47
  • Hi, yeah the problem is that the chart is not being displayed. As for Js, do you happen to have a sample code for it? – IndigoChild Jan 12 '18 at 06:49
  • Is it not being displayed initially or only after you send the POST? Check the developer console, do you get JavaScript errors? Check the page source, do the rows get written into the source? – masterfloda Jan 12 '18 at 17:37