Refresh the timeline with new data.

[Fellipe Augusto da Silva]

Is there any way to reload the timeline with a new .json containing new data?
I've read that there is an method timeline.reload(json) but couldn't make it work...

Thanks!

[Zach Wise]

It does not work. I started implementing the method but other issues became a priority.

[Doug Cain]

This would be very helpful to implement for my current project.

Currently I am working around it by clearing the containing div, dynamically getting my updated json and reinitialising using createStoryJS which is a bit of a hack!

[Zach Wise]

Sorry, it's going to be awhile before I can work on that feature.

[Keven Lefebvre]

How did you do that?

I tried too but it doesn't work.

                $('#timeline-embed').html('');

                var timeline_config = {

                    width:              '100%',

                    height:             '600',

                    source:             '{{ URL::to("timeline/town") }}/' + townId,

                    embed_id:           'timeline-embed',               //OPTIONAL USE A DIFFERENT DIV ID FOR EMBED

                    start_at_end:       false,                          //OPTIONAL START AT LATEST DATE

                    start_zoom_adjust:  '1',                            //OPTIONAL TWEAK THE DEFAULT ZOOM LEVEL

                    hash_bookmark:      true,                           //OPTIONAL LOCATION BAR HASHES

                    font:               'Bevan-PotanoSans',             //OPTIONAL FONT

                    debug:              true,                           //OPTIONAL DEBUG TO CONSOLE

                    lang:               'fr',                           //OPTIONAL LANGUAGE

                    maptype:            'watercolor'                    //OPTIONAL MAP STYLE

                }

                createStoryJS(timeline_config);

[Keven Lefebvre]

I tried the following but it doesn't load the new source:

                var timeline_config = {

                    width:              '100%',

                    height:             '600',

                    source:             '{{ URL::to("timeline/index/town") }}/' + townId,

                    embed_id:           'timeline-embed',               //OPTIONAL USE A DIFFERENT DIV ID FOR EMBED

                    start_at_end:       false,                          //OPTIONAL START AT LATEST DATE

                    start_zoom_adjust:  '1',                            //OPTIONAL TWEAK THE DEFAULT ZOOM LEVEL

                    hash_bookmark:      true,                           //OPTIONAL LOCATION BAR HASHES

                    font:               'Bevan-PotanoSans',             //OPTIONAL FONT

                    debug:              true,                           //OPTIONAL DEBUG TO CONSOLE

                    lang:               'fr',                           //OPTIONAL LANGUAGE

                    maptype:            'watercolor'                    //OPTIONAL MAP STYLE

                }

                storyjs_embedjs = new VMM.Timeline('timeline-embed');

                storyjs_embedjs.init(timeline_config);

[Doug Cain]

Hi Keven,

I did this:

             $(document).ready(function() {

                    // Global for the timeline object so I can reset it (not sure if this is really required)

                    var gTimeLine = "";

                    $('#survey_start_date').datepicker({

                          dateFormat: "dd/mm/yy",

                          onSelect: function(dateText, inst) {

                          //Update startdate in system

                          var fetch_url = "myURL?method=setStartDate&startdate="+ escape(dateText);

                           $.get(fetch_url,function(response){

                             if (response == 'true') {

                                 //We have changed the start date in the system so re-load the timeline

                                 gTimeLine = null;

                                 $('##timeline-embed').html("");

                                 initTimeline ();

                              }

                           });

                     }

                });

              // Initialise timeline on page load  

                initTimeline ();

            });                        

            function initTimeline () {

               // Get data from JSON source (also calculates slide to show and returns in structure

                 var fetch_url = "myURL?method=getDates";

                $.get(fetch_url,function(response){

                       var objdata2load = JSON.parse(response);

                      var slide=0;

                    // Initialise timeline with loaded JSON data

                       gTimeLine = createStoryJS({

                           type: 'timeline',

                           embed_id: 'timeline-embed',

                           width: "100%",

                           height: "100%",

                           start_zoom_adjust:0,

                           start_at_slide: objdata2load.timeline.defaultslide,

                           source: objdata2load

                       });

                });

          }

 

Hope that helps.

Doug 

[Keven Lefebvre]

Thank you Doug! Will certainly help 

[Sam Shmayev]

Hi,

Assume we have 

2 data objects: data1, data2 

and 2 buttons: button1 will load TimelineJS with data1 and button2 will load TimelineJs with data2.

Scenario:

1. Click button1 > result a new greate TimelineJS with data1

2. Click button2 > result JS errors

1. Uncaught TypeError: Cannot call method 'leftpos' of undefined timeline.js:5207

1. Uncaught TypeError: Cannot call method 'show' of undefined
2. 
   

Please provide example of dynamic refresh of Timeline data source.

[Javs]

Hi Sam,

Did you find any solution for this. I have been struggling from past two days to achieve this.

Getting the same error, I tried working around things but no help.

If you were able to fix this...can you please share.

Thanks,

Javish

[Javs]

Hey,

It's working. I changed my config settings and it worked.

Cheers,

Javish

[Francisco Carlos Artal Barba]

Hi all,

I have two buttons that load a different source data
My problem is that events from both source data get mixed. Every time I press a button, instead of reloading with only the new data, the new data get appended to the existing data.

Please, could you help me? A working example will be very helpful, too!

My code:

$(window).load(function() {
    var sourceNews = 'https://docs.google.com/spreadsheet/pub?key=0Aly6bWUDjwazdG1UN2p3YkJ6Tk15UDN6RnpQd2hOaGc&single=true&gid=0&output=html';
    var idDestinationNews = '#news';
    var _idDestinationNews = 'news';
    var sourceHistory = 'https://docs.google.com/spreadsheet/pub?key=0Aly6bWUDjwazdEllTHBSRDlBcDQ4MlFqSVp4ZEpZYWc&output=html';
    var idDestinationHistory = '#history';
    var _idDestinationHistory = 'history';

    var timeline = null;

    $(idDestinationNews).show();
    $(idDestinationHistory).hide();

    createTimeline(_idDestinationNews, sourceNews);

    /*
     * <button id="btNews">News</button>
     * <button id="btHistory">History</button>
     */
    $('#btNews').on('click', function() {
        $(idDestinationNews).empty();
        $(idDestinationNews).html("");
        $(idDestinationNews).unbind();
        timeline = null;

        createTimeline(_idDestinationNews, sourceNews);
        $(idDestinationNews).show();
    });

    $('#btHistory').on('click', function() {
        $(idDestinationNews).empty();
        $(idDestinationNews).html("");
        $(idDestinationNews).unbind();
        timeline = null;

      
        createTimeline(_idDestinationNews, sourceHistory);
        $(idDestinationNews).show();
    });
});

function createTimeline(id_destination, source) {

    timeline = createStoryJS({
        type: 'timeline',

        width: '100%',
        height: '100%',

        start_at_slide: 0,
        source: source,
        embed_id: id_destination,
        css: 'js/timeline/css/timeline.css', //OPTIONAL PATH TO CSS
        js: 'js/timeline/js/timeline.js'    //OPTIONAL PATH TO JS
    });
}