So I have a timeline running, but I am having an issue around the display
of the dates and projects on the timeline
As you can see in the image, on the time line the project is being
displayed as having a start date of Sat, 30 Mar 2017 14:00:00 GMT and as a
result is appearing in the 30 Mar column
But in the code it is showing
<event start="31 MAR 2017 00:00:00 GMT+10" isDuration="false" title="# 2400
E2E: PPS: Consumer Mobility Plan
Rationalisation"
link="f?p=311:800:::NO::P800_GTM_ID,P800_RETURN_PAGE:P.012488,80" color=""
textColor="#000000">
<br>This initiative will establish a re-useable bulk migration tool to
perform exits and migrations to support the ongoing lifecycle management of
plans and offers.<br><br>
</event>
31 March is the correct date of the project.
The issue is occurring to all projects on the timeline
I am using the timeline within an ApEx page, and the package we have
created to power the creation of the timeline looks like the attached
--
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 simile-widgets+unsubscr...@googlegroups.com.
To post to this group, send email to simile-widgets@googlegroups.com.
Visit this group at https://groups.google.com/group/simile-widgets.
For more options, visit https://groups.google.com/d/optout.
create or replace PACKAGE BODY example AS
procedure GenTimelineJavascript as
v_str varchar2(4000);
begin
v_str := '<script>
var tl;
function onLoad() {
var eventSource = new Timeline.DefaultEventSource();
var bandInfos = [
Timeline.createBandInfo({
eventSource: eventSource,
date: "'||to_char(sysdate, 'dd mon yyyy hh24:mi:ss')||' GMT+10",
width: "90%",
intervalUnit: Timeline.DateTime.DAY,
intervalPixels: 100
}),
Timeline.createBandInfo({
overview: true,
eventSource: eventSource,
date: "'||to_char(sysdate, 'dd mon yyyy hh24:mi:ss')||' GMT+10",
width: "10%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 100
}),
];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
Timeline.loadXML("'||v('AV_APP_URL')||'f?p=311:80:'||v('SESSION')||':APPLICATION_PROCESS=GenerateTimelineXML",
function(xml, url) { eventSource.loadXML(xml, url); });
}
var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}
</script>';
htp.p(v_str);
end GenTimelineJavascript;
-- -------------------------------------------------------------------------- --
procedure GenTimeLineXML as
/* THIS SMILE API info
Basic Event Attributes
¿ start - in full date format (e.g. "May 20 1961 00:00:00 GMT-0600"). See
next section for alternative formats.
E.G ||to_char(sysdate, 'dd mon yyyy hh24:mi:ss')||' GMT+10'||
¿ latestStart - for imprecise beginnings - same date format as start.
Only used by duration events (see more).
¿ earliestEnd - for imprecise ends - same date format as start. Only used
by duration events (see more).
¿ end - same date format as start.
¿ durationEvent - XML and SPARQL: "true" or "false". JSON: true or false.
Only applies to events with start/end times.
o true -- the event occurs over a time duration. No icon.
The event will be drawn as a dark blue tape.
The tape color is set with the color attribute. Default color is
#58A0DC
o false -- the event is focused on a specific "instant" (shown with the
icon).
The event will be drawn as a blue dot icon (default) with a pale
blue tape.
The tape is the default color (or color attribute color), with
opacity set to 20.
To change the opacity, change the theme's instant:
{impreciseOpacity: 20} value. Maximum 100.
¿ title - text title that goes next to the tape in the Timeline. Also
shown in the bubble. The title attribute is optional. Leave it out if you want
just an icon or icon and tape. The description will be shown in the bubble when
the icon or tape is clicked.
Additional Event Attributes
¿ icon - url. This image will appear next to the title text in the
timeline if (no end date) or (durationEvent = false).
If a start and end date are supplied, and durationEvent is true, the icon is
not shown. If icon attribute is not set, a default icon from the theme is used.
¿ image - url to an image that will be displayed in the bubble
¿ link - url. The bubble's title text will be a hyper-link to this
address.
¿ color - color of the text and tape (duration events) to display in the
timeline.
If the event has durationEvent = false, then the bar's opacity will be
applied (default 20%). See durationEvent, above.
¿ textColor - color of the label text on the timeline. If not set, then
the color attribute will be used.
¿ tapeImage and tapeRepeat Sets the background image and repeat style for
the event's tape (or 'bar') on the Timeline.
Overrides the color setting for the tape. Repeat style should be one of
{repeat | repeat-x | repeat-y}, repeat is the default.
See the Cubism example for a demonstration. Only applies to duration events.
¿ caption - additional event information shown when mouse is hovered over
the Timeline tape or label.
Uses the html title property. Looks like a tooltip. Plain text only. See the
cubism example.
¿ classname - added to the HTML classnames for the event's label and tape
divs.
Eg classname attribute 'hot_event' will result in div classes of
'timeline-event-label hot_event' and 'timeline-event-tape hot_event' for the
event's Timeline label and tape, respectively.
¿ description - will be displayed inside the bubble with the event's
title and image.
o XML Format: the description is stored as the text content of the event
element (see below).
Nota Bene: the XML standard requires that an element's text content must be
escaped/formatted HTML.
o JSON Format: the description key of the event hash
*/
v_xml varchar2(4000);
v_cnt number := 0;
c_event_start constant varchar2(20) := chr(10)||' <event ';
c_event_newline constant varchar2(20) := chr(10)||' ';
c_event_end constant varchar2(20) := chr(10)||' </event>';
begin
FOR C1 in ( select
GTM_ID AS "PROJ_ID"
,htf.escape_sc(NAME) "PROJ_NAME_PREF"
,case when REQUESTED_DATE is not null and CAMPAIGN_END is not
null then
case when (PROMO_TYPE !=5 OR PROMO_TYPE is NULL) then
'false'
else 'true' end
else 'no_dates' end "DURATION"
,to_char(REQUESTED_DATE, 'DD MON YYYY hh24:mi:ss')||' GMT+10'
"PROJ_START_DATE"
,to_char(CAMPAIGN_END, 'DD MON YYYY hh24:mi:ss')||' GMT+10'
"PROJ_END_DATE"
,htf.escape_sc('<br>'||CRP_EXEC_SUM||'<br>'||'<br>') "PROJ_DESC"
,CASE
WHEN PROMO_TYPE = 6 THEN '#3CB371'
WHEN PROMO_TYPE = 5 THEN '#FF0000'
WHEN PORTFOLIO_SUB = 141 then '#FF1493'
WHEN PORTFOLIO_SUB = 462 then '#BDB76B'
WHEN PORTFOLIO_SUB = 461 then '#C0C0C0'
WHEN STATUS like 'Scope%' then '#6A5ACD'
WHEN STATUS like 'Rapid%' then '#7CFC00'
WHEN STATUS like 'Pending%' then '#BA55D3'
WHEN STATUS like 'Change%' then '#ADD8E6'
ELSE null END "PROJ_TYPE_COLOUR"
,htf.escape_sc(STATUS) "STATUS_NAME"
,'f?p=311:800:::NO::P800_GTM_ID,P800_RETURN_PAGE:' || GTM_ID ||
',80' "LINK"
from GTM_INITIATIVES
where STATUS NOT IN ('Cancelled', 'Held', 'Hold', 'Rapid')
--where rownum < 10
)
LOOP
if v_cnt = 0 then
/* WRITE DOC HEADER -- Thanks Dean Hullman :) */
owa_util.mime_header('text/xml', FALSE );
htp.p('Cache-Control: no-cache');
htp.p('Pragma: no-cache');
owa_util.http_header_close;
/* Start XML */
htp.p('<data> ');
end if;
/* Write out each event */
if c1.duration = 'no_dates' then null; -- If it doesnt have dates
dont do anything
elsif c1.duration = 'true' then -- has a duration
v_xml := c_event_start
||c_event_newline||'start="'||c1.PROJ_START_DATE||'"'
||c_event_newline||'end="'||c1.PROJ_END_DATE||'"'
||c_event_newline||'isDuration="true"'
||c_event_newline||'title="'||c1.PROJ_NAME_PREF||'"'
||c_event_newline||'link="'||c1.LINK||'"'
||c_event_newline||'color="'||c1.PROJ_TYPE_COLOUR||'"'
||c_event_newline||'textColor="#000000"'
||c_event_newline||'>'
||c_event_newline||c1.PROJ_DESC
||c_event_end;
elsif c1.duration = 'false' then -- single day event
v_xml := c_event_start
||c_event_newline||'start="'||c1.PROJ_START_DATE||'"'
||c_event_newline||'isDuration="false"'
||c_event_newline||'title="'||c1.PROJ_NAME_PREF||'"'
||c_event_newline||'link="'||c1.LINK||'"'
||c_event_newline||'color="'||c1.PROJ_TYPE_COLOUR||'"'
||c_event_newline||'textColor="#000000"'
||c_event_newline||'>'
||c_event_newline||c1.PROJ_DESC
||c_event_end;
end if;
/*END IF;*/
htp.p(v_xml);
v_xml := null;
v_cnt := v_cnt + 1;
END LOOP;
/* end XML */
htp.p('</data>');
end GenTimeLineXML;
-- -------------------------------------------------------------------------- --
end example;
