did this today. My code is as follows. Timeline 2.3.1 is very sensitive to
just about anything which gives you that lovely blank timeline. In this
case many of the parameters into the timeline class are give by smarty
template variables. This script does 4 timelines on the one page. I am
building a timeline web app and this is the homepage that shows random
timelines from the store.
<script>
> var tl1;
> var tl2;
> var tl3;
> var tl4;
>
> function onLoad() {
> var eventSource = new Timeline.DefaultEventSource();
> var theme = Timeline.ClassicTheme.create();
> theme.event.track.height = 14;
> theme.event.tape.height = 8;
> theme.event.instant.iconWidth = 15;
> theme.event.instant.iconHeight = 15;
> var bandInfos1 = [
> Timeline.createBandInfo({
> theme: theme,
> eventSource: eventSource,
> date: "{$atmlDate}",
> width: "{$atmlWidth1}",
> intervalUnit: {$atmlIntervalUnit1},
> intervalPixels: {$atmlIntervalPix1}
> }),
> Timeline.createBandInfo({
> overview: true,
> eventSource: eventSource,
> date: "{$atmlDate}",
> width: "{$atmlWidth2}",
> intervalUnit: {$atmlIntervalUnit2},
> intervalPixels: {$atmlIntervalPix2}
> })
> ];
> bandInfos1[1].syncWith = 0;
> bandInfos1[1].highlight = true;
>
> var bandInfos2 = [
> Timeline.createBandInfo({
> theme: theme,
> eventSource: eventSource,
> date: "{$btmlDate}",
> width: "{$btmlWidth1}",
> intervalUnit: {$btmlIntervalUnit1},
> intervalPixels: {$btmlIntervalPix1}
> }),
> Timeline.createBandInfo({
> overview: true,
> eventSource: eventSource,
> date: "{$btmlDate}",
> width: "{$btmlWidth2}",
> intervalUnit: {$btmlIntervalUnit2},
> intervalPixels: {$btmlIntervalPix2}
> })
> ];
> bandInfos2[1].syncWith = 0;
> bandInfos2[1].highlight = true;
>
> var bandInfos3 = [
> Timeline.createBandInfo({
> theme: theme,
> eventSource: eventSource,
> date: "{$ctmlDate}",
> width: "{$ctmlWidth1}",
> intervalUnit: {$ctmlIntervalUnit1},
> intervalPixels: {$ctmlIntervalPix1}
> }),
> Timeline.createBandInfo({
> overview: true,
> eventSource: eventSource,
> date: "{$ctmlDate}",
> width: "{$ctmlWidth2}",
> intervalUnit: {$ctmlIntervalUnit2},
> intervalPixels: {$ctmlIntervalPix2}
> })
> ];
> bandInfos3[1].syncWith = 0;
> bandInfos3[1].highlight = true;
>
> var bandInfos4 = [
> Timeline.createBandInfo({
> theme: theme,
> eventSource: eventSource,
> date: "{$dtmlDate}",
> width: "{$dtmlWidth1}",
> intervalUnit: {$dtmlIntervalUnit1},
> intervalPixels: {$dtmlIntervalPix1}
> }),
> Timeline.createBandInfo({
> overview: true,
> eventSource: eventSource,
> date: "{$dtmlDate}",
> width: "{$dtmlWidth2}",
> intervalUnit: {$btmlIntervalUnit2},
> intervalPixels: {$btmlIntervalPix2}
> })
> ];
> bandInfos4[1].syncWith = 0;
> bandInfos4[1].highlight = true;
>
> tl1 = Timeline.create(document.getElementById("pane1"), bandInfos1);
> tl1.loadJSON("https://cain/retrieve.php?id={$atmlId}"; ,
> function(json, url) {
> eventSource.loadJSON(json, url);
> });
>
> tl2 = Timeline.create(document.getElementById("pane2"), bandInfos2);
> tl2.loadJSON("https://cain/retrieve.php?id={$btmlId}"; ,
> function(json, url) {
> eventSource.loadJSON(json, url);
> });
>
> tl3 = Timeline.create(document.getElementById("pane3"), bandInfos3);
> tl3.loadJSON("https://cain/retrieve.php?id={$ctmlId}"; ,
> function(json, url) {
> eventSource.loadJSON(json, url);
> });
>
> tl4 = Timeline.create(document.getElementById("pane4"), bandInfos4);
> tl4.loadJSON("https://cain/retrieve.php?id={$dtmlId}"; ,
> function(json, url) {
> eventSource.loadJSON(json, url);
> });
>
> }
>
> var resizeTimerID = null;
> function onResize() {
> if (resizeTimerID == null) {
> resizeTimerID = window.setTimeout(function() {
> resizeTimerID = null;
> tl.layout();
> }, 500);
> }
> }
> </script>
>
HTH
Paul
On Thursday, 5 September 2013 03:24:42 UTC+10, Andreas Kunz wrote:
>
> Hi,
>
> is it possible to display two different timelines with different
> event-data within the same browser window? So far, I've tried to duplicate
> the var eventSource code and var bandInfos code in the html-File with
> adaption of the notation. But then, not even one timeline is displayed,
> only a rectangular. Maybe someone knows how to do it and can give me a
> minimal example code for my problem.
>
> Thanks a lot!
>
>
> Best regards,
>
> Andreas
>
--
You received this message because you are subscribed to the Google Groups
"SIMILE Widgets" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/simile-widgets.
For more options, visit https://groups.google.com/groups/opt_out.
