Timeline LoadEventsDynamically
From SIMILE Widgets
[edit] JSON from PHP/MYSQL
This is the timeline javascript part:
tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
tl.loadJSON("jsonized.php?"+ (new Date().getTime()), function(json, url) {
eventSource.loadJSON(json, url);
});
[edit] Without MySQL
This is the basic PHP code ("jsonized.php") :
<?php
header('Content-Type: application/json; charset=utf-8');
/*
* @Purpose: This file is about making JSON data
* @author : goldsky
* @date : 20100210
*/
$json_data = array (
'wiki-url'=>'http://simile.mit.edu/shelf',
'wiki-section'=>'Simile Cubism Timeline',
'dateTimeFormat'=>'Gregorian',
'events'=> array (
array(
'start'=>'May 28 2006 09:00:00 GMT',
'end'=>'Jun 15 2006 09:00:00 GMT',
'isDuration'=>'true',
'title'=>'Writing Timeline documentation',
'image'=>'http://simile.mit.edu/images/csail-logo.gif',
'description'=>'A few days to write some documentation for Timeline'
),
array(
'start'=>'Jun 16 2006 00:00:00 GMT',
'end'=>'Jun 26 2006 00:00:00 GMT',
'title'=>'Friend\'s wedding',
'description'=>'I\'m not sure precisely when my friend\'s wedding is.'
),
array(
'start'=>'Aug 02 2006 00:00:00 GMT',
'title'=>'Trip to Beijing',
'link'=>'http://travel.yahoo.com/',
'description'=>'Woohoo!'
)
)
);
$json_encoded=json_encode($json_data);
echo $json_encoded;
?>
The events value can be changed from database content.
[edit] With MySQL
Here is the typical connection from Timeline to MySQL through PHP. The situation might different on each of requirements.
"jzonized.php"
<?php
header('Content-Type: application/json; charset=utf-8');
/*
* @Purpose: This file is about making JSON data
* @author : goldsky
* @date : 20100210
*/
// Database settings (localhost? username? password?)
include_once('dbonfig.inc.php');
$conn = mysql_connect($database_server, $database_user, $database_password);
if (!$conn ) {
die('Not connected : ' . mysql_error());
}
// select db
$dbconn = mysql_select_db($dbase,$conn);
if (!$dbconn ) {
die ('Can\'t select db : ' . mysql_error());
}
// generating event attributes inside a function
function eventAtt() {
$eventQuery=mysql_query('SELECT * FROM tableName') or die (mysql_error());
while ($row = mysql_fetch_array($eventQuery)) {
$date = explode("-", $row['date']); // in my case, $date is stored as yyyy-mm-dd in MySQL table.
$phpmakedate = mktime(0, 0, 0, $date[1], $date[2], $date[0]);
// ------------ optionally with "end" date ------------
if ($row['enddate']== NULL || $row['enddate'] == '0000-00-00') {
$phpenddate = NULL; // to skip latestStart date
$durationEvent = FALSE; //JSON
}
else {
$enddate = explode("-", $row['enddate']);
$phpmakeenddate = mktime(0, 0, 0, $enddate[1], $enddate[2], $enddate[0]);
$phpenddate = date("r",$phpmakeenddate);
$durationEvent = TRUE; //JSON
}
// ------------ create the array here ------------
$eventAtts[] = array (
'start' => date("r",$phpmakedate),
'end' => $phpenddate,
'durationEvent' => $durationEvent,
'description' => $row['description']
);
}
mysql_free_result($eventQuery);
return $eventAtts;
}
////////////////////////////////////////////
// //
// TIMELINE'S JSON DATA //
// //
////////////////////////////////////////////
//
$json_data = array (
//Timeline attributes
'wiki-url'=>'http://simile.mit.edu/shelf',
'wiki-section'=>'Simile Cubism Timeline',
'dateTimeFormat'=>'Gregorian', //JSON!
//Event attributes
'events'=> eventAtt() // <---- here is the event arrays from function above.
);
$json_encoded=json_encode($json_data);
echo $json_encoded;
?>

