I have a table in a database from which I am retrieving the marks of one particular student for all 5 subjects. For Google Charts I am reading the subject name from the csv from which I have already populated the Database Table. I am passing subject name and marks as JSON object to ajax success method. But I am unable to get the chart on screen.
I have already tried debugging the code. But It is still not working.
<?php
$conn = mysqli_connect("localhost","root","","marks");
$query = "select name from tblMarks";
$result = mysqli_query($conn, $query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Graphs</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<center>
<div class="panel panel-default panel-heading">
<h5>Choices</h5>
<select name="name" class="from-control" id="name">
<option value="">Select Name</option>
<?php
foreach ($result as $row) {
echo "<option value=".$row['name'].">".$row['name']."</option>";
}
?>
</select>
<select name="subject" class="from-control" id="subject">
<option value="">Select Subject</option>
<?php
$handle = fopen("./upload/1.csv","r");
$fields = fgetcsv($handle);
foreach ($fields as $row){
if($row != 'Fields'){
$row = substr($row,0,strpos($row, "~"));
echo "<option value=".$row.">".$row."</option>";
}
}
?>
</select>
</div>
</center>
<div class="panel-body">
<div id=chart-area" style="width:1000px;height:620px;"></div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current',{packages:['corechart','bar']});
google.charts.setOnLoadCallback();
function loadnamewisedata(name, title){
var temp_tile = title;
$.ajax({
url:"fetch.php",
method:"POST",
data:{name:name},
dataType:"JSON",
success:function(data){
drawNameWiseChart(data, temp_tile);
}
});
}
function drawNameWiseChart(chart_data, chart_main_title){
var jsonData = chart_data;
var data = new google.visualization.DataTable();
data.addColumn('string', 'Subject');
data.addColumn('number', 'Marks');
$.each(jsonData, function(i, jsonData){
var subject = jsonData.subject;
var marks = parseFloat($.trim(jsonData.marks));
data.addRows([[subject, marks]])
});
var options={
title:chart_main_title,
hAxis:{
title:"Subject"
},
vAxis:{
title: "Marks"
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_area'));
chart.draw(data, options);
}
</script>
<script type="text/javascript">
$("#name").change(function(){
document.getElementById("subject").selectedIndex = 0;
var name = $(this).val();
if(name != ""){
loadnamewisedata(name, name);
}
});
$("#subject").change(function(){
document.getElementById("name").selectedIndex = 0;
});
</script>
fetch.php
<?php
$output = [];
include('dbc.php');
if(isset($_POST["name"])){
$query = "select * from tblMarks where name='".$_POST["name"]."'";
$result = mysqli_query($query);
$handle = fopen("./upload/1.csv","r");
$fields = fgetcsv($handle);
$subArr = [];
$i = 0;
foreach ($fields as $row){
if($row != 'Fields'){
$row = substr($row,0,strpos($row, "~"));
$subArr[$i] = $row;
$i = $i + 1;
}
}
$j = 0;
while($row = mysqli_fetch_array($result)){
while($j < count(subArr)){
$output[] = array(
'subject' => subArr[$j],
'marks' => floatval($row[subArr[$j]])
);
}
}
echo $output;
}
?>
dbc.php
<?php
$conn = mysqli_connect("localhost","root","","marks");
?>
I expect the output of this to be a Bar Chart, but I am not seeing anything.
