I was finally able to achieve the kind of display I wanted. Just posting here for benefit of others who would want to do same/similar stuff as well as for experts to give their views on.
I achieved changing the position of title for non-duration event by overriding Timeline.OriginalEventPainter.prototype.paintPreciseInstantEvent method and changing the way left edge of the label is calculated as follows: var labelLeft = Math.round(startPixel - metrics.iconWidth) - labelSize.width; With this one line change the title appears on left of the icon. --Atul On Feb 15, 10:15 pm, Atul <[email protected]> wrote: > After a little more playing around and reading the timeline code I > realized that there is an attribute (theme.event.label.offsetFromLine) > in theme that is used to determine the left edge of the label. I gave > it a negative value and the label appeared on the left of the icon as > I wanted. > > I know its kind of a kludge but for now it works. The only issue with > this solution is that the offsetFromLine has to be set keeping in mind > the widest label I might have. This will result in some white space > for smaller labels and that will not look very good. Am still looking > for a better solution.... > > Thanks, > Atul > > On Feb 14, 11:08 pm, Atul <[email protected]> wrote: > > > Hi All, > > > I am using simile timeline widget in my project. The requirement of my > > project is to show the events pertaining to a single activity on same > > track with a bar connecting all events. Typical timeline looks as > > follows: > > > 0=======0======0===0====0 > > > Here '0' corresponds to a 'non-duration' event and "====" corresponds > > to a 'duration' event connecting these non-duration events to present > > this as one activity with flags/indicators marking important > > milestones at certain point in time of this activity. I was able to > > achieve this by using 'trackNum' attribute of event and keeping the > > title attribute of each event as empty string so that all the related > > events show up on same track. > > > Timeline in our project could have multiple such tracks and we want to > > label each of these tracks with a title so that user can easily > > identify the activity he/she is interested in and explore further by > > clicking on that activity related events. We want the timeline to look > > like this: > > > (Activity A) 0=====0==0====0===0 > > (Activity B) 0==========0===0===0===0 > > > In order to achieve the above kind of display I added the title > > attribute only to the first event in the activity. However, by default > > timeline puts the title of the event (non-duration) always to the > > right of the icon. This make the title ('Activity A') being overlapped > > by subsequent non-duration events (if they are close enough) or the > > duration event following the first event. I checked how the duration > > events are layout using firebug and found that there are two separate > > divs - one for icon and one for title and there is no parent div > > enclosing both of them. I was hoping to change the layout by using > > 'float: right' property but given the layout I think this might not be > > possible as there is no container div for both icon and title. > > > Is there any way to achieve the title of non-duration event to come > > before the icon of the event? We want only the icon to be at the > > correct temporal position (at the time event occurred). So it is OK if > > the title comes before the actual occurrence of the event. > > > Any pointer/help will be of great help. > > > Thanks, > > Atul -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
