Timeline helper
3 : Example project - part 2
Easy to use helper for the MIT Simile Web Widgets component Timeline. Timeline allows web site creators to embed interactive timelines into their sites. It requires only that visitors have Javascript enabled. It's often referred to as "Google Maps" for time.
For the other view we will show relevant information about the main activity and a timeline with it, and all it's sub activities. We do this in the same way as before, with an actual action/view and ajax for timeline content. This time however we have 2 datasets for the timeline, so we need 2 ajax actions and views.
Controller Class:
<?php class MainActivitiesController extends AppController {
// [..]
function ajax_timeline($id) {
Configure::write('debug',0);
$this->layout = 'ajax';
$this->set('data', $this->MainActivity->read(null, $id));
}
function ajax_timeline_main($id) {
Configure::write('debug',0);
$this->layout = 'ajax';
$this->MainActivity->recursive = -1;
$this->set('data', $this->MainActivity->read(null, $id));
}
function view($id = null) {
$this->MainActivity->recursive = -1;
$this->set('data', $this->MainActivity->read(null, $id));
}
?>
View Template:
<?php // /app/main_activities/view.ctp
echo '<h2'.$data['MainActivity']['title'].'</h2>';
echo '<p>'.$data['MainActivity']['description'].'</p>';
<div id="timeline" style="width: 1000px; height: 360px;"></div>
<?php
echo $timeline->create('timeline');
$timeline->band(array('width' => '"40px"','intervalPixels' => '100',
'intervalUnit'=>'Timeline.DateTime.WEEK'),
'main'
);
$timeline->band(array('width' => '"250px"','intervalPixels' => '100',
'intervalUnit'=>'Timeline.DateTime.WEEK'),
'sub'
);
$timeline->band(array('width' => '"30px"','overview' => "true",
'intervalPixels' => '900','intervalUnit'=>'Timeline.DateTime.YEAR'),
'sub'
);
$timeline->band(array('width' => '"40px"','intervalPixels' => '900',
'intervalUnit'=>'Timeline.DateTime.YEAR'),
'main'
);
$timeline->setDataSource(array('action'=>'ajax_timeline',$data['MainActivity']['id']),'sub');
$timeline->setDataSource(array('action'=>'ajax_timeline_main',$data['MainActivity']['id']),'main');
echo $timeline->end();
?>
The main difference here between this view and the previous is that we here name our datasource(s) and specify to each band what datasource they use (main and sub). The first band is the main activity and the second is it's sub activities, these are both shown in weeks and are therefore comparable. The third band is an overview band that will help locate interesting parts of the year for sub activities and likewise the last band shows the main activity in years.View Template:
<?php // /app/main_activities/ajax_timeline.ctp
$xpaths = array(
'title' => '/title',
'start' => '/from',
'end' => '/to',
'color' => '/color'
);
echo $timeline->renderJSON($data['SubActivity'],array(),$xpaths);
?>
View Template:
<?php // /app/main_activities/ajax_timeline_main.ctp
$defaults = array(
'color' => '#239323',
);
$xpaths = array(
'title' => '/title',
'start' => '/from',
'end' => '/to',
'description' => '/description'
);
echo $timeline->renderJSON(array(0=> $data['MainActivity']),$defaults,$xpaths);
?>
In the second ajax view notice how we take advantage of the $defaults option to give the activity a color and since renderJSON expects the result of a find('all'), we add a level to the $data when sending it in.
Latest Comments