How to manually add events to simile timeline widget

Question

I am able to use simile timeline with json file using...

 tl.loadJSON("/files/trial.js", function(json, url) { eventSource.loadJSON(json, url); });

I would like to connect it json output.

 tl.loadJSON("http://mywebsite.com/events/json/", function(json, url) { eventSource.loadJSON(json, url); });

I am also having trouble adding events manually.

I appreciate any help.

MartyIX · Accepted Answer · 2011-09-07T09:31:23.480

This should be a complete working example of adding an event:

// requires: http://simile.mit.edu/timeline/api/timeline-api.js

<div id='tl' style="height:100px; z-index: 1"></div> 

<script>
    SimileAjax.History.enabled = false;

    // Events that will be loaded via loadJSON method
    var timeline_data = {
            'events' : [

                            {
                            'start': new Date(2011, 9, 6),
                            'end': new Date(2011, 9, 10),
                            'title': 'Event 1',
                            'description': ''                                
                            }
                            ,

                            {
                            'start': new Date(2011, 9, 7),
                            'end': new Date(2011, 9, 10),
                            'title': 'Event 2',
                            'description': ''
                            }                                
          ]
    }

    // IMPORTANT PART
    // Display new event
    // Source of information:
    // http://markmail.org/message/zfsq3ue3fovhvtuz#query:+page:1+mid:zfsq3ue3fovhvtuz+state:results
    function displayEvent() {

            // Define your own event, this is static to make things simple
            var evt = new Timeline.DefaultEventSource.Event({

                    'start': new Date(2011, 9, 7),
                    'end': new Date(2011, 9, 10),
                    'title': 'added event',
                    'description': 'added event',
                    'color': 'yellow'

            });

            // eventSource1 is defined lower, you should really refactor this code :-)
            eventSource1._events.add(evt);
            eventSource1._fire("onAddMany", []);
            tl.layout();
    }


    // Timeline and eventSource1
    var tl;
    var eventSource1;

    // Initialize timeline and load data from variable `timeline_data`
    window.onload = function() {

        var tl_el = document.getElementById("tl");
        eventSource1 = new Timeline.DefaultEventSource();

        var theme1 = Timeline.ClassicTheme.create();
        theme1.event.bubble.height = 220;
        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(1924, 0, 1));
        theme1.timeline_stop  = new Date(Date.UTC(2160, 0, 1));

        var d = Timeline.DateTime.parseGregorianDateTime("1900")
        var bandInfos = [
            Timeline.createBandInfo({
                width:          "80%",
                intervalUnit:   Timeline.DateTime.WEEK,
                intervalPixels: 200,
                eventSource:    eventSource1
              //  theme:          theme
            }),
            Timeline.createBandInfo({
                width:          "20%",
                intervalUnit:   Timeline.DateTime.MONTH,
                intervalPixels: 200,
                eventSource:    eventSource1,
                overview:       true
               // theme:          theme
            })
        ];

        bandInfos[1].syncWith = 0;
        bandInfos[1].highlight = true;

        // 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
    };

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

thanks I appreciate your help. One last thing, I add all of this year's events onload. If user scrolled to last year, I want to dynamically add event details. Like when user goes to dec 2010, It would trigger a ajax call to get data of last year and update the timeline. Is there a way to achieve this. I appreciate your help. — Josh Randall, Sep 07 '11 at 09:36
I don't know how to do that but you can try to adjust content of `eventSource1._events` where the events are stored. In Chrome or Firefox you can see what arrays and variables are stored there. HTH — MartyIX, Sep 07 '11 at 10:18

How to manually add events to simile timeline widget

1 Answers1