I have a timeline using Timeline.js, but currently the story is red from a .json file which to me is not the ideal situation.
I have a servlet that processes information and puts together the JSONObject, that i pass to the page that has the Timeline.js.
Timeline.jsp:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Load Example Timeline</title>
<meta name="description" content="TimelineJS example">
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div id="timeline-embed"></div>
<script type="text/javascript">
var timeline_config = {
width: '100%',
height: '600',
source: '${timeline}',
embed_id: 'timeline-embed', //OPTIONAL USE A DIFFERENT DIV ID FOR EMBED
start_at_end: false, //OPTIONAL START AT LATEST DATE
start_at_slide: '4', //OPTIONAL START AT SPECIFIC SLIDE
start_zoom_adjust: '3', //OPTIONAL TWEAK THE DEFAULT ZOOM LEVEL
hash_bookmark: true, //OPTIONAL LOCATION BAR HASHES
font: 'Bevan-PotanoSans', //OPTIONAL FONT
debug: true, //OPTIONAL DEBUG TO CONSOLE
lang: 'pt', //OPTIONAL LANGUAGE
maptype: 'watercolor', //OPTIONAL MAP STYLE
css: 'css/timeline.css', //OPTIONAL PATH TO CSS
js: 'js/timeline-min.js' //OPTIONAL PATH TO JS
}
</script>
<script type="text/javascript"
src="http://cdn.knightlab.com/libs/timeline/latest/js/storyjs-embed.js"></script>
</body>
</html>
The normal thing to have under source would be a json file. But i need to put there a JSONObject that i send from the servlet.
doGet method of the TimelineServlet.java:
@Override
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
List<LifeEvent> lifeEvents = new ArrayList<LifeEvent>();
lifeEvents.add(eventProducer.generateRandomLifeEvent(true));
JSONObject timeline = JSONString(lifeEvents);
request.setAttribute("picPath",
PropertyLoader.getStringValue("PICTURE_DIRECTORY_REL")+"/");
request.setAttribute("timeline", timeline);
getServletConfig().getServletContext()
.getRequestDispatcher("/Timeline.jsp")
.forward(request, response);
}
I know that the timeline return a well formatted storyline accordingly to the files they provide.
Here is a the generated JSONObject from the code:
{
"Timeline":{
"headline":"Your life events",
"startDate": "Tue Feb 18 10:39:10 GMT 2014",
"text":"Life events with different media types",
"date":[
{
"headline":"Another nice day",
"startDate": "Tue Feb 18 10:39:10 GMT 2014",
"text":"Another nice day",
"asset":[
{
"caption":"Rita HenriquesCarlos Barata",
"credit":"Carlos Barata",
"media":"porsche.jpg"
}
],
"endDate": "Tue Feb 18 10:39:10 GMT 2014"
}
],
"type":"default"
}
}
I got this already.
What i needed to do is:
<script type="text/javascript">
var dataObject = ${timeline};
var timeline_config = {
width: '100%',
height: '600',
source: dataObject,
embed_id: 'timeline-embed', //OPTIONAL USE A DIFFERENT DIV ID FOR EMBED
start_at_end: false, //OPTIONAL START AT LATEST DATE
start_at_slide: '0', //OPTIONAL START AT SPECIFIC SLIDE
start_zoom_adjust: '3', //OPTIONAL TWEAK THE DEFAULT ZOOM LEVEL
hash_bookmark: true, //OPTIONAL LOCATION BAR HASHES
font: 'Bevan-PotanoSans', //OPTIONAL FONT
debug: true, //OPTIONAL DEBUG TO CONSOLE
lang: 'pt', //OPTIONAL LANGUAGE
maptype: 'watercolor', //OPTIONAL MAP STYLE
css: 'css/timeline.css', //OPTIONAL PATH TO CSS
js: 'js/timeline-min.js' //OPTIONAL PATH TO JS
}
</script>