How to load timeline data that doesn't come from a file?
90 views
Skip to first unread message
JadedAngel
Apr 1, 2009, 5:48:13 PM4/1/09
to SIMILE Widgets
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
jadeda...@yahoo.com
(Timeline n00b)
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
jadeda...@yahoo.com
(Timeline n00b)
John Callahan
Apr 1, 2009, 6:18:21 PM4/1/09
to simile-...@googlegroups.com
Could you do something like...
tl.loadJSON("myfile.php?"+ (new Date().getTime()), function(json, url) {
eventSource.loadJSON(json, url);
...and myfile.php file simply performs the query and returns the array
of data...
myfile.php would be something like...
<?php
...
$qresult = mysql_query($query) or die(mysql_error());
...
if (mysql_num_rows($qresult) > 0) {
$qstring = ...
while($row = mysql_fetch_array($qresult)){
$qstring .= ...
}
echo $qstring;
?>
I don't think you need the new Date() extension to the file call here as
the php file will be executed each time and not stored in cache
- John
**************************************************
John Callahan
Geospatial Application Developer
Delaware Geological Survey, University of Delaware
227 Academy St, Newark DE 19716-7501
Tel: (302) 831-3584
Email: john.c...@udel.edu
http://www.dgs.udel.edu
**************************************************
tl.loadJSON("myfile.php?"+ (new Date().getTime()), function(json, url) {
eventSource.loadJSON(json, url);
...and myfile.php file simply performs the query and returns the array
of data...
myfile.php would be something like...
<?php
...
$qresult = mysql_query($query) or die(mysql_error());
...
if (mysql_num_rows($qresult) > 0) {
$qstring = ...
while($row = mysql_fetch_array($qresult)){
$qstring .= ...
}
echo $qstring;
?>
I don't think you need the new Date() extension to the file call here as
the php file will be executed each time and not stored in cache
- John
**************************************************
John Callahan
Geospatial Application Developer
Delaware Geological Survey, University of Delaware
227 Academy St, Newark DE 19716-7501
Tel: (302) 831-3584
Email: john.c...@udel.edu
http://www.dgs.udel.edu
**************************************************
JadedAngel
Apr 1, 2009, 6:31:31 PM4/1/09
to SIMILE Widgets
Hmmmmmm, I'll try that and let you know what happens. It may not work
for this application as another developer is writing the database
code, but this sounds like something we *should* be able to do. I'll
definitely let you know what happens (and thank you for this idea!).
> Email: john.calla...@udel.eduhttp://www.dgs.udel.edu
> > jadedange...@yahoo.com
> > (Timeline n00b)
> Email: john.calla...@udel.eduhttp://www.dgs.udel.edu
> > jadedange...@yahoo.com
> > (Timeline n00b)
for this application as another developer is writing the database
code, but this sounds like something we *should* be able to do. I'll
definitely let you know what happens (and thank you for this idea!).
> > (Timeline n00b)
> > (Timeline n00b)
JadedAngel
Apr 1, 2009, 6:46:13 PM4/1/09
to SIMILE Widgets
Well.....I tried this (with a simple test file) and I don't think the
php file is being parsed as a php file when loaded through the
tl.loadJSON function. Dang. That would have been too easy, lol.
So, I'm still looking to find out how to load the data into some var,
essentially bypassing the tl.loadJSON function.
On Apr 1, 3:18 pm, John Callahan <john.calla...@UDel.Edu> wrote:
> Email: john.calla...@udel.eduhttp://www.dgs.udel.edu
> > jadedange...@yahoo.com
> > (Timeline n00b)
php file is being parsed as a php file when loaded through the
tl.loadJSON function. Dang. That would have been too easy, lol.
So, I'm still looking to find out how to load the data into some var,
essentially bypassing the tl.loadJSON function.
On Apr 1, 3:18 pm, John Callahan <john.calla...@UDel.Edu> wrote:
> > (Timeline n00b)
Larry Kluger
Apr 1, 2009, 6:58:54 PM4/1/09
to simile-...@googlegroups.com
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
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
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
?>
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 <jadeda...@yahoo.com>
To: SIMILE Widgets <simile-...@googlegroups.com>
Sent: Wednesday, April 1, 2009 5:48:13 PM
Subject: How to load timeline data that doesn't come from a file?
Larry Kluger
Apr 1, 2009, 7:12:45 PM4/1/09
to simile-...@googlegroups.com
Hi LDM,
What was the output of your php file?
It should ONLY be
NOTHING else.
No <html> etc.
You can find out what the response of your php file is by loading it into a browser. Or by using firebug when loading the Timeline html file.
Note:
You should change the response type of your php program to be application/json
Put the following as the VERY first line in your php file
header("Content-Type: application/json; charset=utf-8");
For example:
<?php
header("Content-Type: application/json; charset=utf-8");
... rest of your php
?>
Do NOT do this
<html>
<body>
<?php
header("Content-Type: application/json; charset=utf-8");
... rest of your php
?>
See http://us3.php.net/header
Your comment "I don't think the php file is being parsed as a php file when loaded through the tl.loadJSON function"
Why do you think this? When the Ajax function calls your server, it will run the php file (via the php interpreter) and then send the results to the client program. My guesses:
1) A problem with the php file is causing it to not work or
2) The result from the php program are not valid json.
Regards,
Larry
What was the output of your php file?
It should ONLY be
{
'wiki-url':"http://simile.mit.edu/shelf/",
'wiki-section':"Simile JFK Timeline",
'dateTimeFormat': 'Gregorian',
'events': [
{
'start':"Sat May 20 1961 00:00:00 GMT-0600",
'title':"'Bay of Pigs' Invasion",
'durationEvent':false
}, {
'start':"Wed May 01 1963 00:00:00 GMT-0600" ,
'end':"Sat Jun 01 1963 00:00:00 GMT-0600" ,
'durationEvent':true,
'title':"Oswald moves to New Orleans",
'description':"Oswald moves to New Orleans, and finds employment at the
William B. Riley Coffee Company. <i>ref. Treachery in Dallas, p 320</i>"
}, {
...
} ]
}
NOTHING else.
No <html> etc.
You can find out what the response of your php file is by loading it into a browser. Or by using firebug when loading the Timeline html file.
Note:
You should change the response type of your php program to be application/json
Put the following as the VERY first line in your php file
header("Content-Type: application/json; charset=utf-8");
For example:
<?php
header("Content-Type: application/json; charset=utf-8");
... rest of your php
?>
Do NOT do this
<html>
<body>
<?php
header("Content-Type: application/json; charset=utf-8");
... rest of your php
?>
See http://us3.php.net/header
Your comment "I don't think the php file is being parsed as a php file when loaded through the tl.loadJSON function"
Why do you think this? When the Ajax function calls your server, it will run the php file (via the php interpreter) and then send the results to the client program. My guesses:
1) A problem with the php file is causing it to not work or
2) The result from the php program are not valid json.
Regards,
Larry
Sent: Wednesday, April 1, 2009
6:46:13 PM
Subject: Re: How to load timeline data that doesn't come from a file?
Subject: Re: How to load timeline data that doesn't come from a file?
JadedAngel
Apr 1, 2009, 7:16:51 PM4/1/09
to SIMILE Widgets
Larry,
Thank you. I think the problem is that the php file used in this
statement: 'tl.loadJSON("./data/mydatasource.php" isn't actually being
parsed by the server as php. I have some test data that works when
loaded from a 'test.js' file, so I took that data and put it into
"mydatasource.php", wrapped in a php print statement. The
mydatasource.php file basically just prints out the same exact data
that's in the test.js file, or was supposed to, but I don't think that
the php file is being run as a php file when loaded via the
tl.loadJSON function....so it's not actually returning anything.
That's my guess, anyway.
If I understand you correctly (and I'm not sure I do, lol) then could
I load the js var 'eventSource' with the data returned from the php
file? In other words,
1) I run the PHP file, collect the data and format it properly in the
JSON format,
2) the data from the php call is put into a PHP var named
"$thePHPvar",
2) Write a javascript statement like: "eventSource = $thePHPvar" to
load the js variable with the data from the php variable.
Or....am I completely misunderstanding the whole shebang here?
Should this statement: tl.loadJSON("./data/mydatasource.php?"+ (new
Date().getTime()),
actually run the php file as a php file so it can do its thing,
or....?
> If, on the other hand, you want to cram everything into one php file, you can do that. Seehttp://code.google.com/p/simile-widgets/wiki/Timeline_DataInTheTimeli...
> jadedange...@yahoo.com
> (Timeline n00b)
Thank you. I think the problem is that the php file used in this
statement: 'tl.loadJSON("./data/mydatasource.php" isn't actually being
parsed by the server as php. I have some test data that works when
loaded from a 'test.js' file, so I took that data and put it into
"mydatasource.php", wrapped in a php print statement. The
mydatasource.php file basically just prints out the same exact data
that's in the test.js file, or was supposed to, but I don't think that
the php file is being run as a php file when loaded via the
tl.loadJSON function....so it's not actually returning anything.
That's my guess, anyway.
If I understand you correctly (and I'm not sure I do, lol) then could
I load the js var 'eventSource' with the data returned from the php
file? In other words,
1) I run the PHP file, collect the data and format it properly in the
JSON format,
2) the data from the php call is put into a PHP var named
"$thePHPvar",
2) Write a javascript statement like: "eventSource = $thePHPvar" to
load the js variable with the data from the php variable.
Or....am I completely misunderstanding the whole shebang here?
Should this statement: tl.loadJSON("./data/mydatasource.php?"+ (new
Date().getTime()),
actually run the php file as a php file so it can do its thing,
or....?
> 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 <jadedange...@yahoo.com>
>
> 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
>
> ________________________________
> (Timeline n00b)
JadedAngel
Apr 1, 2009, 7:18:47 PM4/1/09
to SIMILE Widgets
Ahhh, I replied too fast. Arg. Okay, let me work on this a bit and see
what I can do. The data output from the php file is only the JSON
data, correctly formatted, no HTML, no <body> tags, nothing like that.
what I can do. The data output from the php file is only the JSON
data, correctly formatted, no HTML, no <body> tags, nothing like that.
JadedAngel
Apr 1, 2009, 8:22:08 PM4/1/09
to SIMILE Widgets
Well, I did indeed get it working, and I thank all of you for your
assistance. I'm sure I'll have some additional question later (mostly
about formatting the look and feel) but this'll give me something to
chew on for a while. Thanks again for all your help.
assistance. I'm sure I'll have some additional question later (mostly
about formatting the look and feel) but this'll give me something to
chew on for a while. Thanks again for all your help.
John Callahan
Apr 1, 2009, 11:23:18 PM4/1/09
to simile-...@googlegroups.com
Great. Glad you got it working.
Would you mind posting your PHP code on the wiki? Maybe even your table
schema (although that might not be necessary.) I can help (or post it
for you) if you like.
I would like to document how to get data from PHP/MySQL to input data
streams for Timeline, Exhibit, and Timeplot.
- John
**************************************************
John Callahan
Geospatial Application Developer
Delaware Geological Survey, University of Delaware
227 Academy St, Newark DE 19716-7501
Tel: (302) 831-3584
Would you mind posting your PHP code on the wiki? Maybe even your table
schema (although that might not be necessary.) I can help (or post it
for you) if you like.
I would like to document how to get data from PHP/MySQL to input data
streams for Timeline, Exhibit, and Timeplot.
- John
**************************************************
John Callahan
Geospatial Application Developer
Delaware Geological Survey, University of Delaware
227 Academy St, Newark DE 19716-7501
Tel: (302) 831-3584
Email: john.c...@udel.edu
http://www.dgs.udel.edu
**************************************************
JadedAngel wrote:
http://www.dgs.udel.edu
**************************************************
JadedAngel wrote:
Jorge
Apr 2, 2009, 4:46:20 AM4/2/09
to SIMILE Widgets
Hi,
I think I can help on this, because that´s what I´m doing for a long
time.
I think the best way is to so something like this in your timeline
main file (which off course should be .php instead of .html)
......
include_once(json_functions.php);
.......
.....var bandInfos = [
Timeline.createBandInfo({......
.....
var JsonTimeline = <?php echo getJsonData(); ?>;
eventSource.loadJSON(JsonTimeline,document.location.href);
.....etc
and then in your json_functions.php
......
/*build your json data here */
function getJsonData(){
return 'dateTimeFormat": "iso8601",
"events":[
{ "start": "2009-03-10T06:00:00+00:00",
"end": "2009-03-31T22:00:00+00:00",
"instant": false,
"title": "1",
"color": "#7FFFD4",
"textColor": "#000000",
"caption": "1",
"trackNum": 1,
"classname": "special_event2 aquamarine",
"description": "bar 1"},
{"start": "2009-03-10T08:00:00+00:00",
"end": "2009-03-17T20:00:00+00:00",
"instant": false,
"title": "1.1",
"color": "#7FFFD4",
"textColor": "#000000",
"trackNum": 2,
"description": "bar 1.1"}
]'
}
....
If you change the contents of getJsonData() to pull the data from a
Mysql, you have your problem solved.
Hope it helped.
Jorge
I think I can help on this, because that´s what I´m doing for a long
time.
I think the best way is to so something like this in your timeline
main file (which off course should be .php instead of .html)
......
include_once(json_functions.php);
.......
.....var bandInfos = [
Timeline.createBandInfo({......
.....
var JsonTimeline = <?php echo getJsonData(); ?>;
eventSource.loadJSON(JsonTimeline,document.location.href);
.....etc
and then in your json_functions.php
......
/*build your json data here */
function getJsonData(){
return 'dateTimeFormat": "iso8601",
"events":[
{ "start": "2009-03-10T06:00:00+00:00",
"end": "2009-03-31T22:00:00+00:00",
"instant": false,
"title": "1",
"color": "#7FFFD4",
"textColor": "#000000",
"caption": "1",
"trackNum": 1,
"classname": "special_event2 aquamarine",
"description": "bar 1"},
{"start": "2009-03-10T08:00:00+00:00",
"end": "2009-03-17T20:00:00+00:00",
"instant": false,
"title": "1.1",
"color": "#7FFFD4",
"textColor": "#000000",
"trackNum": 2,
"description": "bar 1.1"}
]'
}
....
If you change the contents of getJsonData() to pull the data from a
Mysql, you have your problem solved.
Hope it helped.
Jorge
JadedAngel
Apr 2, 2009, 12:41:00 PM4/2/09
to SIMILE Widgets
> Would you mind posting your PHP code on the wiki? Maybe even your table
> schema (although that might not be necessary.) I can help (or post it
> for you) if you like.
>
> I would like to document how to get data from PHP/MySQL to input data
> streams for Timeline, Exhibit, and Timeplot.
I'm not sure how much sense this code will make to folks, but here's
> schema (although that might not be necessary.) I can help (or post it
> for you) if you like.
>
> I would like to document how to get data from PHP/MySQL to input data
> streams for Timeline, Exhibit, and Timeplot.
one of the key functions we're using. Some of this is hardcoded at the
moment- it's still in flux and changing daily, but I think this will
give people a starting point.
function jsonize($events) {
$data = array();
foreach ($events as $event) {
$d = array();
foreach ($event as $key => $val) {
array_push($d, sprintf("'%s' : '%s'", $key, $val));
}
array_push($data,"\n{" . implode(',', $d) . "}\n");
}
$rtn = sprintf("%s",implode(',',$data));
return $rtn;
}
function get_events() {
$rtn = <<<EOT
{
'dateTimeFormat' : 'iso8601'
, 'wikiURL' : 'http://simile.mit.edu/shelf'
, 'wikiSection': "Simile Cubism Timeline"
, 'events' : [
EOT;
$rtn .= $this->jsonize($this->events);
$rtn .= <<<EOT
]
}
EOT;
return $rtn;
}
Reply all
Reply to author
Forward
0 new messages