Getting Error while building Google annotatedtimeline graph

[Monty]

Hi I am newbiee to google Graph.I am generating arrays from php
andpassing it to google graph using json_encode method of php but
getting an error ie Uncaught Error: Invalid type: int. format
+en,default, annotated timeline +en_US.I.js:53 my code is as follow


<?php

$yP1data = array();
$yP2data = array();
$yP3data = array();
$yP4data = array();
$xdata = array();
$Timedata = array();


$Result=mysql_query("Select P1,P2,P3,P4,RecordTime from
readings");
//$countt=mysql_num_rows($Result);
$count=0;
while($data= mysql_fetch_array($Result))
{
array_push($yP1data,$data["P1"]);
array_push($yP2data,$data["P2"]);
array_push($yP3data,$data["P3"]);
array_push($yP4data,$data["P4"]);
array_push($Timedata,$data["RecordTime"]);

//echo "<p>";
$time= (explode(" ",$Timedata[$count]));
array_push($xdata,$time[1]);
//print_r($xdata);
$count++;

}

?>
<script type="text/javascript">
var encoded_P1data = <?php echo json_encode($yP1data) ?>;
var encoded_P2data = <?php echo json_encode($yP2data) ?>;
var encoded_P3data = <?php echo json_encode($yP3data) ?>;
var encoded_P4data = <?php echo json_encode($yP4data) ?>;
var encoded_xdata = <?php echo json_encode($xdata) ?>;
</script>
<script type="text/javascript" src="jsapi.js"></script>
<script type="text/javascript">


google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawChart);

var P1data = new Array; // This would be the first array passed from
PHP
var P2data = new Array; // This would be the second array passed from
PHP
var P3data= new Array; // This would be the third array passed from
PHP
var P4data = new Array; // This would be the second array passed from
PHP
var P5data= new Array;

P1data = encoded_P1data;
P2data = encoded_P2data;
P3data= encoded_P3data;
P4data = encoded_P4data;
RecordTime= encoded_xdata ;
function drawChart() { var data = new
google.visualization.DataTable();

data.addColumn('datetime', 'RecordTime');
data.addColumn('int', 'P1');
data.addColumn('int', 'P2');
data.addColumn('int', 'P3');
data.addColumn('int', 'P4');

/* create for loops to add as many columns as necessary */

var len = jsonarray.length;

data.addRows(len);
for(i=0; i<len; i++) {

data.setValue(i, 0, RecordTime[i]); /* x-axis */
data.setValue(i, 1, P1data[i]); /* Y-axis category #1*/
data.setValue(i, 2, P2data[i]); /* Y-axis category #2*/
data.setValue(i, 3, P3data[i]); /* Y-axis category #1*/
data.setValue(i, 4, P4data[i]); /* Y-axis category #2*/
}
/*********************************end of
loops***************************************/
var chart = new
google.visualization.columnchart(document.getElementById('chart_div'));
chart.allowRedraw = true;
chart.draw(data, {displayAnnotations: false });
}
</script>

[asgallant]

Unfortunately, your PHP doesn't help us.  Can you post the output js so we can test it?

[Monty]

php array output is as follow:
Array ( [0] => 1111 [1] => 1234 [2] => 1111 [3] => 1111 [4] => 1234
[5] => 1111 [6] => 1111 [7] => 1234 [8] => 1111 [9] => 1111 )
Array ( [0] => 2222 [1] => 2345 [2] => 2222 [3] => 2222 [4] => 2345
[5] => 2222 [6] => 2222 [7] => 2345 [8] => 2222 [9] => 2222 )
Array ( [0] => 3333 [1] => 3456 [2] => 3333 [3] => 3333 [4] => 3456
[5] => 3333 [6] => 3333 [7] => 3456 [8] => 3333 [9] => 3333 )
Array ( [0] => 4444 [1] => 4567 [2] => 4444 [3] => 4444 [4] => 4567
[5] => 4444 [6] => 4444 [7] => 4567 [8] => 4444 [9] => 4444 )
Array ( [0] => 10:20:00 [1] => 10:20:00 [2] => 10:20:00 [3] =>
10:20:00 [4] => 10:20:00 [5] => 10:20:00 [6] => 10:20:00 [7] =>
10:20:00 [8] => 10:20:00 [9] => 10:20:00 )


output of json_encodeon arrays :
var encoded_P1data
=["1111","1234","1111","1111","1234","1111","1111","1234","1111","1111"];
var encoded_P2data =
["2222","2345","2222","2222","2345","2222","2222","2345","2222","2222"];
var encoded_P3data =
["3333","3456","3333","3333","3456","3333","3333","3456","3333","3333"];
var encoded_P4data =
["4444","4567","4444","4444","4567","4444","4444","4567","4444","4444"];
var encoded_xdata =
["10:20:00","10:20:00","10:20:00","10:20:00","10:20:00","10:20:00","10:20:00","10:20:00","10:20:00","10:20:00"];

[asgallant]

Ok, there are a number of issues here:

1) type 'int' isn't valid for the DataTable columns, use 'number' instead.

2) you need to parse your times into a javascript Date object.  You can tell the chart to display only HH:mm:ss.

3) since your data is all strings, you need to pass it through parseInt() to turn them into numbers for the chart.

4) you loaded the 'annotatedtimeline' package, but try to create a ColumnChart, which will fail.  Since your post title mentions AnnotatedTimeline, I assume that is what you actually want.

I did up a fixed version you can see here: http://jsfiddle.net/ahekL/1/ 

[Monty]

Thankz a lot...

> > ["10:20:00","10:20:00","10:20:00","10:20:00","10:20:00","10:20:00","10:20:0 0","10:20:00","10:20:00","10:20:00"];

[Monty]

Just wanted to ask u if i want to pass time along with date how can i
do so can u please do the necessary changes in code if possible.

On Apr 25, 7:15 pm, asgallant <drew_gall...@abtassoc.com> wrote:

> > ["10:20:00","10:20:00","10:20:00","10:20:00","10:20:00","10:20:00","10:20:0 0","10:20:00","10:20:00","10:20:00"];

[asgallant]

Date objects can accept time:

new Date(year, month, day, hours, minutes, seconds, milliseconds) 

[Monty]

I have an array of date also i got it in json array but i want to
display both a date and time in x a axis i have modified code but do i
need to concate date and time array in javascript.below is my code.

google.load('visualization', '1', {'packages':
['annotatedtimeline']});
google.setOnLoadCallback(drawChart);

var P1data = new Array;

var P2data = new Array;

var P3data = new Array;

var P4data = new Array;

var RecordTime = new Array;
var RecordDate = new Array;

P1data = encoded_P1data;
P2data = encoded_P2data;
P3data = encoded_P3data;
P4data = encoded_P4data;
RecordTime = encoded_xdata;

RecordDate =encoded_xDatedata;

function drawChart() {
var data = new google.visualization.DataTable();

//data.addColumn('date', 'RecordDate');(confused over here )

data.addColumn('datetime', 'RecordTime');

data.addColumn('number', 'P1');
data.addColumn('number', 'P2');
data.addColumn('number', 'P3');
data.addColumn('number', 'P4');

/* create for loops to add as many columns as necessary */

// changed because you didn't give me a jsonarray variable
//var len = jsonarray.length;
var len = RecordTime.length;

data.addRows(len);
for (i = 0; i < len; i++) {
// we need to convert times to Date objects
var timesplit = RecordTime[i].split(':');
var datesplit =RecordDate[i].split('-');
data.setValue(i, 0, new Date(datesplit[2], datesplit[1],
datesplit[0], timesplit[0], timesplit[1], timesplit[2])); /* x-axis */
data.setValue(i, 1, parseInt(P1data[i])); /* Y-axis category
#1*/
data.setValue(i, 2, parseInt(P2data[i])); /* Y-axis category
#2*/
data.setValue(i, 3, parseInt(P3data[i])); /* Y-axis category
#1*/
data.setValue(i, 4, parseInt(P4data[i])); /* Y-axis category
#2*/
}
/*********************************end of
loops***************************************/

// changed chart to AnnotatedTimeline
var chart = new
google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.allowRedraw = true;
chart.draw(data, {
displayAnnotations: false,
// format time to show only hours:minutes:seconds
dateFormat: 'dd-MM-YYYY HH:mm:ss'
});

[Monty]

Solved the problem just had to change the dateFormat.