Re: problem datatable/json/new Date

asgallant

unread,

Oct 15, 2012, 3:11:03 PM10/15/12

to google-visua...@googlegroups.com

If you want to use a "date" data type, you have to format the data in a way the API can understand. The API expects dates passed in JSON to be in the form "Date(year, month, day)", so your JSON dates should look like {"v":"Date(2012, 8, 7)"} (javascript months are zero-indexed, so you have to subtract 1).

Your PHP code should look something like this:

$table = array();
$table['cols'] = array(
array('label' => 'date', 'type' => 'date'),
array('label' => 'Hauteur', 'type' => 'number')
);
$rows = array();

while ($donnees = $result->fetch()) {
$temp = array();

$date = explode('-', $donnees["height_date"]); // split the date into it's component year, month, and day

  $date[1] = $date[1] - 1; // subtract 1 to get the zero-indexed month (required for javascript)
  $temp[] = array('v' => "Date({$date[0]}, {$date[1]}, {$date[2]})"); // the Visualization API expects dates in the form "Date(year, month, day)"
  $temp[] = array('v' => $donnees["height"]);
  $rows[] = array('c' => $temp);
}

$table['rows'] = $rows;
$jsontable = json_encode($table);
echo $jsontable;

On Monday, October 15, 2012 4:22:43 AM UTC-4, Cedrik Mallet wrote:

hi,

Newbie in webdev (and in english) & javascript.

I have realized a aeachart witch use data passed by a JSON and AJAXcall. it's work fine, Now, i would use date format but ....

--------------------------------------------------------
I copy/paste code that works :

areachart :

<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/jquery.min.js"></script>
<script type="text/javascript">

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url:"plant_graph_height.php",
datatype:"json",
async:false
}).responseText;
var data = new google.visualization.DataTable(JSON.parse(jsonData));
var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Evolution - Hauteur de la plante',
width: 750,
height: 300,
vAxis: {title: "Hauteur (cm)"},
hAxis: {title: "Date"},
colors: ['limegreen'],
legend : {position: 'in'},
pointSize : 5
});
}
</script>
</head>
<body>
<div id="visualization"></div>
</body>
</html>

and plant_graph_height.php :

$table = array();
$table['cols'] = array(
array('label' => 'date', 'type' => 'string'),
array('label' => 'Hauteur', 'type' => 'number')
);
$rows = array();
while ($donnees = $result->fetch())
{
$temp = array();
$temp[] = array('v' => $donnees["height_date"]);
$temp[] = array('v' => $donnees["height"]);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsontable = json_encode($table);
echo $jsontable;

json return by plant_graph_height.php is :
{"cols":[{"label":"date","type":"string"},{"label":"Hauteur","type":"number"}],"rows":[{"c":[{"v":"2012-09-05"},{"v":"15"}]},{"c":[{"v":"2012-09-07"},{"v":"18"}]},{"c":[{"v":"2012-09-12"},{"v":"25"}]},{"c":[{"v":"2012-09-19"},{"v":"35"}]},{"c":[{"v":"2012-09-30"},{"v":"50"}]},{"c":[{"v":"2012-10-14"},{"v":"64"}]}]}

--------------------------------------------------------

Now, my problem....
I want format date in a 'short' format. I have try several tests but it's doesn't work.

For exemple, when i change "array('label' => 'date', 'type' => 'string')," by "array('label' => 'date', 'type' => 'date'),", return is an red box whith "b[wa] is not a function" :(

Can you help me for understand this behavior ?

Cedrik Mallet

unread,

Oct 15, 2012, 4:19:05 PM10/15/12

to google-visua...@googlegroups.com

Thanks for reply.

I test that tomorrow. and return ... :)

cmallet

unread,

Oct 16, 2012, 3:44:07 AM10/16/12

to google-visua...@googlegroups.com

It's works !

Realy thanks for this form : $date[1] = $date[1] - 1; // subtract 1 to get the zero-indexed month (required for javascript

But, how format date in short format ?

I use :

var formatter_short = new google.visualization.DateFormat({formatType: 'short'});

formatter_short.format(data, 0);

I place it between DataTable declaration & draw déclaration, but Chart give always : (exemple)-> sept 8, 2012.

For me, ideal format is : 8/9/12 (day/month/year), That is possible ?

otherwise, thanks for your help.

asgallant

unread,

Oct 16, 2012, 11:05:24 AM10/16/12

to google-visua...@googlegroups.com

That should format the tooltips, but it won't affect the axis. You have to set hAxis.format option to "d/M/y" to get the date format right in the axis.

cmallet

unread,

Oct 17, 2012, 4:47:54 AM10/17/12

to google-visua...@googlegroups.com

Yeah !

It's good form me, i'have inderstood this behavior !

This tread is finish for me.

Thanks for your help.

asgallant

unread,

Oct 17, 2012, 10:47:11 AM10/17/12

to google-visua...@googlegroups.com

You're welcome.

Reply all

Reply to author

Forward