search

mayyangtaiwan / simile-widgets

Automatically exported from code.google.com/p/simile-widgets
0 stars 0 forks source link

TIMELINE. Manual fill of timeline #254

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago 
I guess it will trivial, but I can't see my mistake.
I try to make a form used to fill the timeline inline. 2 events (same date)
created by the fonction addEvent() are plotted in the same place, without
any gap, althought the fonction loadEvent() is OK if used outside the
fonction addEvent().

Code in the next message
Thanks for replying

[Submitted by Richard Escudé on simile.mit.edu] 

Richard Escudé - 09/Apr/08 11:23 AM
<!--include from php-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<title></title>

          <script src="http://simile.mit.edu/timeline/api/timeline-api.js"
type="text/javascript"></script>
              <script type="text/javascript">
              var tl;
              var eventSource = new Timeline.DefaultEventSource();

function onLoad() {

var theme = Timeline.ClassicTheme.create();
theme.event.label.width = 250; // px
theme.event.bubble.width = 250;
theme.event.bubble.height = 200;

var bandInfos = [
Timeline.createBandInfo({
eventSource: eventSource,
date: "Jun 28 2007 00:00:00 GMT",
         width: "70%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 100,
timeZone: -6,
                     theme: theme

})
,
Timeline.createBandInfo({
eventSource: eventSource,
         date: "Jun 28 2008 00:00:00 GMT",
width: "30%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200
})
];

bandInfos[1].syncWith = 0;
   bandInfos[1].highlight = true;

tl = Timeline.create(document.getElementById("mytimeline"), bandInfos);
Timeline.loadXML("jfk.xml", function(xml, url) { eventSource.loadXML(xml,
url); });

}

var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}

//chargement des données dans timeline
function loadEvent(label,description,startDate,endDate){

//formatage des dates
var start = new Date(startDate);
var end = new Date(endDate);

//définition de l'évènement
//start, end, latestStart, earliestEnd, instant,text, description, image,
link,icon, color, textColor.
var evt = new Timeline.DefaultEventSource.Event(

start,

end,

null,

null,

true,//instant

label,//label

description, // preview text

null,//image, // image

null,//link, // link

null, // icon

null, // color

null // text color

);

eventSource.add(evt);

onResize();//obligatoire pour l'affichage
}

//récupération des données
//fait appel à loadEvent pour rentrer ces données dans la timeline
function addEvent()
{
var taskname = document.getElementById("TaskName").value;
var taskdesc = document.getElementById("TaskDes").value;
var startdate = document.getElementById("StartDate").value;
var endDate = document.getElementById("endDate").value;

//here, it doesnt work : the 2 events are plotted in the same place
loadEvent(taskname,taskdesc,startdate,endDate);
loadEvent(taskname,taskdesc,startdate,endDate);

}

//test fonction loadEvent : OK
loadEvent('fffff','gggg',"07/17/2006","07/18/2006");
loadEvent('fffff','gggg',"07/17/2006","07/18/2006");

</script>
</head>

<!--end of include php-->
<body onload="onLoad();" onresize="onResize();">
<p>

      Task Name: <input type="text" id="TaskName" value="MyTask">
      <br>
      Task Desc:
      <textarea name="textarea" cols="20" rows="10" id="TaskDes" >MyTask
Description</textarea>
      <br>

Start Date:
<input type="text" id="StartDate" value="07/17/2006">
(mm/dd/yyyy)<br>
Start Time:
<input type="text" id="endDate" value="07/18/2007">
(mm/dd/yyyy)
<br>
      <label>
      <input type="submit" name="Submit" value="Add Task" onClick="addEvent()">
      </label>
    </p>

<div id="mytimeline" style="height: 250px; border: 1px solid #aaa"></div>
</body>

[ Show » ]
Richard Escudé - 09/Apr/08 11:23 AM <!--include from php--> <!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=UTF-8"> <title></title>           <script
src="http://simile.mit.edu/timeline/api/timeline-api.js"
type="text/javascript"></script>               <script
type="text/javascript">               var tl;               var eventSource
= new Timeline.DefaultEventSource();                             function
onLoad() { var theme = Timeline.ClassicTheme.create();
theme.event.label.width = 250; // px theme.event.bubble.width = 250;
theme.event.bubble.height = 200;                           var bandInfos =
[ Timeline.createBandInfo({ eventSource: eventSource, date: "Jun 28 2007
00:00:00 GMT",          width: "70%", intervalUnit:
Timeline.DateTime.MONTH, intervalPixels: 100, timeZone: -6,               
      theme: theme                     }) , Timeline.createBandInfo({
eventSource: eventSource,          date: "Jun 28 2008 00:00:00 GMT", width:
"30%", intervalUnit: Timeline.DateTime.YEAR, intervalPixels: 200 }) ];
bandInfos[1].syncWith = 0;    bandInfos[1].highlight = true;       tl =
Timeline.create(document.getElementById("mytimeline"), bandInfos);
Timeline.loadXML("jfk.xml", function(xml, url) { eventSource.loadXML(xml,
url); }); } var resizeTimerID = null; function onResize() { if
(resizeTimerID == null) { resizeTimerID = window.setTimeout(function() {
resizeTimerID = null; tl.layout(); }, 500); } } //chargement des données
dans timeline function loadEvent(label,description,startDate,endDate){
//formatage des dates var start = new Date(startDate); var end = new
Date(endDate); //définition de l'évènement //start, end, latestStart,
earliestEnd, instant,text, description, image, link,icon, color, textColor.
var evt = new Timeline.DefaultEventSource.Event( start, end, null, null,
true,//instant label,//label description, // preview text null,//image, //
image null,//link, // link null, // icon null, // color null // text color
); eventSource.add(evt); onResize();//obligatoire pour l'affichage }
//récupération des données //fait appel à loadEvent pour rentrer ces
données dans la timeline function addEvent() { var taskname =
document.getElementById("TaskName").value; var taskdesc =
document.getElementById("TaskDes").value; var startdate =
document.getElementById("StartDate").value; var endDate =
document.getElementById("endDate").value; //here, it doesnt work : the 2
events are plotted in the same place
loadEvent(taskname,taskdesc,startdate,endDate);
loadEvent(taskname,taskdesc,startdate,endDate); } //test fonction loadEvent
: OK loadEvent('fffff','gggg',"07/17/2006","07/18/2006");
loadEvent('fffff','gggg',"07/17/2006","07/18/2006"); </script> </head>
<!--end of include php--> <body onload="onLoad();" onresize="onResize();">
<p>              Task Name: <input type="text" id="TaskName"
value="MyTask">       <br>       Task Desc:       <textarea name="textarea"
cols="20" rows="10" id="TaskDes" >MyTask Description</textarea>       <br>
Start Date: <input type="text" id="StartDate" value="07/17/2006">
(mm/dd/yyyy)<br> Start Time: <input type="text" id="endDate"
value="07/18/2007"> (mm/dd/yyyy) <br>       <label>       <input
type="submit" name="Submit" value="Add Task" onClick="addEvent()">      
</label>     </p>     <div id="mytimeline" style="height: 250px; border:
1px solid #aaa"></div> </body>

[ Permlink | « Hide ]
Richard Escudé - 25/Apr/08 04:02 AM
It works better with the code below.
Found in http://www.ajaxlab.com/timeline/index.html# (sources.js)
Hope it can help for others.

#######################################

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<title></title>
          <script src="http://simile.mit.edu/timeline/api/timeline-api.js"
type="text/javascript"></script>
              <script type="text/javascript">
              var tl;
              var eventSource;

function onLoad() {
eventSource = new Timeline.DefaultEventSource();

var theme = Timeline.ClassicTheme.create();
theme.event.label.width = 250; // px
theme.event.bubble.width = 250;
theme.event.bubble.height = 200;

var bandInfos = [
Timeline.createBandInfo({
eventSource: eventSource,
date: "Jun 28 2007 00:00:00 GMT",
width: "70%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 100,
timeZone: -6,
theme: theme

})
,
Timeline.createBandInfo({
eventSource: eventSource,
date: "Jun 28 2008 00:00:00 GMT",
width: "30%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200
})
];

bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;

tl = Timeline.create(document.getElementById("mytimeline"), bandInfos);
Timeline.loadXML("jfk.xml", function(xml, url) { eventSource.loadXML(xml,
url); });

}

var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}

//récupération des données
//fait appel à loadEvent pour rentrer ces données dans la timeline
function addEvent() {
var taskname = document.getElementById("TaskName").value;
var taskdesc = document.getElementById("TaskDes").value;
var startdate = document.getElementById("StartDate").value;
var endDate = document.getElementById("endDate").value;

//now, it works fine : the 2 events are plotted in the same place
eventSource.LoadEvent(taskname,taskdesc,startdate,endDate);
eventSource.LoadEvent(taskname,taskdesc,startdate,endDate);

}

Timeline.DefaultEventSource.prototype.LoadEvent=
function(taskname,taskdesc,startdate,enddate)

{

var time="12:40:00";

var start = String(startdate)+" "+String(time)+ " GMT-0600";

var end = String(enddate)+" "+String(time)+ " GMT-0600";

var evt = new Timeline.DefaultEventSource.Event(

Timeline.DateTime.parseGregorianDateTime(start),

Timeline.DateTime.parseGregorianDateTime(end),

Timeline.DateTime.parseGregorianDateTime(null),

Timeline.DateTime.parseGregorianDateTime(null),

true,

taskname,

taskdesc,

"",

"",

"",

"#CC9B9B",

"#CC9B9B"

);

this._events.add(evt);

for (var i = 0; i < this._listeners.length; i++) {

            this._listeners[i].onAddMany();

        }

}

</script>
</head>

<body onload="onLoad();" onresize="onResize();">
<p>

      Task Name: <input type="text" id="TaskName" value="MyTask">
      <br>
      Task Desc:
      <textarea name="textarea" cols="20" rows="10" id="TaskDes" >MyTask
Description</textarea>
      <br>

Start Date:
<input type="text" id="StartDate" value="07/17/2006">
(mm/dd/yyyy)<br>
Start Time:
<input type="text" id="endDate" value="07/18/2007">
(mm/dd/yyyy)
<br>
      <label>
      <input type="submit" name="Submit" value="Add Task" onClick="addEvent()">
      </label>
    </p>

<div id="mytimeline" style="height: 500px; border: 1px solid #aaa"></div>
</body>
[ Show » ]
Richard Escudé - 25/Apr/08 04:02 AM It works better with the code below.
Found in http://www.ajaxlab.com/timeline/index.html# (sources.js) Hope it
can help for others. ####################################### <!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=UTF-8"> <title></title>           <script
src="http://simile.mit.edu/timeline/api/timeline-api.js"
type="text/javascript"></script>               <script
type="text/javascript">               var tl;               var
eventSource;                             function onLoad() { eventSource =
new Timeline.DefaultEventSource(); var theme =
Timeline.ClassicTheme.create(); theme.event.label.width = 250; // px
theme.event.bubble.width = 250; theme.event.bubble.height = 200; var
bandInfos = [ Timeline.createBandInfo({ eventSource: eventSource, date:
"Jun 28 2007 00:00:00 GMT", width: "70%", intervalUnit:
Timeline.DateTime.MONTH, intervalPixels: 100, timeZone: -6, theme: theme })
, Timeline.createBandInfo({ eventSource: eventSource, date: "Jun 28 2008
00:00:00 GMT", width: "30%", intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200 }) ]; bandInfos[1].syncWith = 0; bandInfos[1].highlight
= true; tl = Timeline.create(document.getElementById("mytimeline"),
bandInfos); Timeline.loadXML("jfk.xml", function(xml, url) {
eventSource.loadXML(xml, url); }); } var resizeTimerID = null; function
onResize() { if (resizeTimerID == null) { resizeTimerID =
window.setTimeout(function() { resizeTimerID = null; tl.layout(); }, 500);
} } //récupération des données //fait appel à loadEvent pour rentrer ces
données dans la timeline function addEvent() { var taskname =
document.getElementById("TaskName").value; var taskdesc =
document.getElementById("TaskDes").value; var startdate =
document.getElementById("StartDate").value; var endDate =
document.getElementById("endDate").value; //now, it works fine : the 2
events are plotted in the same place
eventSource.LoadEvent(taskname,taskdesc,startdate,endDate);
eventSource.LoadEvent(taskname,taskdesc,startdate,endDate); }
Timeline.DefaultEventSource.prototype.LoadEvent=
function(taskname,taskdesc,startdate,enddate) { var time="12:40:00"; var
start = String(startdate)+" "+String(time)+ " GMT-0600"; var end =
String(enddate)+" "+String(time)+ " GMT-0600"; var evt = new
Timeline.DefaultEventSource.Event(
Timeline.DateTime.parseGregorianDateTime(start),
Timeline.DateTime.parseGregorianDateTime(end),
Timeline.DateTime.parseGregorianDateTime(null),
Timeline.DateTime.parseGregorianDateTime(null), true, taskname, taskdesc,
"", "", "", "#CC9B9B", "#CC9B9B" ); this._events.add(evt); for (var i = 0;
i < this._listeners.length; i++) {            
this._listeners[i].onAddMany();         } } </script> </head> <body
onload="onLoad();" onresize="onResize();"> <p>              Task Name:
<input type="text" id="TaskName" value="MyTask">       <br>       Task
Desc:       <textarea name="textarea" cols="20" rows="10" id="TaskDes"
>MyTask Description</textarea>       <br> Start Date: <input type="text"
id="StartDate" value="07/17/2006"> (mm/dd/yyyy)<br> Start Time: <input
type="text" id="endDate" value="07/18/2007"> (mm/dd/yyyy) <br>      
<label>       <input type="submit" name="Submit" value="Add Task"
onClick="addEvent()">       </label>     </p>     <div id="mytimeline"
style="height: 500px; border: 1px solid #aaa"></div> </body>

Original issue reported on code.google.com by GabrielR...@googlemail.com on 14 Apr 2009 at 10:05