I need to integrate Timeline widget in a PHP framework; before display the
timeline, I need to ask user some parameters in order to get the right data
from DB.
This is the workflow I found (after many different attempts):
- 1) PHP form to ask user some parameters;
- 2) run PHP script (passing parameters above) to select required data
from database and format as JSON object:
... (get data from DB)
$json = json_encode($tl_arrdata);
return $json;
- 3) build the html page passing the JSON object in this way:
...
$html .= " tl = Timeline.create(document.getElementById('$divID'),
bandInfos);" . PHP_EOL;
$html .= " tl.loadJSON($eventSource, document.location.href);" .
PHP_EOL;
$html .= ' }' . PHP_EOL;
...
print $html;
The JSON object returned is correct (or at least that's what I suppose):
{
"dateTimeFormat": "Gregorian",
"events": [
{
"title": "Vessel Two",
"start": "Thu, 20 Mar 2014 00:00:00 +1030",
"durationEvent": true,
"end": "Sun, 23 Mar 2014 00:00:00 +1030",
"color": "#0000FF"
},
{
"title": "Vessel Two",
"start": "Mon, 20 Feb 2012 00:00:00 +1030",
"durationEvent": false,
"color": "#0000FF"
}
]
}
The resulting html page have this source:
<html> <head> <meta http-equiv="Content-Type"
content="text/html;charset=UTF-8" /> <title>nuBuilder Timeline</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
<view-source:https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js>"></script>
<script
src="http://api.simile-widgets.org/timeline/2.3.1/timeline-api.js?bundle=true
<view-source:http://api.simile-widgets.org/timeline/2.3.1/timeline-api.js?bundle=true>"
type="text/javascript"></script> <script type="text/javascript"
charset="utf-8"> var tl; function onLoad() { var eventSource =
new Timeline.DefaultEventSource(); var bandInfos = [
Timeline.createBandInfo({ eventSource: eventSource,
width: "80%", intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 100 }), Timeline.createBandInfo({
eventSource: eventSource, overview: true,
width: "20%", intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200 }) ]; bandInfos[1].syncWith =
0; bandInfos[1].highlight = true; tl =
Timeline.create(document.getElementById('tl1'), bandInfos);
tl.loadJSON({"dateTimeFormat":"Gregorian","events":[{"title":"Vessel
Two","start":"Thu, 20 Mar 2014 00:00:00 +1030","durationEvent":true,"end":"Sun,
23 Mar 2014 00:00:00 +1030","color":"#0000FF"},{"title":"Vessel
Two","start":"Mon, 20 Feb 2012 00:00:00
+1030","durationEvent":false,"color":"#0000FF"}]}, document.location.href);
} var resizeTimerID = null; function onResize() { if
(resizeTimerID == null) { resizeTimerID = window.setTimeout(function()
{ resizeTimerID = null; tl.layout(); }, 500);
} } </script> </head> <body onload="onLoad();"
onresize="onResize();"> <div id='tl1' style='height:350px; border:2px solid
#aaa;'></div> <noscript>This page uses Javascript to show you a Timeline.
Please enable Javascript in your browser to see the full page. Thank
you.</noscript> </body></html>
Timeline is displayed without events and with this message: "*Failed to
load json data from [object Object] Not Found*":
<https://lh3.googleusercontent.com/-8kTvDlsniRY/U1_mXqZ98lI/AAAAAAAAACE/OowtJL0fLEI/s1600/timeline.png>
I think problem is how to pass json object from PHP to JS/HTML; I tryed
different solutions, but I can't find a solution.
I know this is not the perfect approach: in another
post<https://groups.google.com/d/msg/simile-widgets/ICXHrhNb9Do/FmlPRXl-tpoJ> I
read that: "*The standard technique is to separate the presentation (the
html file that draws the Timeline) and the data (the data set)*.", but in
my case this is not so simple to implement.
Any suggestion will be greatly appreciated.
Thank you.
--
You received this message because you are subscribed to the Google Groups
"SIMILE Widgets" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/simile-widgets.
For more options, visit https://groups.google.com/d/optout.
