Introducing chronoline.js, a JavaScript library for timelines

wow thanks for the prompt reply 🙂 if I enter June – if i set an event as – 2012, 7, 24 – it shows in browser as August not July

http://shinkindesign.com/360judo/chronoline.html

I doubt Colin is still following but for others…
>> to begin at the current date [php]
$now = mktime(….) – (44*24*60*60);
this is 1 month to adjust for array[0] and a 1/2 month so as to center

defaultStartDate (… echo date(“Y, n, j”, $now);)

I emailed you.

to your Q. above – I will need to go back to earlier setup to see what worked.

1. defaultStartDate: new Date(Date.now()-11e8),
Sorry, can’t get it.
() -(Chronoline.defaults.visibleSpan)/2),
My js is generally a struggle :o)
2. toBack – yes, works for me but the line is lost when using sections.
5. I generally write tight code – as in few line breaks, concatenation when possible – assuming it is faster. I have never tested this assumption 🙂

Hi, I wonder if you could help me with a problem, to explore a database, I can not show all results in a single Chronoline graph, with the code that I have now I can only show the last date of the query. add the code that I use to know if there is any solution. Hope your answer.

$(document).ready(function(){

var ini=new Date();

anio= ini.getFullYear() + ‘,’ + ini.getMonth() + ‘,’ + ini.getDate();
var events = [
{dates: [new Date(anio)], title: “””},

];

//Propiedades de la linea de tiempo
var timeline1 = new Chronoline(document.getElementById(“target1”), events,
{animated: true,
tooltips: true,
defaultStartDate: new Date(2014, 0, 1),
//sections: sections,
sectionLabelAttrs: {‘fill’: ‘#997e3d’, ‘font-weight’: ‘bold’},
scrollLeft: prevMonth,
scrollRight: nextMonth,
markToday: ‘labelBox’,
draggable: true
});
});

Hey Kevin, thanks for the great product! I’m not sure if you’re still following (this post is 3 years old 😛 )

I did, on my own, figure out a way to add additional events from UI without reloading the entire timeline (I think). However, there are certain event placement issues on the timeline. For example, subsequent addition of events from UI make them appear on the timeline at increasing heights, even if there’s no event previously on that date.

Basically, I introduced a function “drawEvent” which takes an event as an input and adds it into to event array and draws it. Fundamentally, I just copy pasted the relevant code into “drawEvent” with minor modifications to avoid redrawing the entire timeline:

function drawEvent(newevent){

//************************************************************************
// need to toss the time variance bits
for(var i = 0; i < events.length; i++){
for(var j = 0; j < events[i].dates.length; j++){
events[i].dates[j] = new Date(events[i].dates[j].getTime());
events[i].dates[j].stripTime();
}
}
t.events = events;
t.events.sort(t.sortEvents);

for(var i = 0; i < t.events.length; i++){
var found = false;
if(events[i] == newevent)
{
var startPx = t.msToPx(t.events[i].dates[0].getTime()) – t.circleRadius;
console.log("Current i-event = "+events[i].title);
for(var j = 0; j < t.eventRows.length; j++){

console.log("for j = "+j+", t.rowLastPxs[j] = "+t.rowLastPxs[j]+" & startPx = "+startPx);
if(t.rowLastPxs[j] < startPx){
t.eventRows[j].push(t.events[i]);
console.log("Pushed "+i+" "+events[i].title);
t.rowLastPxs[j] = t.msToPx(getEndDate(t.events[i].dates).getTime()) + t.circleRadius;
found = true;
break;
}
}
if(!found){
t.eventRows.push([t.events[i]]);
console.log("Pushed2 "+i+" "+events[i].title);
t.rowLastPxs.push(t.msToPx(getEndDate(t.events[i].dates).getTime()) + t.circleRadius);
}
}
}

for(var row = 0; row < t.eventRows.length; row++){
var upperY = t.totalHeight – t.dateLabelHeight – (row + 1) * (t.eventMargin + t.eventHeight);
for(var col = 0; col < t.eventRows[row].length; col++){
var myEvent = t.eventRows[row][col];
if(myEvent == newevent)
{
var startX = (myEvent.dates[0].getTime() – t.startTime) * t.pxRatio;
console.log("startX = "+startX);
var elem = null;
if(myEvent.dates.length == 1){ // it's a single point
elem = t.paper.circle(startX, upperY + t.circleRadius, t.circleRadius).attr(t.eventAttrs);
}
else { // it's a range
var width = (getEndDate(myEvent.dates) – myEvent.dates[0]) * t.pxRatio;
// left rounded corner
var leftCircle = t.paper.circle(startX, upperY + t.circleRadius, t.circleRadius).attr(t.eventAttrs);
if(typeof myEvent.attrs != "undefined"){
leftCircle.attr(myEvent.attrs);
}
addElemClass(t.paperType, leftCircle.node, 'chronoline-event');
// right rounded corner
var rightCircle = t.paper.circle(startX + width, upperY + t.circleRadius, t.circleRadius).attr(t.eventAttrs);
if(typeof myEvent.attrs != "undefined"){
rightCircle.attr(myEvent.attrs);
}
addElemClass(t.paperType, rightCircle.node, 'chronoline-event');
elem = t.paper.rect(startX, upperY, width, t.eventHeight).attr(t.eventAttrs);
}

if(typeof myEvent.link != 'undefined') {
elem.data('link', myEvent.link);
elem.click(function(){
window.location.href = this.data('link');
});
}

if(typeof myEvent.attrs != "undefined"){
elem.attr(myEvent.attrs);
}
addElemClass(t.paperType, elem.node, 'chronoline-event');

elem.attr('title', myEvent.title);
if(t.tooltips){
var description = myEvent.description;
var title = myEvent.title;
if(typeof description == "undefined" || description === ''){
description = title;
title = '';
}
var $node = jQuery(elem.node);
if(Raphael.type == 'SVG')
$node = $node.parent();
$node.qtip({
content: {
title: title,
text: description
},
position: {
my: 'top left',
target: 'mouse',
viewport: jQuery(window), // Keep it on-screen at all times if possible
adjust: {
x: 10, y: 10
}
},
hide: {
fixed: true // Helps to prevent the tooltip from hiding ocassionally when tracking!
},
style: {
classes: 'qtip-shadow qtip-dark qtip-rounded'
}
});
}
if(t.sections !== null && t.sectionLabelsOnHover){
// some magic here to tie the event back to the section label element
var originalIndex = myEvent.section;
if(typeof originalIndex != "undefined"){
var newIndex = 0;
for(var i = 0; i < t.sections.length; i++){
if(t.sections[i].section == originalIndex){
elem.data('sectionLabel', t.sectionLabelSet[i]);
break;
}
}
elem.hover(function(){this.data('sectionLabel').animate({opacity: 1}, 200);},
function(){this.data('sectionLabel').animate({opacity: 0}, 200);});
}
}
}
}
}

Thanks for your help!