Timeline LoadEventsDynamically

From SIMILE Widgets
Jump to: navigation, search

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);
   });

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.

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;
?>
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox