Wrapper for SIMILE Timeline


The SIMILE Timeline project is an open source JavaScript widget for making nice looking timelines. You can read about it here:

similie timeline website

There are two ways you can use the widget:

  1. call the api from the mit website

  2. download the files and run locally.

I have gotten it working by wrapping the remote call in a widget.code is below. I hope someone smarter than me can figure out how to run it locally in Yii. but I can not seem to get the javascript file to run without giving me an error. If you can do it, or you know a better way please reply to the post with your comments!

Here is the code that works in Yii 1.1.8 using the remote option:

Step 1: Create a new component under protected/components named Timeline.php (note uppercase)



 * Timeline.php Yii widget to display SIMILIE timeline.


class Timeline extends CWidget


	public function run()


   	//Register the remote URL of the Timeline javascript api.



  	//Set variables which will be used to register the scripts for responding to window.load() and window.resize() events. Also Id1 is used to help the widget locate the div in the view file.

  	$id1 = 'timeline';

  	$id2  = 'timeline-resize';


          	// This script initializes the timeline inside the widget. It will be registered as part of the window.onload() event.

          	$script1 = "


   					var tl;


                    	var bandInfos = [


                        	width:      	'70%', 

                        	intervalUnit:   Timeline.DateTime.MONTH, 

                        	intervalPixels: 100



                        	width:      	'30%', 

                        	intervalUnit:   Timeline.DateTime.YEAR, 

                        	intervalPixels: 200



                  	tl = Timeline.create(document.getElementById('". $id1 . "'), bandInfos);


  	// This script is used to handle window.resize() events. I didn't know where to put it, so I just included it here. 

 	//  TODO: figure out how to call this function when a window resize event happens.

   	$script2 = "


   					var resizeTimerID = null;


                    	function onResize() {

                    	if (resizeTimerID == null) {

                            	resizeTimerID = window.setTimeout(function() {

                                	resizeTimerID = null;


                            	}, 500);





  	// now we register the two scripts so that they are available to the widget on document load

  	Yii::app()->clientScript->registerScript($id1, $script1, CClientScript::POS_LOAD);

  	Yii::app()->clientScript->registerScript($id2, $script2, CClientScript::POS_LOAD);



    	//Here we are rendering the widget view.  called by CController::endWidget()






STEP 2: Create a view file in protected/components/views named timeline.php [/u] (note lowercase)



 * called from Timeline.php widget.

 * This is the view file. 



<div id="timeline" style="height: 150px; border: 1px solid #aaa"></div>

As you can see the view is only one line of code which is a div element which will become the home for the timeline chart.

STEP 3: Finally, just include the widget in your application, usually in a view, index, or update page.

[size="1"]in any one of your view files…[/size]


<?php $this->widget('Timeline'); ?>


STEP 4: Bonus!! If you want to automatically have the widget take on the style of the rest of your theme, then wrap the widget in a CPortlet

[size="1"]in any one of your view files…[/size]



$this->beginWidget('zii.widgets.CPortlet', array(







you like? +1 me! B)

You can create an’extension and upload it in yii site!

Nice idea @sensorario. I think in order for the extension to be useful, it would need two things:

  1. It should be self contained and run locally from the source code distribution.

  2. It should have some kind of php helper file which would allow users to avoid writing a lot of javascript and jquery code.

For #1. I have tried to follow the stand alone installantion instructions in the simile source code, but even with the help of the excellent Yii Tutorial by @zaccaria , located here. - I still could not get the driver script timeline-api.js to load without getting this firebug console error:

syntax error


Line 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Although I am willing to learn, I dont yet have the faintest idea of even where to start troubleshooting. My instinct tells me it could be a name space conflict in between their javascript and yii’s internal code. But that is just a guess.

Now this is what the installation instructions say to do:

* To host the Timeline files on your own server:

 *   1) Install the Timeline and Simile-Ajax files onto your webserver using

 *  	timeline_libraries.zip or timeline_source.zip


 *   2) Set global js variables used to send parameters to this script:

 *    	Timeline_ajax_url -- url for simile-ajax-api.js

 *    	Timeline_urlPrefix -- url for the *directory* that contains timeline-api.js

 *      	Include trailing slash

 *    	Timeline_parameters='bundle=true'; // you must set bundle to true if you are using

 *                                   		// timeline_libraries.zip since only the

 *                                   		// bundled libraries are included


 * eg your html page would include


 *   <script>

 * 	Timeline_ajax_url="http://YOUR_SERVER/javascripts/timeline/timeline_ajax/simile-ajax-api.js";

 * 	Timeline_urlPrefix='http://YOUR_SERVER/javascripts/timeline/timeline_js/';   	

 * 	Timeline_parameters='bundle=true';

 *   </script>

 *   <script src="http://YOUR_SERVER/javascripts/timeline/timeline_js/timeline-api.js"	

 * 	type="text/javascript">

 *   </script>



 * This script auto-magically figures out locale and has defaults for other parameters 

 * To set parameters explicity, set js global variable Timeline_parameters or include as

 * parameters on the url using GET style. Eg the two next lines pass the same parameters:

 * 	Timeline_parameters='bundle=true';                	// pass parameter via js variable

 * 	<script src="http://....timeline-api.js?bundle=true"  // pass parameter via url


 * Parameters 

 *   timeline-use-local-resources -- 

 *   bundle -- true: use the single js bundle file; false: load individual files (for debugging)

 *   locales -- 

 *   defaultLocale --

 *   forceLocale -- force locale to be a particular value--used for debugging. Normally locale is determined

 *              	by browser's and server's locale settings.



And I have this code in the run() method of my CWidget derived controller:[size="1"] (but none of the variations of registerClientScript seem to avoid the error.)[/size]





   	//this works



   	//none of these work?? How can get this to work locally??

   	//when local timeline-api-js is uncommented get syntax error in javascript on line 1 of index.php

   	//the <!DOCTYPE line is highlighted in firebug console.








As for #2 (if you are still with me, i.e: making a php helper file) I have collected these links as a starting point from those who have done similar things for other frameworks like Cake and WP. So I shall post them here in the meantime so that they are all in one place.

local install for Rails circa 2007

Adding events manually - august ?2011?

loading timeline data circa 2009

WP PHP wrapper ?2009?

timeline helper for cake 2009

Simile Timeline widget homepage

How to create A javascript wrapper Yii Tutorial by @zaccaria

Once i have more experience and understanding of Yii, and javascript, I would be in a better position to work on this kind of project.

However if anyone else wants to take the lead in the meantime, I would be very happy to help with some guidance…

Your thoughts?