Using basic Google Chart php/mysql/javascript/html setup, where php used to retrieve data from mysql, javascript to setup chart, and then html and div pull chart in html.
But I want to change the datasource based on a user input. So i thought i would use a php variable sent via url.
I thought I would watch for the variable in my 'dbconnect.php' file, which is included in the php file that retrieves mysql data, using $_GET['var'], to change datasource based on the variable sent in url eg php?var (using a switch statement). This works fine, I can see var sent in url with an echo.
However, I expected that the javascript url: "getDataUsers.php" part would run the getDataUsers.php file to get the data from different datasource based on url passed variable. But instead nothing happens.
What am i missing? Thanks.
My index.php file:
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
//added javascript variable for site from php url
**var vsite = "<?php echo $_GET['site']; ?>";**
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChartUsers);
function drawChartUsers() {
var jsonDataUsers = $.ajax({
url: "getDataUsers.php",
dataType:"json",
async: false**,
//added data value for site from js variable vsite
data: {site: vsite }**
}).responseText;
// Create our data table out of JSON data loaded from server.
var dataUsers = new google.visualization.DataTable(jsonDataUsers);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ColumnChart(document.getElementById('users_chart_div'));
chart.draw(dataUsers, {
title:'# New Registered Users',
width: 1000,
height: 300,
legend : 'none',
vAxis:{title:'# users',textStyle:{color: '#005500',fontSize: '10', paddingRight: '100',marginRight: '100'}},
hAxis: { title: 'Date', textStyle: { color: '#005500', fontSize: '10', paddingRight: '100', marginRight: '100'} }});
}
</script>
</head>
<body>
<p>
<a href="index.php?site=a">a</a>-<a href="get_details.php?site=a">details a</a></br>
<a href="index.php?site=b">b</a>-<a href="get_details.php?site=b">details b</a></br>
<a href="index.php?site=c">c</a>-<a href="get_details.php?site=c">details c</a></br>
<a href="index.php?site=d">d</a>-<a href="get_details.php?site=d">details d</a></br>
</p>
<!--Div that will hold the charts-->
<div id="users_chart_div"></div>
</body>
</html>
My dbconnect.php file:
<?php
$site = $_GET['site'];
//echo "<p>I connected. The variable is: " . $site . "</p>";
switch ($site)
{
case 'a':
$server = 'server.com';
$username='a';
$password='a';
$database='a';
break;
case 'b':
$server = 'server.com';
$username='b';
$password='b';
$database='b';
break;
case 'c':
$server = 'server.com';
$username='c';
$password='c';
$database='c';
break;
case 'd':
$server = 'server.com';
$username='d';
$password='d';
$database='d';
break;
default:
echo "No database selected";
}
mysql_connect($server,$username,$password);
@mysql_select_db($database) or die( 'Unable to select database');
php?>
My 'getDataUsers.php' file:
<?php
include 'dbconnect.php';
$query =mysql_query("SELECT
YEAR(created) AS Created_Year,
MONTH(created) AS Created_Month,
DAY(created) AS Created_Day,
count(id) AS NumUsers
FROM users
Group by
YEAR(created),
MONTH(created),
DAY(created)
ORDER BY
YEAR(created) ASC,
MONTH(created) ASC,
DAY(created) ASC");
$table = array();
$table['cols'] = array(
/* define your DataTable columns here
* each column gets its own array
* syntax of the arrays is:
* label => column label
* type => data type of column (string, number, date, datetime, boolean)
*/
array('label' => 'Date', 'type' => 'string'),
array('label' => '# Users', 'type' => 'number')
);
$rows = array();
while($r = mysql_fetch_assoc($query)) {
$temp = array();
// each column needs to have data inserted via the $temp array
$temp[] = array('v' => $r['Created_Year'] . '-' . $r['Created_Month']. '-' . $r['Created_Day']);
$temp[] = array('v' => (int) $r['NumUsers']);
// insert the temp array into $rows
$rows[] = array('c' => $temp);
}
// populate the table with rows of data
$table['rows'] = $rows;
// encode the table as JSON
$jsonTable = json_encode($table);
// set up header; first two prevent IE from caching queries
header('Cache-Control: no-cache, must-revalidate');
header('Content-type: application/json');
// return the JSON data
echo $jsonTable;
?>
