Data from json file for use with CHAPS timeline

Question

I'm trying to use the CHAP links library timeline (http://almende.github.io/chap-links-library/timeline.html).

Example17 is using JSON, but it's in the html file itself. I'd like to use an external JSON file sitting on the web server instead.

Here's my example.json:

{"timeline":[
    {
        "start":"2013,7,26",
        "end":"2013,7,26",
        "content": "Bleah1"
    },
    {
        "start":"2013,7,26",
        "end":"2013,8,2",
        "content": "Bleah2"
    },
    {
        "start":"2013,7,26",
        "end":"2013,8,2",
        "content": "Bleah3"
    },
    {
        "start":"2013,7,26",
        "end":"2013,8,2",
        "content": "Bleah4"
    }
]}

I added this:

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

And here's the modified function:

        // Called when the Visualization API is loaded.
    function drawVisualization() {
        // Create a JSON data table

          $.getJSON('example.json', function(jsondata) {
                data = jsondata.timeline;
            });


        // specify options
        var options = {
            'width':  '100%',
            'height': '300px',
            'editable': true,   // enable dragging and editing events
            'style': 'box'
        };

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

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

Anyone who can tell me what I'm doing wrong gets a cookie! :-)

Update: I should specify that it's rendering the timeline div correctly, I'm just getting no data showing up.

Thanks @dandavis but that appears to break it completely. Did you mean moving the 3rd line of code in the function down to be the second to last line? Perhaps I misunderstood. — Josh, Jul 25 '13 at 23:24
you want the " });" that ends the $.getJSON call back to stretch all the way to the end of drawVisualization(), so that 90% of drawVisualization is the callback itself with the data you need to draw the visualization. — dandavis, Jul 25 '13 at 23:26

score 1 · Answer 1 · answered Nov 19 '13 at 13:58

1

Your start and end dates need to be parsed as Date objects for use in the timeline

answered Nov 19 '13 at 13:58

dps27a

101
3
11

So for use in your code: $.getJSON('example.json', function(jsondata) { data = jsondata.timeline; foreach(data){ data.date = new Date(data.date); } }); – dps27a Oct 10 '14 at 14:23

score 1 · Answer 2 · answered Mar 14 '14 at 12:13

I stumbled on this post as I was implementing similar functionality.

In version 2.6.1 of timeline.js, around line 3439 where the function links.Timeline.Item is declared, you'll notice a comment relating to implementing parseJSONDate.

/* TODO: use parseJSONDate as soon as it is tested and working (in two directions)
         this.start = links.Timeline.parseJSONDate(data.start);
         this.end = links.Timeline.parseJSONDate(data.end);
         */

I enabled the suggested code and it all works!* (go to the parseJSONDate function to see which formats are accepted)

*(works insofar as dates appear on the timeline.. I'm not using therefore not testing any selection/removal features, images, or anything like that..)

Data from json file for use with CHAPS timeline

2 Answers2