Hi all i have a new problem that needs some solvin

I'm trying to add data sets to Google's Javascript Motionchart from my SQL database via PHP
Here is what i have so far:

<?php
include "conn.php";
// Select all the rows in the markers table
$query = "SELECT * FROM wetteroe";

$result = mysql_query($query);
if (!$result) {
  die("Invalid query: " . mysql_error());
}

$num = mysql_num_rows($result);

#while($row=@mysql_fetch_assoc($result)){
	for($i=0;$i<1;$i++){
	$row=@mysql_fetch_assoc($result);

	$location[] = $row["location"];
	$name[] = $row["name"];
	$temp[] = $row["temp"];
	$Datetime[] = $row["DATEtime"];

}

?>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Google Visualization API Sample</title>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load('visualization', '1', {packages: ['motionchart']});
	
    function drawVisualization() {
    var data = new google.visualization.DataTable();
	 
	
      data.addRows(1);
      data.addColumn('string', 'Location');   
      data.addColumn('date', 'Date');
      data.addColumn('number', 'Temperature');
      
      data.setValue(0, 0, alert(<?$location[0]?>));
      data.setValue(0, 1, new Date (2011,09,10));
      data.setValue(0, 2, 25);
     
      var motionchart = new google.visualization.MotionChart(
          document.getElementById('visualization'));
      motionchart.draw(data, {'width': 800, 'height': 400});
    }
    

    google.setOnLoadCallback(drawVisualization);
  </script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 800px; height: 400px;"></div>
</body>
</html>

THE ISSUE is that I am trying to get the javascript line:

data.setValue(0, 0, alert(<?$location[0]?>));

to get the php data. BUT I had to change the original line:

data.setValue(0, 0, 'Chicago'));

Since the change it doesn't display anything...

Anyone have an idea on how to get this sorted?

Member Avatar for diafol
<?$location[0]?>

I'd be surprised if that did anything. You need to avoid using short tags - use <?php ...?> and also you need to echo out the variable:

<?php echo $location[0];?>

Hi ardav,

Thanks for your answer- I did what you suggested, but no luck I think the google JS will not accept php values in this way... The only possibility i can think of is exporting my table as excel now, and making it a local data source for the motion chart... Unless anyone has any other ideas on making this work with JS and PHP i guess i'll have to use the workaround :yawn:

Member Avatar for diafol

I can't see why the code shouldn't work, maybe it's because you don't have any data - what does it look like in the browser's view source?

Do you get a value where the $location[0] variable is situated.

#while($row=@mysql_fetch_assoc($result)){
	for($i=0;$i<1;$i++){
	$row=@mysql_fetch_assoc($result);
 
	$location[] = $row["location"];
	$name[] = $row["name"];
	$temp[] = $row["temp"];
	$Datetime[] = $row["DATEtime"];
 
}

This looks odd as I don't think it will return anything. How many rows do you want to retrieve from your DB ? Just one? Easier way of doing it:

$result = mysql_query("SELECT * FROM wetteroe LIMIT 1");
if (!$result) {
  die("Invalid query: " . mysql_error());
}
 
if(mysql_num_rows($result) > 0){
	$row=mysql_fetch_assoc($result);
        $location = $row["location"];
	$name = $row["name"];
	$temp = $row["temp"];
	$Datetime = $row["DATEtime"];
}

then it's just:

data.setValue(0, 0, alert("<?php echo $location;?>"));

I'll try that next. I have many values for $location and jus want to go threw the array by looping the data and enumerate it with $i but that i will do after i get anything to display... And to answer your question- the motion chart did load but had just taken the

<?php echo...?>

as literal as if it were in " " that's why i think
The google motion chart doesnt like php ? We will see, i'll try suggested method. Thanks ardav

UPDATE....
No luck The Page still returns "<?php echo location[0];?>" as the label instead of an actual location value.. maybe i'm really missing something?

But i also tested something else...
i added a JS alert before the actual google code

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
alert("<?php echo $location[0];?>")
    google.load('visualization', '1', {packages: ['motionchart']});
	
    function drawVisualization() {

and it also only returned the literal "<?php echo $location[0];?> in the alert box... so i am guessing the JS isn't at all interacting with the php.

If that is the case then i think i found the problem here on line 2 as the value "data.addColumn" expects a 'string' for the 'Location'.... maybe that is the issue?:

data.addRows(1);
	  data.addColumn('string', 'Location');   
      data.addColumn('date', 'Date');
      data.addColumn('number', 'Temperature');
      
      data.setValue(0, 0, alert('<?php echo $location[0];?>'));
      data.setValue(0, 1, new Date (2011,09,10));
      data.setValue(0, 2, 25);
Member Avatar for diafol

I don't follow any of the js stuff, I'll leave that to you.

> The google motion chart doesnt like php ?

That's not possible - it doesn't know about php. The server sends html to the client(browser), whether hard-coded or php-derived. It can't tell, so your js will not be able to tell either.

Does the page have a .php extension?

I'm working with .html BUT i also tried to transform everything to "echo <html>"; etc and made the file .php .... no luck. i am totally at my whits end with this one. It makes no sense at all atm. i tested a simple php page to pass a variable from php to js that's why i said or at least thought the google motion chart doesn't like my php variable :-/

EDIT!

I got the test alert window before the google js working now, i don't know how or why exactly but this:

alert('<?php echo preg_replace('/\r?\n/', '\\n', addslashes($location[0])); ?>');

works for the first alert window, as for the other one here:

data.setValue(0, 0, "<?php echo preg_replace('/\r?\n/', '\\n', addslashes($location[0])); ?>");

nada

Thread SOLVED!!!

Thanks for your help Ardav, if u hadn't said:

"That's not possible - it doesn't know about php. The server sends html to the client(browser), whether hard-coded or php-derived. It can't tell, so your js will not be able to tell either."

i would have given up on the js / php integration alltogether. now i've come up with a slick and simple piece of code that does it for me and the google motion chart with local data, here is my solution (lines 16 - 20 ftw, line 19 was the core problem):

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {'packages':['motionchart']});
      google.setOnLoadCallback(drawChart);
	  var i=0;
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'location');
        data.addColumn('date', 'Date');
        data.addColumn('number', 'temp');
        data.addColumn('string', 'name');
		data.addRows([
		<?php 
		$j=0;
		for($j=0;$j<$num;$j++){
		echo "['$location[$j]',new Date ('$Datetime[$j]'),$temp[$j],'$name[$j]'],\n";
		}
		?>
		]);
        var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 1000, height:700});
      }
    </script>
  </head>

  <body>
    <div id="chart_div" style="width: 100%; height: 100%;"></div>
  </body>
</html>

it only took 3 lines of php code to get the data, that was simple and i knew what i needed the problem which i couldn't tackle was how to send it to google jsapi it didn't like my first method, but excepted the simpler serialization of the data. I can load huge amounts now automatically without having to manually export to excel from sql then upload it all to google charts and THEN make a damn motionchart out of it... So 3 lines of code saved me 3 manual tedious steps IRL which would have cost me time and nerves

░░░░░░░░░░░░░░░░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░▒██████████████████████████▓▓▓░░░░░░░░░░░░░░░░
░░░░░░░░░░░█░▓░░░░░░░░░▒▓▒▒▒▒▒▓▒▒░░▒▒▒▓▓▓████▓▒░░░░░░░░░░░
░░░░░░░░░░██▒░░░░░░░▓▓▓░░░░░░░░░░▒▒▓▒▒▒▒▓▒▒▓███▒░░░░░░░░░░
░░░░░░░░░▓█░░░░░░░▓▓░░▒▓▒▓▓▓▓▓▓▓▒░░░░░░░░▒▒▒▒▒░▓██░░░░░░░░
░░░░░░░░▒█▒░░░░░▓▓░▒▓▓░░░░░░░░░░░▒▒▒▒▒▒▒░░░░▒▒░░██▓░░░░░░░
░░░░░░░░██░░░░░▓░░▓░▒▓▒▓▒▒▒▒▓▓░░░░░░░░░░▒▒▒▒░░░░░░▓█▓░░░░░
░░░░░░░▓█░░░░▒░▓▒░▓▒░░░░░░░░▓░░░░░░░▓▒▒░░░▓▒░░░░░▓█░░░░░░░
░░░░░░░█▓░░░░▒░▓░▓▒░░░░░░░░░░▓░░░░░░░░▒░░░░░░░▓░░░░░█▒░░░░
░░░░░░▒█░░░░░░▓░▓▒░░░░░░░░░░░▒░░░░░░░▓░░░░░░░░▓░░░░░█▒░░░░
░░░░░░██░░░░░░░░▒░░▓██░████▒░░░░░░░░░▒░░░░░░░░░░░░░░█▓░░░░
░░░░░▓█░░░░░░░░░░███████▒███░░░░░░░░▒░░▒▓▓▓▓▒░░░░░░▓█░░░░░
░░░░██▓░▒░░░░░▒▒▒█▓▓████▓░░░██▒░░░░░░░▓███████▓░░░░░░██▓░░
░░░██▓▓▓▓▓▓░░█▓░▓██████████░░██░░░░▓▒█████████▓▒▓▓▓▓█░▓█▓░
░░██▓░░░▓▓▓▓▒░░▓░▒▒░░░▓░░▒████▓░░░░█████▓▒▒░░░░░░░░░░░▓█░░
░▓█▒▒░░███████▓░░░░░░██░░░░▒█▒░░░░░░▒█░░░░░░░░░░░░░▓▒▒░█▓░
▒█▒▓░░█▓░░░░░████▒▒███░░░░░░░░░░░░░░░█░░░░░░░░░█████░▓░▓█▓
▓█░▓░▓█░░░▓▓░░░▒████░░░░░░░░░░░░░░░░░█░░░░░██▒██░░░█▓▒░▒█▓
█▓░▓░█▒░░░███░░░░░░░░░░░░░░░░░░░░░░░░██▓░░░▒███▒▒▒░░░▒░▒█▓
▒▓░▓░█░░▒██▒███░░░░░░░░░░▒▒███▒░░░░░░░▓██░░░░░░░▓█░░░▒░▒█▓
░█░▓░█▒████░░▒███░░░░▓▒▒▒▒▓█░░░░░░░░░░░▓██░░░░░░▓█░░▒▒░▓█▒
░█░▓░▓█░░░█▓░░░▒███▓░░░░░░▓█░████▒░░░░░███▓▒░░░░██▓░░░▓██░
░▒▓▒░░█░░░██▒░░░▒█▓███▓░░░▒█▓█▒░▓▒░░░░██░░░░▓▒░▓███░▓▒░█▓░
░░█░▓▒░░░░▒███▒░▒█░░▒▓████▒░░░░░░░░█▓██░░░░░░░██▓█░░░▓█░░░
░░██░░▓░░░░▓████▒█▓░░░░░▒████▓░░░░▒█▓░░░░░░▓██▓▓██░░░█▒░░░
░░░██▓░░░░░░█▓░████▒░░░░░█▓▒▓███████▒▒▒▒▓████▒▒█░██░░▒█░░░
░░░░██░░░░░░▒█▒░▒█████▒░░█░░░░░░████████▒▒█▒░░█░██░░▓█░░░░
░░░░░██░░░░░░▓█░░█▒███████░░░░░░▓▓░░░▒█░░░░▓█░▓█▓██░░▓█░░░
░░░░░▒█▒░░░░░░██░█░░░▓██████▓░░░▓▓░░░░█░░░▓███████░░▓█░░░░
░░░░░░█▓░░░░░░░██▓░░░░░░███████████████████████████░░▓█░░░
░░░░░░▓█░░░░░░░░██░░░░░░█▒░▓███████████████████████░░▓█░░░
░░░░░░░██░░░░░░░░██▒░░░▒█▒░░░░▒██████████████████▓█░░▓█░░░
░░░░░░░░█▓░░░░░░░░▓██░░██░░░░░░█▒░▒▒▒███████▒█▒█▓█▓░░▓█░░░
░░░░░░░░▒██░░░░░░░░░██▓█░░░░░░░█▒░░░░█▒░░▓█░▓█░█▓█░░░▓█░░░
░░░░░░░░░░██░▓▒░▒▓░░░▒███▒░░░░░█▒░░░░█░░░█▒░█░██▓░░░▓█░░░░
░░░░░░░░░░░██░░█░░▒▓░░░▒████▓▓░█▒░░░█░░▓█░▓████▒░░░░▓█░░░░
░░░░░░░░░░░▒██▓░▒▓░░▓▓░░░░▒██████████████████▓░░░░░░░▒█░░░
░░░░░░░░░░░░░██▒░▒▓▒░▒▓▒░░░░░░░░░░░░░░░░░░░░░░░▓░░░░░█▒░░░
░░░░░░░░░░░░░░░▓██░░▓▓░░▓▓░░░░░▓▓▓▓▓▓▓▓▓▓░░░░░▓░░░▓░░█▒░░░
░░░░░░░░░░░░░░░░░███▓░░▒▓▒░▒▓▓▒░░░░░░░░░░░░░░▓▓░░░░▓░░█▒░░
░░░░░░░░░░░░░░░░░░░▓██▓░░░▒▒▒▓▒▓▒▒▒▒▒▓▒▒▒▒▒▓▒░░░░▒▓░░░█▒░░
░░░░░░░░░░░░░░░░░░░░░▒███░░░░░▒▒▓▓▓▒▒▒▒░░░░░░░░▒█░░░░░█▒░░
░░░░░░░░░░░░░░░░░░░░░░░▒██▓░░░░░░░░░░░░▒▒▒▒▒▒▒▒▒░░░░░▒█░░░
░░░░░░░░░░░░░░░░░░░░░░░░░▒██▓░░░░░░░░░░░░░░░░░░░░░░░░█▓░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░▒█████▒░░░░░░░░░░░░░░░░░░██░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▒▒▒████▓░░░░░░░░░░░░▓██░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▒▓█████▓▓▓▓▓▓▓███▒░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▓██████▓▓▒░░░░░░░░

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.