How do display from mysql using jsapi?
I Have 3 widgets which displays data and I would like to display data into
these widgets from mysql database not just to embed numbers directly : I
have tried using json and php but no luck at the moment and I believe this
site has a lot of code masters who can help me out:any help is welcomed.
This is the working one which does not use a db :
<html>
<head>
<script type='text/javascript'
src='https://www.google.com/jsapi'></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Rands', 80],
['Watts', 55],
['Time', 40]
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new
google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
here is what I have tried : its not pdo I will do pdo when I get it
working
<?php
$username="root";
$password = "root";
$host ="localhost";
$dbname="musa";
$connected = mysql_connect($host,$username,$password) or die("Did not
connect");
mysql_select_db($dbname,$connected );
if($connected){
echo "Your database is connected<br>";
}
$get = ("SELECT * FROM Persons where FirstName ='MUSA'");
$record = mysql_query($get);
while($row = mysql_fetch_array($record)){
$rands = $row['rands'];
$TIME = $row['TIME'];
$WATTS = $row['WATTS'];
echo $rands.'<br>';
echo $WATTS.'<br>';
echo $TIME.'<br>';
}
?>
<?php
#this is the Json I wanna display in there before I use the data from the db
$arr = array('Rands' => 80, 'Watts' => 55, 'Time' => 40);
$json_table = json_encode($arr);
echo $json_table;
?>
<html>
<head>
<script type='text/javascript'
src='https://www.google.com/jsapi'></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data =
google.visualization.arrayToDataTable(<?=$json_table>);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new
google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
No comments:
Post a Comment