you have several errors in tour files (as from debugger) you should correct
them and
then perhaps we can go further.
in timeline.php line 101 : your multiline json string as an error
{'start': '614',
'end': '680',
'title': 'Caedmon Hymn',
'description': 'Earliest piece of literature from secondary source (Bede\'s
Historia Ecclesiastica), Caedmon was a layman at Whitby during the rule of
Abbess Hild (614-680).<br />
timeline.php:101SyntaxError: Unexpected EOF
<br />
He writes that in a dream he was inspired by an angel send from God to
compose songs, then became a monk and composed many poems.',
'textColor' : 'black'
},
om your loadJSON call the timeline_data is not in scope or doesn’t exists :
eventSource1.loadJSON(timeline_data); // The data was stored into the
timeline.php:319ReferenceError: Can't find variable: timeline_data
// timeline_data variable.
tl.layout(); // display the Timeline
}
On Sat, Dec 3, 2011 at 4:49 PM, Adastra <[email protected]> wrote:
> Thank you for your reply. I tried changing the url and loadJSON as
> well as removing the dateTimeFormat, but it's still not working.
>
> You can find the live version here:
> http://chaosworks.org/dump/timeline.php
>
> I've tried it with all events as well as just one or a few, never
> works...
>
>
> On Dec 2, 10:32 pm, Ryan Lee <[email protected]> wrote:
> > I'm not normally on the Timeline side of things, it would probably
> > reduce the barrier for people to help if you posted your file at a
> > public URL and sent it out so we could just click to review in the
> > future. One of the issues introduced by sending source is adding line
> > breaks where they'll cause issues, like in the middle of a comment or a
> > quoted string.
> >
> > With those resolved, there were two things I changed that brought your
> > Timeline to life: using your url var as the second argument in loadJSON,
> > and removing the "'dateTimeFormat': 'iso8601'," line.
> >
> > On 11/29/11 06:11 , Adastra wrote:
> >
> >
> >
> >
> >
> >
> >
> > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> > > "http://www.w3.org/TR/html4/strict.dtd";>
> > > <html xmlns="http://www.w3.org/1999/xhtml";>
> > > <head>
> > > <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
> > > <title>Medieval</title>
> >
> > > <link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/
> > > reset-fonts-grids/reset-fonts-grids.css" type="text/css">
> > > <link rel="stylesheet" type="text/css" href="http://
> > > yui.yahooapis.com/2.7.0/build/base/base-min.css">
> > > <script src="http://static.simile.mit.edu/timeline/api-2.3.0/
> > > timeline-api.js?bundle=true" type="text/javascript"></script>
> >
> > > <style type="text/css">
> > > body {
> > > font-family: Arial, Verdana, Sans-Serif;
> > > font-size: 14px;
> > > line-height: 20px;
> > > }
> > > #container {
> > > width: 900px;
> > > margin: 0 auto;
> > > }
> >
> > > #content {
> > > }
> >
> > > #content li { margin-bottom: 5px; }
> >
> > > /* timeline */
> >
> > > #doc3 {background-color: #fff8dc;}
> >
> > > #wrap1 {display: block;}
> > > #hd, #ft {margin: 2em; padding-top: 2em;}
> > > #ft {padding-bottom: 1em;}
> > > #bd div.yui-g {margin: 2em;}
> > > h1 {color: #834c24;}
> > > p {margin-top: .5em;}
> >
> > > </style>
> >
> > > </head>
> > > <body onload="onLoad();" onresize="onResize();">
> > > <div id="container">
> > > <div id="header">
> > > <h1>Timeline of Medieval Britain</h1>
> > > </div>
> >
> > > <div id="content">
> >
> > > <script language="javascript" type="text/javascript">
> > > var timeline_data = { // save as a global variable
> > > 'dateTimeFormat': 'iso8601',
> > > 'events' : [
> > > {'start': '200',
> > > 'end': '400',
> > > 'title': 'North, East & West Germanic',
> > > 'description': 'The Germanic language split up in North (Scandinavian,
> > > Old Norse), East (Gothic) and West (Low and High German).',
> > > 'textColor' : 'blue'
> >
> > > },
> >
> > > {'start': '410',
> > > 'title': 'Romans leave Britain',
> > > 'description': 'The Roman Empire crumbles...',
> > > 'color' : 'red',
> > > 'textColor' : 'orange'
> >
> > > },
> >
> > > {'start': '449',
> > > 'end': '600',
> > > 'title': 'Arrival of Germanic Tribes',
> > > 'description': 'King Vortigern summons Angles, Saxons, Jutes and
> > > Frisians to help defeat the Picts and Scots. They found the land
> > > fertile and invited more members of Germanic tribes to join them.',
> > > 'color' : 'red',
> > > 'textColor' : 'green'
> >
> > > },
> >
> > > {'start': '660',
> > > 'end': '800',
> > > 'title': 'The Golden Age',
> > > 'description': 'Golden Age of learning and education, literature
> > > (Latin) and arts. English Church scholars were renowned throughout
> > > Europe and asked to convert continental lGermanic tribes to
> > > Christianity.',
> > > 'textColor' : 'red'
> >
> > > },
> >
> > > {'start': '735',
> > > 'title': 'Bede\'s Death Song',
> > > 'description': 'Bede is reported to have composed his Death Song in
> > > his death bed and is only five lines.',
> > > 'textColor' : 'black'
> >
> > > },
> >
> > > {'start': '793',
> > > 'title': 'First Viking Attack',
> > > 'description': 'The vikings raid Lindisfarne monastery',
> > > 'color' : 'red',
> > > 'textColor' : 'green'
> >
> > > },
> >
> > > {'start': '800',
> > > 'end': '900',
> > > 'title': 'The first Viking Age',
> > > 'description': '',
> > > 'textColor' : 'green'
> >
> > > },
> >
> > > {'start': '871',
> > > 'end': '899',
> > > 'title': 'Alfred the Great',
> > > 'description': '\"The first King of England\"',
> > > 'textColor' : 'orange'
> >
> > > },
> >
> > > {'start': '878',
> > > 'title': 'King Alfred wins against Viking',
> > > 'description': 'Alfred the Great wins a decisive battle against the
> > > viking at Edington & makes a treaty',
> > > 'textColor' : 'orange'
> >
> > > },
> >
> > > {'start': '880',
> > > 'end': '900',
> > > 'title': 'King Alfred\'s Reform',
> > > 'description': 'Under the threat of Roome, King Alfred reformed the
> > > church, but the reformation didn\'t last',
> > > 'textColor' : 'red'
> >
> > > },
> >
> > > {'start': '449',
> > > 'title': 'Beginning',
> > > 'description': 'test'
> > > }
> > > ]
> > > }
> > > </script>
> > > <script language="javascript" type="text/javascript">
> > > var tl;
> > > function onLoad() {
> > > var tl_el = document.getElementById("tl");
> > > var eventSource1 = new Timeline.DefaultEventSource();
> >
> > > var theme1 = Timeline.ClassicTheme.create();
> > > theme1.autoWidth = true; // Set the Timeline's "width"
> > > automatically.
> > >
> // Set autoWidth on the Timeline's
> first band's theme,
> > >
> // will affect all bands.
> > > theme1.timeline_start = new Date(Date.UTC(100, 0, 1));
> > > theme1.timeline_stop = new Date(Date.UTC(2011, 0, 1));
> >
> > > var d = Timeline.DateTime.parseGregorianDateTime("1900")
> > > var bandInfos = [
> > > Timeline.createBandInfo({
> > > width: 45, // set
> to a minimum, autoWidth will then
> > > adjust
> > > intervalUnit:
> Timeline.DateTime.CENTURY,
> > > intervalPixels: 200,
> > > eventSource:
> eventSource1,
> > > date: d,
> > > theme: theme1,
> > > layout: 'original'
> // original, overview, detailed
> > > }),
> > > Timeline.createBandInfo({
> > > overview: true,
> > > width: "30%",
> > > eventSource: eventSource1,
> > > intervalUnit:
> Timeline.DateTime.MILLENNIUM,
> > > intervalPixels: 200
> > > })
> > > ];
> > > bandInfos[1].syncWith = 0;
> > > bandInfos[1].highlight = true;
> >
> > > // create the Timeline
> > > tl = Timeline.create(tl_el, bandInfos, Timeline.HORIZONTAL);
> >
> > > var url = '.'; // The base url for image, icon and
> background image
> > > //
> references in the data
> > > eventSource1.loadJSON(timeline_data); // The data was
> stored into
> > > the
> > >
>
> // timeline_data variable.
> > > tl.layout(); // display the Timeline
> > > }
> >
> > > var resizeTimerID = null;
> > > function onResize() {
> > > if (resizeTimerID == null) {
> > > resizeTimerID =
> window.setTimeout(function() {
> > > resizeTimerID = null;
> > > tl.layout();
> > > }, 500);
> > > }
> > > }
> >
> > > </script>
> >
> > > <div id="doc3" class="yui-t7">
> > > <div id="hd" role="banner">
> > > <h1>Local Timeline Example</h1>
> > > <p>This example reads a local data file from the disk and
> > > displays it using the Simile Timeline library. The software library is
> > > retrieved from servers via the Internet.</p>
> > > <p>The Timeline will grow automatically to fit the events. Scroll
> > > towards 2030 to see it grow. Click on an event to see its details.</p>
> > > </div>
> > > <div id="bd" role="main">
> >
> > > <div class="yui-g">
> > > <div id='tl'></div>
> > > <p>To move the Timeline: use the mouse scroll wheel, the arrow
> > > keys or grab and drag the Timeline.</p>
> > > </div>
> > > </div>
> > > <div id="ft" role="contentinfo">
> > > <p>Thanks to the <a href=''>Simile Timeline project</a> Timeline
> > > version <span id='tl_ver'></span></p>
> >
> > > <script>Timeline.writeVersion('tl_ver')</script>
> > > </div>
> > > </div>
> >
> > > </div>
> > > <div class="clear"></div>
> > > </div>
> > > </body>
> > > </html>
>
> --
> You received this message because you are subscribed to the Google Groups
> "SIMILE Widgets" group.
> To post to this group, send email to [email protected].
> To unsubscribe from this group, send email to
> [email protected].
> For more options, visit this group at
> http://groups.google.com/group/simile-widgets?hl=en.
>
>
--
You received this message because you are subscribed to the Google Groups
"SIMILE Widgets" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/simile-widgets?hl=en.
