Hi LDM,
The standard technique is to separate the presentation (the html file that
draws the Timeline) and the data (the data set).
The statements
tl.loadJSON("./data/myfile.js?"+ (new Date().getTime()),
function(json, url) {eventSource.loadJSON(json, url);}
)
can be confusing. Let's look at them in depth
They do the following:
1) Tells Timeline to use Ajax to load the file at url "./data/myfile.js?"+ (new
Date().getTime())
Note that the part + (new Date().getTime()) is optional. It should only be
used if your data changes. It is used to defeat caching.
The function loadJSON takes two arguments: the url, and a callback function.
2) Once the data has been retrieved, the function
function(json, url) {eventSource.loadJSON(json, url);}
is called. It's called a "call back function" since it was given as an argument
to the function (loadJSON) which later calls it.
It has two parameters (json, url) and its only statement is to call
eventSource.loadJSON(json, url);
Note that eventSource is a js variable that was created earlier. --As the
result of calling
var eventSource = new Timeline.DefaultEventSource(0);
If a variable other than eventSource was used previously, then the same var
would be used in the callback function.
To summarize, the recommendation is that the user would call
my_timeline.html
And then my_timeline.html would include a statement such as
tl.loadJSON("./data/mydatasource.php?"+ (new Date().getTime()),
function(json, url) {eventSource.loadJSON(json, url);})
Your php program, mydatasource.php, would ONLY return the json data structure.
It would be something like
<?php
// php code for reading data from the database goes here,
// and the data gets returned as the PHP var "$timeline_data"
echo $timeline_data;
?>
Hope this helps.
If, on the other hand, you want to cram everything into one php file, you can
do that. See
http://code.google.com/p/simile-widgets/wiki/Timeline_DataInTheTimelineFile
for an example of how to do that. Note that in addition to being
architecturally less elegant, it will provide a worse user experience since the
user will not see anything from the web server until the php program has
retrieved the data from the database.
But if you use the html program plus php mydatasource technique, the user will
first (quickly) see your html page with a nice "Loading" message across a
Timeline that shows dates, but not events. Then, once the data has been
retrieved, the user will see the events on the Timeline.
Regards,
Larry
________________________________
From: JadedAngel <[email protected]>
To: SIMILE Widgets <[email protected]>
Sent: Wednesday, April 1, 2009 5:48:13 PM
Subject: How to load timeline data that doesn't come from a file?
My apologies in advance if I'm posting this in the wrong place. If
that's the case, please let me know where this question should be
asked.
I'm developing an application that will read Timeline data from a
mySQL database using PHP. At the moment (just to get things working)
we're reading the data and then writing it to a temporary file (called
'myfile.js' in this example), with the data in JSON format.
The current way Timeline loads the data is through this function:
tl.loadJSON("./data/myfile.js?"+ (new Date().getTime()), function
(json, url) {
eventSource.loadJSON(json, url);
Rather than write to a file and then read it back in, we'd like to
read from the database then and insert it directly into a javascript
variable, something like:
<?php
// php code for reading data from the database goes here,
// and the data gets returned as the PHP var "$timeline_data"
?>
<script type='text/javascript'>
// printed via PHP, the data is stuffed into the javascript var 'foo'
var foo = <?php echo $timeline_data; ?>;
The problem is that I have no idea what javascript variable the data
in 'myfile.js' is supposed to end up in. What would I replace the
current data file loading lines with to insert the returned data
directly into a javascript var so that TimeLine can use it?
In other words, what Javascript variable does the data loaded through
these two lines end up in:
tl.loadJSON("./data/myfile.js?"+ (new Date().getTime()), function
(json, url) {
eventSource.loadJSON(json, url);
I thank you in advance for any help you may be able to offer.
LDM
[email protected]
(Timeline n00b)
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
