Load JSON from file vs. as variable for timeline events

Question

I use the SMILES timeline loading event data as JSON from file and as variable.

Loading from file works fine using the samplecode from the homepage:

tl = Timeline.create(document.getElementById("div-timeline"), bandInfos);
     Timeline.loadJSON("js/timelinedata.json", function(json, url) {
         eventSource.loadJSON(json, url); });

Here is the content of my file timelinedata.json:

{"dateTimeFormat": "iso8601",
"events" : [
        {"start": "1924",
        "title": "Barfusserkirche",
        "description": "by Lyonel Feininger, American/German Painter, 1871-1956",
        "image": "link to an image",
        "link": "link to an article"
        }
]}

However when i paste the JSON into a var and try to load it i get complains.

This is how i populate my var:

function TimeTestData1(){
    var TimelineEvent =  {"dateTimeFormat": "iso8601",
    "events" : [
            {"start": "1924",
            "title": "Barfusserkirche",
            "description": "by Lyonel Feininger, American/German Painter, 1871-1956",
            "image": "link to an image",
           "link": "link to an article"
            }
    ]};
    return TimelineEvent;
  }

And use it in timeline:

var tdata = TimeTestData1();
console.dir(tdata); // this looks fine
// [ timeline code ]
Timeline.loadJSON(tdata, function(json, url) { eventSource.loadJSON(json, url); });

I get an "alert" popup with the message:

Failed to load json data from [object Object] Not Found

When i use JSON.stringify(tdata) like this:

Timeline.loadJSON(JSON.stringify(tdata), function(json, url) {
    eventSource.loadJSON(json, url); });

The browser tells me (using alert popup):

Failed to load json data from {"dateTimeFormat":"iso8601","events":[{"start":1924,"title":"Barfusserkirche","description":"by Lyonel Feininger, American/German Painter, 1871-1956","image":"link to an image","link":"link to an article"}]} Not Found

here is the complete code of the timeline function:

function LoadTimeline() {
    var tl;
    var eventSource = new Timeline.DefaultEventSource(0);
    //var tdata = TimeTestData1();
    var theme = Timeline.ClassicTheme.create();
    theme.timeline_start = new Date(Date.UTC(1890, 0, 1));
    theme.timeline_stop  = new Date(Date.UTC(2020, 0, 1));
    var d = Timeline.DateTime.parseGregorianDateTime("1950") // set date to display
    var bandInfos = [
        Timeline.createBandInfo({
            width:          "70%",
            intervalUnit:   Timeline.DateTime.YEAR,
            intervalPixels: 100,
        eventSource:    eventSource,
                date:           d
        }),
        Timeline.createBandInfo({
            width:          "30%", 
            intervalUnit:   Timeline.DateTime.CENTURY,
        eventSource:    eventSource,
            date:           d,
            intervalPixels: 200
        })
    ];
    bandInfos[1].syncWith = 0;
    bandInfos[1].highlight = true;
    tl = Timeline.create(document.getElementById("div-timeline"), bandInfos);
    Timeline.loadJSON("js/timelinedata.json", function(json, url) {
        eventSource.loadJSON(json, url); });
    } //JSON.stringify(tdata) or tdata or  "js/timelinedata.json"

How do I have to pass my event json var so timeline eats it?

score 0 · Answer 1 · edited Jul 19 '16 at 19:09

0

Timeline.loadJSON expects a URL, not JSON. Try removing that call altogether and only call eventSource.loadJSON(tdata, url); instead. (not sure what the url-parameter is for in this case, documentation looks really bad for this project)

edited Jul 19 '16 at 19:09

Community

1
1

answered Jan 10 '16 at 22:22

TomTasche

5,448
7
41
67

using `eventSource.loadJSON(JSON.stringify(tdata), document.location.href);` i get no errors and it is a solution in [the mailinglist](https://groups.google.com/forum/#!searchin/simile-widgets/json/simile-widgets/h-Of0_elmq0/aEuX6UWn0jMJ) but i still can's see my event. Maybe this line is right and the mistake is somewhere else? – ralfr Jan 12 '16 at 22:43
Maybe your data is malformed? Try with the official sample data. – TomTasche Jan 13 '16 at 09:25

score 0 · Answer 2 · answered Jul 05 '18 at 20:47

Not sure if anyone will see this but loadJSON() is expecting a JSON object as the first parameter, and not a string (which is what you are doing by saying JSON.stringify()). So as long as tdata is a JSON object compatible with Timeline, then all you need to do is

eventSource.loadJSON(tdata, window.location.href)

Load JSON from file vs. as variable for timeline events

2 Answers2