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

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

Solution

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>