TimelineJs3 stuck at Loading, the error is the json objects passed in the initialization of the timeline

Question

I'm building my TimeLine.js and passing the json into the new object instatiation, the problem is timeline is passing dataObject.json as an Url instead of a json object. Does any anyone know what is the problem or a work around?!

<!-- 1 -->

https://timeline.knightlab.com/docs/instantiate-a-timeline.html

<link title="timeline-styles" rel="stylesheet" href="//cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">

<!-- 2 -->
<script src="//cdn.knightlab.com/libs/timeline3/latest/js/timeline.js">     </script>

var dataObject ={  
   'title':{  
      'text':{  
         'headline':'Nr Processo: 007969031',
         'text':'',

      },
      'events':[  
         {  
            "startDate":{  
               "year":"1900",
               "month":"1",
               "day":"1"
            },
            "endDate":{  
               "year":"1900",
               "month":"1",
               "day":"1"
            },
            "text":{  
               "headline":"3358254",
               "text":""
            },
            "media":{  
               "media":"<iframe id=\"iframe871\" width=\"100%\"  scrolling=\"no\" onload=\"javascript:DCP_resizeIframe();\"  frameborder=\"0\" src=\"/Acidentes/ProcessoTimeLine.aspx?EpisodioId=1\" ></iframe>",
               "credit":"",
               "caption":""
            }
         }
      ]
   }
}; 

var options ={  
   width:'100%',
   height:'1500',
   timenav_position:'top',
   language:'en',
   start_at_end:false,
   start_at_slide:0,
   initial_zoom:0
}; 

 window.timeline = new TL.Timeline('Timeline','dataObject.json',options);

Please post the link or source to the library for Timeline JS that you're using. — 11thdimension, Dec 04 '15 at 19:27

score 0 · Accepted Answer · answered Dec 06 '15 at 17:45

TimelineJS supports JSON input. See the link below.

https://timeline.knightlab.com/docs/instantiate-a-timeline.html Under Creating your own JSON
For detailed documentation https://timeline.knightlab.com/docs/json-format.html

Also sample JSON https://github.com/NUKnightLab/TimelineJS3/blob/master/website/templates/examples/houston/timeline3.json

As your JSON was not correctly formed, it wasn't working even when passed as an object.

See the working JSFiddle: http://jsfiddle.net/7k3uzp2x/

Or all in one code:

<html>
    <head>
        <link title="timeline-styles" rel="stylesheet" href="//cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">
        <script src="//cdn.knightlab.com/libs/timeline3/latest/js/timeline.js">     </script>
    </head>
<body>
    <div id="Timeline"></div>
    <script>
        var dataObject =        {  
            "title":{  
                "text":{  
                    "headline":"Nr Processo: 007969031",
                    "text":""
                }
            },
            "events":[  
                {  
                    "start_date":{  
                        "year":"1900",
                        "month":"1",
                        "day":"1"
                    },
                    "end_date":{  
                        "year":"1900",
                        "month":"1",
                        "day":"1"
                    },
                    "text":{  
                        "headline":"3358254",
                        "text":""
                    },
                    "media":{  
                        "url":"<iframe id=\"iframe871\" width=\"100%\"  scrolling=\"no\" onload=\"javascript:DCP_resizeIframe();\"  frameborder=\"0\" src=\"/Acidentes/ProcessoTimeLine.aspx?EpisodioId=1\" ></iframe>",
                        "credit":"",
                        "caption":""
                    }
                }
            ]
        }; 

        var options ={  
           width:'100%',
           height:'1500',
           timenav_position:'top',
           language:'en',
           start_at_end:false,
           start_at_slide:0,
           initial_zoom:0
        }; 

         window.timeline = new TL.Timeline('Timeline',dataObject,options);
    </script>
</div>
</body>
</html>

TimelineJs3 stuck at Loading, the error is the json objects passed in the initialization of the timeline

1 Answers1