Displaying multiple timelines on load

[jenSadler]

I would like to use a JSON file to display several timelines. Currently the timelines load but do not display automatically. The user must click the menu button and select the timelines individually to display them.

I've looked into the code and I think I've found where the change needs to be made. It's in the setInitialTimelines function in the TG_Mediator.js file. Instead of getting the initial_timeline_id, it should go through all of the timelines in the timelineCollection , get their ids and send them to the MED.toggleTimeline(tid) function.

The problem I'm having is that I don't know how to extract the timeline ids from the individual timelines. I've been trying to just get it in an alert, using this code(I provided the whole function for context):

setInitialTimelines : function () {

    var me = this;

        var tc=me.timelineCollection;
    alert(tc.length);                               //this alert produces the correct number of elements in the timelineCollection

        //needs fixing
        $.each(tc, function(index, value) { 
            alert(value.id);                   //this crashes the program , the rest of the code is just what was there before
        });

        var tid = this.initial_timeline_id || this.sole_timeline_id;

        // !AUTH
        if (timeglider.mode == "authoring") {
            this.setZoomLevel(40);
        } else if (tid) {
            // we need to wait just a bit...
            // !TODO What is timeout for?? 
            setTimeout(function () { MED.toggleTimeline(tid); }, 500);
        } else {
            this.setZoomLevel(40);
        }

      }, 

This is marked as a TODO, so If anyone could help me with it I would be much obliged. I've tried just about every combination I can think of to get the timeline ID.

[timeglider]

Hi Jen

I just rewrote that whole function (setInitialTimelines) so that it will load-to-view 2+ timelines (or it will default to the first timeline id in the timelines array in the load JSON) — see the recent push, and function below.

You need to do two other things:

1. in the timeline widget/plugin options, set the "initial_timeline_id" (sorry, this is still singular) as an ARRAY of your timeline ID strings, like this. (BTW for some reason I can't figure out yet, timeline IDs can't have spaces in them.) initial_timeline_id: ["id_one", "id_two"], The first ID will be the timeline whose focus date and zoom level is focused at.
2. Make sure in the timeline JSON (at the level of timeline properties) you add a "top" property to at least one timeline so that they don't overlap. "top" is the px value from the top of the frame. Not set, the timeline will be displayed hugging the bottom of the container, near the "ruler". It ought to look like this:

``` top:"150px" Just like a CSS property.

Here's the function in TG_TimelineMediator.js now:

setInitialTimelines : function () {

        var me = this,
            initial_timelines = this.initial_timeline_id,
            first_focus_id = "";

        // i.e. really, it's an array
        if (typeof initial_timelines == "object") {
            // set first timeline in array as one to focus on
            first_focus_id = this.initial_timeline_id[0];
            // make all specified ids active
            _.each(initial_timelines, function (id) {
                me.activeTimelines.push(id);
            });

        } else {
            // not an array: a string would be single id or ""
            tid = this.initial_timeline_id || this.sole_timeline_id;
            me.activeTimelines = [tid];
        }

        if (timeglider.mode == "authoring") {
            // no timelines loaded right away
            me.setZoomLevel(40);

        } else if (first_focus_id) {

            // we need to wait just a bit...
            setTimeout(function () { 

                // timeline on which to focus is first/only
                var tl = me.timelineCollection.get(first_focus_id);
                var tl_fd = new TG_Date(tl.get("focus_date"));

                me.setFocusDate(tl_fd);

                // resetting zoomLevel will refresh
                me.setZoomLevel(tl.get("initial_zoom"));

            }, 500);

        } else {
            // could be no timelines to load
            me.setZoomLevel(40);
        }

    }, 

[timeglider]

I've got a live example of this here: http://timeglider.com/jquery/mylife.html

[jenSadler]

Thanks so much for getting back to me so quickly. I'll take a look at this over the weekend.