Re: adding band to horizontal timeline

[Larry Kluger]

Hi Pedroparamo,

Welcome to Timeline. 

I suggest that you start with one of the example files that has two bands, uses 
json, and go from there.

Remember that you can split your development in two: 
1) Create a json data file and make sure that it works with one of the existing 
example files
2) Create an html Timeline page and make sure it works with one of the data 
files from an example.

The test examples 1, 2 and 3 and the local example are designed to be 
straight-forward to update.

Unfortunately, the documentation is not as reliable as it needs to be. This is 
an on-going concern and issue.

Regards,

Larry




________________________________
From: pedroparamo <peterrober...@gmail.com>
To: SIMILE Widgets <simile-widgets@googlegroups.com>
Sent: Thursday, April 2, 2009 11:48:39 AM
Subject: adding band to horizontal timeline


I've trying to build a timeline with two bands.  I've got a simple
timeline working with one band but I'd like to add another band so
that I have the year and month.  The scripts I'm using are the
following:

<script src="local_data.js" type="text/javascript"></script>
   <script>
        var tl;
        function onLoad() {
            var tl_el = document.getElementById("tl");
            var eventSource1 = new Timeline.DefaultEventSource();

            var theme1 = Timeline.ClassicTheme.create();
            theme1.autoWidth = true; // Set the Timeline's "width"
automatically.
                                     // Set autoWidth on the
Timeline's first band's theme,
                                     // will affect all bands.
            theme1.timeline_start = new Date(Date.UTC(1927, 0, 1));
            theme1.timeline_stop  = new Date(Date.UTC(2010, 0, 1));

            var d = Timeline.DateTime.parseGregorianDateTime("1927")
            var bandInfos = [
                Timeline.createBandInfo({
                    width:          45, // set to a minimum, autoWidth
will then adjust
                    intervalUnit:   Timeline.DateTime.YEAR,
                    // set for start interval
                    intervalPixels: 100,
                    eventSource:    eventSource1,
                    date:           d,
                    theme:          theme1,
                    layout:         'original'  // original, overview,
detailed
                })
            ];

            // create the Timeline
            tl = Timeline.create(tl_el, bandInfos,
Timeline.HORIZONTAL);

            var url = '.'; // The base url for image, icon and
background image
                           // references in the data
            eventSource1.loadJSON(timeline_data, url); // The data was
stored into the
                                                       //
timeline_data variable.
            tl.layout(); // display the Timeline
        }

        var resizeTimerID = null;
        function onResize() {
            if (resizeTimerID == null) {
                resizeTimerID = window.setTimeout(function() {
                    resizeTimerID = null;
                    tl.layout();
                }, 500);
            }
        }
   </script>

I'd like to build something that uses something similar to the
following (which I got from the documentation) but whenever I try to
use this it breaks the timeline and nothing is displayed:

var tl;
function onLoad() {
   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("my-timeline"),
bandInfos);
}

var resizeTimerID = null;
function onResize() {
     if (resizeTimerID == null) {
         resizeTimerID = window.setTimeout(function() {
             resizeTimerID = null;
             tl.layout();
         }, 500);
     }
}

I'd like to be able to use a data js file rather than an xml (which
the above example
uses) to load my data.

Any suggestions?

Thanks.  By the way Timeline rocks.  I've been stoked since I found
it.  Great work developers!

Pedroparamo

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"SIMILE Widgets" group.
To post to this group, send email to simile-widgets@googlegroups.com
To unsubscribe from this group, send email to 
simile-widgets+unsubscr...@googlegroups.com
For more options, visit this group at 
http://groups.google.com/group/simile-widgets?hl=en
-~----------~----~----~----~------~----~------~--~---