i'm trying to use AJAX to communicate with the servers to change my chart data whenever the user selects an option in my dropdown box. They would be selecting the year and I want the chart data to change based on the year they select. Heading into the database, using sql to get the required data for my chart, then i would draw it out using Google-visualisation scattered chart. I've seen examples of echoing out the results in a table using the and tags with ajax but I can't seem to redraw my chart in a similar way.
Index.php file:
<html>
<head>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawMouseoverVisualization);
var barsVisualization;
function drawMouseoverVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Quarter');
data.addColumn('number', 'Frequency');
data.addRows([[1,result1],[2,result2],[3,result3],[4,result4]]);
var options={
hAxis: {title: 'Quarter'},
vAxis: {title: 'Frequency'},
trendlines: {0: {type: 'exponential',
color: 'red'
}}
};
barsVisualization = new google.visualization.ScatterChart(document.getElementById('chart'));
barsVisualization.draw(data, options);
// Add our over/out handlers.
}
</script>
<script>
function getchart(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","getData.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="year" id="year" onchange="getchart(this.value)">
<?php
echo "<option>Select year</option>";
for ($i=2016;$i<date("Y")+10;$i++){
echo "<option value='$i'>$i</option>";
}
?>
</select>
</form>
<div id="chart"></div>
<div id="txtHint"><b>Person info will be listed here...</b></div>
</body>
</html>
getData.php file:
$q=$_GET['q'];
$i=$q;
$i0=$i.'-01-01';
$i1=$i.'-03-31';
$i2=$i.'-06-31';
$i3=$i.'-09-31';
$i4=$i.'-12-31';
$con = mysqli_connect('localhost','root','','hi')or die ("Error :". mysqli_connect_error());
$qry1 = "SELECT COUNT(*) FROM courses WHERE Category LIKE '%IT%'AND Date<='$i1'";
$result1 = mysqli_query($con,$qry1);
$qry2 = "SELECT COUNT(*) FROM courses WHERE Category LIKE '%IT%' AND Date<='$i2' AND Date>'$i1'";
$result2 = mysqli_query($con,$qry2);
$qry3 = "SELECT COUNT(*) FROM courses WHERE Category LIKE '%IT%' AND Date<='$i3' AND Date>'$i2'";
$result3 = mysqli_query($con,$qry3);
$qry4 = "SELECT COUNT(*) FROM courses WHERE Category LIKE '%IT%' AND Date<='$i4' AND Date>'$i3'";
$result4 = mysqli_query($con,$qry4);
while($row=mysqli_fetch_assoc($result1)){
$count1 = $row['COUNT(*)'];
}
while($row=mysqli_fetch_assoc($result2)){
$count2 = $row['COUNT(*)'];
}
while($row=mysqli_fetch_assoc($result3)){
$count3 = $row['COUNT(*)'];
}
while($row=mysqli_fetch_assoc($result4)){
$count4 = $row['COUNT(*)'];
}
?>
<script type="text/javascript">
var result1 = <?php echo $count1 ?>;
var result2 = <?php echo $count2 ?>;
var result3 = <?php echo $count3 ?>;
var result4 = <?php echo $count4 ?>;
</script>
