Timeline remote data source binding

[Joao]

Hello,

It is possible to instantiate a timeline with a json data from a remote source? 

For example, I have the following request:

$.ajax({

        type: 'GET',

        url: "/getData",

        contentType: "application/json; charset=utf-8",

        success: function (data) {

            instantiateTimeline(data);

        },

        error: function (XMLHttpRequest, textStatus, errorThrown) {

            alert("Error: " + errorThrown);

        }

    });

My data is a Json array object with a key element 'start' and a key element 'content' and in case of success I use the data as source for the timeline.

   timeline = new links.Timeline(document.getElementById('timeLine'));

    function onRangeChanged(properties) {

        document.getElementById('info').innerHTML += 'rangechanged ' +

            properties.start + ' - ' + properties.end + '<br>';

    }

    // attach an event listener using the links events handler

    links.events.addListener(timeline, 'rangechanged', onRangeChanged);

    // Draw our timeline with the created data and options

    timeline.draw(data, options);

Sorry for my English.

Thanks in advance!

[Joao]

Solved! :)

[Fernando Schaf]

Hello Joao.

Can you share the solution with us? I'm with the same doubts.

Tks

[Joao]

Sure :)

First of all, the structure of the Json should be the following:

[{"start":1387449694304,"content":"A"},{"start":1389199726781,"content":"B"},{"start":1389607933005,"content":"C"}] 

I'm only using the start date, but if you want/need you can add the endDate. I'm sending the date as Long but before rendering the timeline, I instantiate a date using new Date(json[i].start).

After that, only need to use the json as first argument for me method draw(), for instance:

timeline = new links.Timeline(document.getElementById('timeLine'));

timeline.draw(data, options);

Hope this helps

[Fernando Schafaschek]

Cool! 

In my case the trouble was the incorrect format of my timestamp attribute in the json source. It was a mistake between mysql timestamp format and the javascript timestamp, and I saved this trouble with the next strategy.

 >>'SELECT unix_timestamp(calendar.dt_schedule_start) * 1000 AS start, 

              unix_timestamp(event_register_data.dt_modification) * 1000 AS end, 

....                          

and then the json_encode is ok.

2014/1/23 Joao <joao.p...@gmail.com>

--
You received this message because you are subscribed to a topic in the Google Groups "CHAP Links Library" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/chap-links-library/Lpt3oewbEU0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to chap-links-libr...@googlegroups.com.
To post to this group, send email to chap-link...@googlegroups.com.
Visit this group at http://groups.google.com/group/chap-links-library.
For more options, visit https://groups.google.com/groups/opt_out.