Followed the TimelineJsrails gem
github.com/NanJingBoy/timelineJS-rails
github.com/NUKnightLab/TimelineJS (for json format and other options)
Demo app at :
timelinejs-rails-example.herokuapp.com
Uncaught TypeError: Cannot call method ‘appendChild’ of null
script loaded bbut div/id is not loaded
Mismatched id caused the problem, changing the div id and embed_id to same solved problem
<script>
$(document).ready(function() {
createStoryJS({
type: 'timeline',
width: '800',
height: '600',
source: '<%= @histories %>',
embed_id: 'my-timeline'
});
});
</script>
<div id="timeline-embed"></div>
What will be in @histories, json output
Histories controller :
def index
@histories = History.all
respond_to do |format|
format.html # show.html.erb
format.json { render json: json_out = {
"timeline"=>
{
"headline"=>"The Main Timeline Headline Goes here",
"type"=>"default",
"text"=>"<p>Intro body text goes here, some HTML is ok</p>",
"asset"=> {
"media"=>"http://www.exglam.com/wp-content/uploads/2013/02/Kajal-agarwal-in-Blue-and-white-Fade-Short-with-white-Top-and-a-Blue-bow-in-hair.jpg",
"credit"=>"Credit Name Goes Here",
"caption"=>"Caption text goes here"
},
"date"=> @histories.map { |timeline| {"startDate" => timeline.startdate.strftime("%Y,%m,%d"),"endDate" => timeline.enddate.strftime("%Y,%m,%d"),"headline" => timeline.headline,"text" => timeline.content, "asset" => {"media" => timeline.media}}},
"era"=> [
{
"startDate"=>"2011,12,10",
"endDate"=>"2011,12,11",
"headline"=>"Headline Goes Here",
"text"=>"<p>Body text goes here, some HTML is OK</p>",
"tag"=>"This is Optional"
}
]
}
} }
end