HI,
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:
-
call the api from the mit website
-
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)
<?php
/**
* Timeline.php Yii widget to display SIMILIE timeline.
*/
class Timeline extends CWidget
{
public function run()
{
//Register the remote URL of the Timeline javascript api.
Yii::app()->clientScript->registerScriptFile('http://static.simile.mit.edu/timeline/api-2.3.0/timeline-api.js');
//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 = [
Timeline.createBandInfo({
width: '70%',
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 100
}),
Timeline.createBandInfo({
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;
tl.layout();
}, 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()
$this->render('timeline');
}
}
?>
[u]
STEP 2: Create a view file in protected/components/views named timeline.php [/u] (note lowercase)
<?php
/*
* 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]
...
<?php
$this->beginWidget('zii.widgets.CPortlet', array(
'title'=>'Timeline'
));
$this->widget('Timeline');
$this->endWidget();
?>
...
you like? +1 me! 