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;
?>
TOOLBOX
LANGUAGES