In the widget options, defining "loaded" with a function will call that function once all data is loaded and the first rendering of the timeline occurs
// inside of widget options
...
"loaded":function() { $(".loaded").html("loaded callback!"); },
...
tg_instance.zoom(-1);
tg_instance.zoom(1);
// setting pan buttons
tg_instance.panButton($(".pan-left"), "left");
tg_instance.panButton($(".pan-right"), "right");
Set date and zoom level.
tg_instance.goTo("2001-09-11 08:24:00",22);
Go to today, at current zoom:
tg_instance.goTo("today");
At any time, you can grab the current focus and other information about the visible scope of the timeline, as well as the reach of loaded timelines.
var scope = tg.instance.getScope()
...
Scroll to right side of timeline to add an event: You should see "New Event" with red star icon showing up. It's given a random importance value.
var obj = {
id:"new_event_id",
title:"New Event!",
startdate:"today", // or YYYY-MM-DD format
importance:32,
icon:"star_red.png",
timelines:["js_history"]
}
tg_instance.addEvent(obj, true);
Update event will, in this case change the title of "Slow death of Flash", to "Flash struggles...".
var updatedEventModel = {
id:"deathofflash",
title: "Flash struggles to survive in the age of HTML5."
}
tg_instance.updateEvent(updatedEventModel);
Make a visible change to json/js_history.json, then click on the reload button.
tg_instance.reloadTimeline("js_history", "json/js_history.json");
Using an ajax request, load a new timeline into view.
Refresh is a simple re-rendering of the timeline that may need to occur after changes of internal data view states. Usually refresh() is taken care of automatically (by the mediator) when zoom level changes or if one sets a specific date with goTo().
adjustNow() will renew dates for events that had "now" (perpetually current) as their initial values, setting them to the current time.