Google annotated timeline

88 views
Skip to first unread message

matt

unread,
May 20, 2013, 12:43:59 AM5/20/13
to google-visua...@googlegroups.com
I want to use Google Annotated Time Line to generate a graph using values generated from a PHP script, so far I have:

 <script type='text/javascript'>
  
google.load('visualization', '1', {'packages':['annotatedtimeline']});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Data');   
    data.addRows([

      [new Date($y1, 1, 1), $value_y1_1],
      [new Date($y1, 2, 1), $value_y1_2],
      [new Date($y1, 3, 1), $value_y1_3],

    ]);

    var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div1'));
    chart.draw(data, {displayAnnotations: true});
  }
</script>

I want to add more monthly data points, from $y1 to $y80, with the corresponding $value. I used a for loop but got "undefined variable" error. Suggestions?

Thanks!


asgallant

unread,
May 20, 2013, 9:46:40 AM5/20/13
to google-visua...@googlegroups.com
The code you posted is looking for javascript variables like $y1 and isn't finding them.  If you want to use your PHP variables, you have to echo them into the javascript:

[new Date(<php echo $y1; ?>, 1, 1), <php echo $value_y1_1; ?>],

matt

unread,
May 22, 2013, 11:43:39 AM5/22/13
to google-visua...@googlegroups.com
asgallant,

Thanks. I did the following

<script type='text/javascript'>
 
google.load('visualization', '1', {'packages':[' annotatedtimeline']});
  google.setOnLoadCallback(drawC hart);
  function drawChart() {
    var data = new google.visualization.DataTable ();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Data');  
    data.addRows([

<?php>

for ($i=1; $i<=120; $i++){

echo: "[new Date(".${'y'.$i}."1, 1), ".${'value_y'.$i}."],";
/*
to output 
[new Date($y1, 1, 1), $value_y1],
[new Date($y2, 1, 1), $value_y2],
etc
*/
}
</>
    
    ]);

    var chart = new google.visualization.Annotated TimeLine(document.getElementBy Id('chart_div1'));

    chart.draw(data, {displayAnnotations: true});
  }
</script> 

This did not work. I got undefined variable error. Suggestion?

Thanks,
Matt

asgallant

unread,
May 22, 2013, 12:09:32 PM5/22/13
to google-visua...@googlegroups.com
The syntax looks a little odd to me, what does that output?  Open the page in a browser, view the source, and paste the javascript here.

matt

unread,
May 22, 2013, 2:26:01 PM5/22/13
to google-visua...@googlegroups.com
output:

( ! ) Notice: Undefined variable: value_y6 in C:\wamp\www\PHP6\output.php on line 228


source:

<script type='text/javascript'>

  
      google.load('visualization', '1', {'packages':['annotatedtimeline']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');

        data.addColumn('number', 'Value');   
        data.addRows([
		
		<?php

for (6=1; 6<=90; 6++){

echo: "[new Date(".1976."1, 1), ".."],";

}
?>	

        ]);

        var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div1'));
        chart.draw(data, {displayAnnotations: true});
      }
    
</script>

asgallant

unread,
May 22, 2013, 7:33:04 PM5/22/13
to google-visua...@googlegroups.com
That's a PHP error.  It is saying you don't have a variable "value_y6" in your script.

matt

unread,
May 23, 2013, 12:35:07 AM5/23/13
to google-visua...@googlegroups.com
Ok, here I modified the script and still it won't execute

<?php

$year10 = 1991;
$year11 = 1992;
$year12 = 1993;
$year13 = 1994;

$graph10 = 20;
$graph11 = 30;
$graph12 = 40;
$graph13 = 50;

echo<<<_END

<!DOCTYPE HTML>
<html>
<head>
        <title>Title</title>
        <script type="text/javascript" src="graphs.js"></script>
     <script type='text/javascript' src='http://www.google.com/jsapi'></script>



  <script type='text/javascript'>
 
      google.load('visualization', '1', {'packages':['annotatedtimeline']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Data');  
        data.addRows([
       
        <?php

for ($i=10; $i<=13; $i++){

echo "[new Date(".${'year'.$i}."1, 1), ".${'graph'.$i}."],";


}
?>   
        ]);

        var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div1'));
        chart.draw(data, {displayAnnotations: true});
      }
    </script> 
   
  </head>
<body>
<center>
<div id='chart_div1' style='width: 700px; height: 240px;'></div>
</center>
</body>
</html>
_END;
?>


I got
( ! ) Notice: Undefined variable: i in C:\wamp\www\testgoogle.php on line 35

I noticed that source is changed to the following


		<?php

for (=10; <=13; ++){

echo "[new Date(".."1, 1), ".."],";


}
?>	
        ]);

        var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div1'));
        chart.draw(data, {displayAnnotations: true});
      }
    
</script>  
    
  </head>

asgallant

unread,
May 23, 2013, 3:06:21 AM5/23/13
to google-visua...@googlegroups.com
Is there a particular reason you store your data this way?  It may be easier to work with if you switch to using arrays:

$years = array(1991, 1992, 1993, 1994);
$graphs = array(20, 30, 40, 50);

which allows you to reference the elements easier:

echo "[new Date(" . $years[$i] . ", 1, 1), " . $graphs[$i] . "],";

matt

unread,
May 23, 2013, 7:34:29 PM5/23/13
to google-visua...@googlegroups.com
i switched to arrays, got the same error. I don't understand why i is an undefined variable.

<?php



$years = array(1991, 1992, 1993, 1994);
$graphs = array(20, 30, 40, 50);


echo<<<_END

<!DOCTYPE HTML>
<html>
<head>
        <title>Title</title>
        <script type="text/javascript" src="graphs.js"></script>
     <script type='text/javascript' src='http://www.google.com/jsapi'></script>


  <script type='text/javascript'>
 
      google.load('visualization', '1', {'packages':['annotatedtimeline']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Data');  
        data.addRows([
       
        <?php

for ($i=0; $i<=3; $i++){


echo "[new Date(" . $years[$i] . ", 1, 1), " . $graphs[$i] . "],";

}
?>   
        ]);

        var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div1'));
        chart.draw(data, {displayAnnotations: true});
      }
    </script> 
   
  </head>
<body>
<center>
<div id='chart_div1' style='width: 700px; height: 240px;'></div>
</center>
</body>
</html>
_END;
?>

message:
( ! ) Notice: Undefined variable: i in C:\wamp\www\testgoogle.php on line 30

( ! ) Notice: Undefined variable: i in C:\wamp\www\testgoogle.php on line 32

asgallant

unread,
May 23, 2013, 7:59:42 PM5/23/13
to google-visua...@googlegroups.com
Open the page again and see if the source code is rendering; if it is, post the javascript here.

matt

unread,
May 23, 2013, 8:12:07 PM5/23/13
to google-visua...@googlegroups.com
source:

<?php

for (=0; <=3; ++){

echo "[new Date(" .  . ", 1, 1), " .  . "],";

}
?>    

weird!

asgallant

unread,
May 23, 2013, 9:09:04 PM5/23/13
to google-visua...@googlegroups.com
That's not getting parsed by PHP then.  Your server configuration needs to be fixed.
Reply all
Reply to author
Forward
0 new messages