3

I've been playing around with http://almende.github.com/chap-links-library/timeline.html which allows the user to add/edit/delete events on the timeline. Closing or refreshing the browser resets it to the pre-loaded data source - JSON, table info or Google Spreadsheet. Nothing the user adds or changes is saved.

How do you make user changes persistent?

I've used HTML5 localStorage before for saving text, checkbox, and select box entries, etc. but with this Timeline the only entry is:

div id="mytimeline"

which has a script associated with it:

        // Instantiate our timeline object.
        timeline = new links.Timeline(document.getElementById('mytimeline'));

which is the reference to the JS that builds the timeline container.

Any ideas or examples or pointers?

Thanks.

Update: Here is what I have so far:

//Check to see if localStorage is supported
var db = getLocalStorage() || alert("Local Storage Not supported in this browser.  Try updating to the latest Firefox, Chrome or Safari browsers.");

function getLocalStorage() {
    try {
        if(window.localStorage ) return window.localStorage;            
}
    catch (e)
{
    return undefined;
}
}  

//Store Timeline Data to localStorage
function storeTimelineData(){
    var data=timeline.getData();
    localStorage.setItem('mytimeline', JSON.stringify(data));
    var storedData=JSON.parse( localStorage.getItem('myTimeline') );

// clear storage
function clearLocal() {
clear: localStorage.clear();
return false;
}

I've also made these changes - body onload="storedData()" to try to load localStorage saved values and changed div id="mytimeline" onmouseup="storeTimelineData()" to store the values when changes are made to the timeline.

Changes to the Timeline are being saved in localStorage and I can see these changes in the console for Key/Values. When I refresh the browser though, these are not being loaded into mytimeline. What did I miss?

Thanks.

laaposto
  • 11,835
  • 15
  • 54
  • 71
Bob Tahmaseb
  • 73
  • 1
  • 6

1 Answers1

2

I've never seen plugin until your post but in the API docs are all sorts of methods. The most important one you would need to start would be getData().

Simplest storage scenario would be to set up a timed interval to get the data , convert it to JSON and store it. Alternative would be to update your stored data every time use interacts with events.

A basic storage update function would be along the lines of:

function storeTimelineData(){
      var data=timeline.getData();
      localStorage.setItem('myTimeline', JSON.stringify(data));
}

Then when page loads you would need to check if there is data in localStorage , convert it to a javascript object using :

var storedData= JSON.parse( localStorage.getItem('myTimeline') );

And use this data to initialize the plugin if the data exists.

I have really just given you a basic overview. There are numerous details you will have to sort out from here

charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • Thanks charlietfl...you got me on the right track and I think I'm mostly there. I updated my question and got it half working so far. – Bob Tahmaseb Dec 26 '12 at 00:38
  • good luck...plugin has a nice look, be nice if docs were a bit mor user friendly but there are tons of methods available to use – charlietfl Dec 26 '12 at 00:48
  • charlietfl - any ideas why the stored values are not being loaded back into the timeline? Thanks. – Bob Tahmaseb Dec 26 '12 at 14:50
  • I changed the retrieve data to a function and used the function name with body onload= (see edit above). Still not loading from localstorage. "...data to initialize the plugin...". Tried getData but no joy...Any hints on this? Thanks. – Bob Tahmaseb Dec 26 '12 at 22:38
  • `getTimelineData()` doesn't return anyhting, and `var getData` is withn function so has no scope anywhere else due to closure – charlietfl Dec 26 '12 at 22:44
  • Haven't figured it out yet. Stumped. Still stores but doesn't retain changes. storedData is killing me in how to implement. I put up this http://jsfiddle.net/babakt/6xhDw/2/ I wonder if getData is referencing back to the pre-loaded data? How do I return the stored values to the timeline? – Bob Tahmaseb Dec 27 '12 at 04:39
  • I played with getData on one of the demos pages using browser console before I provided solution in answer. I added an event, it was in the `getData` result,. WHen I deleted an event, it was no longer in the results – charlietfl Dec 27 '12 at 04:43
  • Sorry...mistyped after several frustrating hours. I'm seeing the changes in the developer console (value entry changes in local storage) as I add and delete entries. Storing the data is working well. What I can't figure out is why when I reload or reopen the browser, the timeline reverts back to its original state and does not retain added/changed events. I'm thinking I have something definitely wrong in posting back the stored data and/or have to do it somehow using an api method..."draw" or "setdata" maybe. Been going in circles trying to figure this out – Bob Tahmaseb Dec 27 '12 at 17:08