PDA

View Full Version : Complex Progress Bar design in JavaScript. Need Help



teamnirvana
12-15-2008, 10:02 AM
Hi, I got a requirement in my academic project where I have to display a progress bar based on dates. The summary of the requirement is:

1. Need to display a progrss bar which displays timeline in between dates.

Sounds simple, but is not, for me.

2. What we have been provided is some date values like,
a. Product Purchase date
b. Product Expiry date
c. Current date
d. Warranty start date(this is same as product expiry date)
e. Warranty expiry date.

3. The bar should look like the image provided in the attachment.
4. The blue vertical bar in the image is the current date.
5. The gray field is the time line which has remained emptily in the
length of the progress bar.
6. The length of the progress bar is 10 cms.
7. The colors are to be reconfigured at will, so here comes the CSS again.

I realise this is way complex, but found no other option but to request for help from professional designers.

can anyone help Me? Thanks in advance and Thanks a lot.

teamnirvana
12-15-2008, 11:52 AM
Any help is appreciated!!! Thanks.

vwphillips
12-15-2008, 02:49 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Time Bar (15-December-2008) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk/

// Todays bar is not quite right but will look at that

function zxcTimeBar(){
var zxcargs=zxcTimeBar.arguments;
var zxcp=document.getElementById(zxcargs[0]);
var zxcd=zxcp.getElementsByTagName('DIV')[0];
var zxcary=[];
for (var zxc0=1;zxc0<zxcargs.length;zxc0++){
var zxcs=zxcargs[zxc0].split(/\W+/g);
zxcary[zxc0-1]=[new Date(zxcs[0],zxcs[1],zxcs[2],0,0,0,0)];
zxcary[zxc0-1][1]=(zxcary[zxc0-1][0].getTime()-zxcary[0][0].getTime())/1000/60/60/24;
zxcary[zxc0-1][2]=zxcs;
}
var zxcday=(zxcSVInt(zxcd,'width')*.9)/zxcary[zxc0-2][1];
var zxcnow=(new Date()-zxcary[0][0])/1000/60/60/24
var zxch=zxcSVInt(zxcd,'height'),zxct=zxcSVInt(zxcd,'top'),zxcl=zxcSVInt(zxcd,'left');
zxcES('DIV',{position:'absolute',zIndex:'1',left:zxcl+zxcnow*zxcday+'px',top:zxct-zxch+'px',height:zxch*2+'px',width:'200px',fontSize:'10px',borderLeft:'solid #FF0000 1px'},zxcp);
zxcES('DIV',{position:'absolute',zIndex:'1',left:zxcl+'px',top:zxct-zxch+'px',height:zxch*2+'px',width:'200px',fontSize:'10px',borderLeft:'solid #000000 1px'},zxcp,zxcary[0][2][1]+'-'+zxcary[0][2][2]+'-'+zxcary[0][2][0]);
var zxccolors=['red','green','blue'];
for (var zxccnt=0,zxc1=1;zxc1<zxcary.length;zxc1++){
zxcES('DIV',{position:'absolute',zIndex:101-zxc1+'',left:zxcl+zxcary[zxc1][1]*zxcday+'px',top:zxct-zxch+'px',height:zxch+20+'px',fontSize:'10px',borderLeft:'solid #000000 1px'},zxcp,zxcary[zxc1][2][1]+'-'+zxcary[zxc1][2][2]+'-'+zxcary[zxc1][2][0]);
zxcES('DIV',{position:'absolute',zIndex:101-zxc1+'',left:'0px',top:'0px',width:zxcary[zxc1][1]*zxcday+'px',height:zxch+'px',backgroundColor:zxccolors[(zxc1-1)%zxccolors.length]},zxcd);
}
}

function zxcSVInt(zxcobj,zxcp){
if (zxcobj.currentStyle) return parseInt(zxcobj.currentStyle[zxcp.replace(/-/g,'')]);
return parseInt(document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase()));
}

function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string') zxcele=document.createElement(zxcele);
for (key in zxcstyle) zxcele.style[key]=zxcstyle[key];
if (zxcp) zxcp.appendChild(zxcele);
if (zxctxt) zxcele.appendChild(document.createTextNode(zxctxt));
return zxcele;
}


/*]]>*/
</script></head>

<body onload="zxcTimeBar('tst','2005/04/10','2006/04/10','2009/04/10');" >
2. What we have been provided is some date values like,<br />
a. Product Purchase date(10-04-2005)<br />
b. Product Expiry date(10-04-2006)<br />
c. Current date<br />
d. Warranty start date(this is same as product expiry date)<br />
e. Warranty expiry date(10-04-2009).<br />
http://www.dynamicdrive.com/forums/showthread.php?t=39743<br />
<br />
Todays bar is not quite right but will look at that

<br />
<div id="tst" style="position:relative;width:340px;height:50px;background-Color:#FFFFCC;border:solid black 1px;" >
<div style="position:relative;overflow:hidden;left:20px;top:25px;width:300px;height:20px;background-Color:#FFCC66;border:solid black 1px;" >
</div>
</div>

</body>
</html>

vwphillips
12-15-2008, 06:11 PM
tidied the code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.txt {
top:5px;width:55px;height:20px;font-Size:10px;text-Align:center;border-Left:solid #000000 1px;
}

.line {
top:5px;height:40px;border-Left:solid #000000 1px;
}

.today {
top:5px;width:1px;height:40px;background-Color:#339900;
}
/*]]>*/
</style>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Time Bar (15-December-2008) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk/

// ** Initialised by an event call to function
// zxcTimeBar('tst',['green','red','blue'],'today','line','txt',false,['2005/04/10','2006/04/10','2009/04/10']);
// where:
// parameter 0 = the unique id name of the parent DIV. (string)
// parameter 1 = an array defining the colors of the bars. (array)
// parameter 2 = the class name of the 'today' line. (string)
// parameter 3 = the class name of the 'standard' line. (string)
// parameter 4 = the class name of the text. (string)
// parameter 5 = the date format, true = mm/dd/yyy, false = dd/mm/yyyy. (boolean)
// parameter 6 = an array defining bar dates(format yyyy/mm/dd). (array)
// parameter 7 = (optional) the maximum width of the bars. (dights, default = the width or the bars parent node)


// ** Functional Code(2.35K) - NO NEED TO CHANGE

function zxcTimeBar(){
var zxcargs=zxcTimeBar.arguments;
var zxcp=document.getElementById(zxcargs[0]);
var zxcd=zxcp.getElementsByTagName('DIV')[0];
var zxcary=[];
for (var zxc0=0;zxc0<zxcargs[1].length;zxc0++){
var zxcs=zxcargs[1][zxc0].split(/\W+/g);
zxcary[zxc0]=[new Date(zxcs[0],zxcs[1]-1,zxcs[2],0,0,0,0)];
zxcary[zxc0][1]=(zxcary[zxc0][0].getTime()-zxcary[0][0].getTime())/1000/60/60/24;
zxcary[zxc0][2]=zxcs;
}
var zxcsep=zxcargs[1][0].replace(/\w/g,''); ;
zxcsep=zxcsep.substring(0,Math.ceil(zxcsep.length/2))||'/';
var zxcdw=(zxcargs[7]?zxcargs[7]:zxcSVInt(zxcd,'width'))/zxcary[zxc0-1][1];
var zxch=zxcSVInt(zxcd,'height'),zxct=zxcSVInt(zxcd,'top'),zxcl=zxcSVInt(zxcd,'left');
var zxctoday=zxcES('DIV',{position:'absolute',zIndex:'2',left:zxcl+((new Date()-zxcary[0][0])/1000/60/60/24)*zxcdw+'px'},zxcp);
zxctoday.className=zxcargs[3];
var zxcline=zxcES('DIV',{position:'absolute',zIndex:'1',left:zxcl+'px',width:'200px',fontSize:'10px'},zxcp);
zxcline.className=zxcargs[4];
var zxctxt=zxcES('DIV',{position:'absolute',zIndex:'1',left:zxcl+'px'},zxcp,zxcary[0][2][zxcargs[6]?1:2]+zxcsep+zxcary[0][2][zxcargs[6]?2:1]+zxcsep+zxcary[0][2][0]);
zxctxt.className=zxcargs[5];
var zxccolors=['red','green','blue'];
for (var zxccnt=0,zxc1=1;zxc1<zxcary.length;zxc1++){
zxcES(zxcline.cloneNode(false),{zIndex:101-zxc1+'',left:zxcl+zxcary[zxc1][1]*zxcdw+'px'},zxcp);
zxctxt=zxcES(zxctxt.cloneNode(false),{zIndex:101-zxc1+'',left:zxcl+zxcary[zxc1][1]*zxcdw+'px'},zxcp,zxcary[zxc1][2][zxcargs[6]?1:2]+zxcsep+zxcary[zxc1][2][zxcargs[6]?2:1]+zxcsep+zxcary[zxc1][2][0]);
zxcES('DIV',{position:'absolute',zIndex:101-zxc1+'',left:'0px',top:'0px',width:zxcary[zxc1][1]*zxcdw+'px',height:zxch+'px',backgroundColor:zxcargs[2][(zxc1-1)%zxcargs[2].length]},zxcd);
}
}

function zxcSVInt(zxcobj,zxcp){
if (zxcobj.currentStyle) return parseInt(zxcobj.currentStyle[zxcp.replace(/-/g,'')]);
return parseInt(document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase()));
}

function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string') zxcele=document.createElement(zxcele);
for (key in zxcstyle) zxcele.style[key]=zxcstyle[key];
if (zxcp) zxcp.appendChild(zxcele);
if (zxctxt) zxcele.appendChild(document.createTextNode(zxctxt));
return zxcele;
}


/*]]>*/
</script></head>

<body onload="zxcTimeBar('tst',['2005/04/10','2006/04/10','2009/04/10'],['green','red','blue'],'today','line','txt',false,290);" >
2. What we have been provided is some date values like,<br />
a. Product Purchase date(10-04-2005)<br />
b. Product Expiry date(10-04-2006)<br />
c. Current date<br />
d. Warranty start date(this is same as product expiry date)<br />
e. Warranty expiry date(10-04-2009).<br />
http://www.dynamicdrive.com/forums/showthread.php?t=39743<br />
<br />

<br />
<div id="tst" style="position:relative;width:340px;height:50px;background-Color:#FFFFCC;border:solid black 1px;" >
<div style="position:relative;overflow:hidden;left:20px;top:25px;width:300px;height:20px;background-Color:#FFCC66;border:solid black 1px;" >
the bars parent node
</div>
</div>

</body>
</html>

teamnirvana
12-16-2008, 10:39 AM
This is awesome Phillips. So fast and so neat. It works like a charm.

Can you also look at the today parameter, if possible?

That would be a great help to this JavaScript novice.

Thanks a lot.

vwphillips
12-16-2008, 01:30 PM
Can you also look at the today parameter, if possible?

there was a silly error in the first code, fixed in the second

latest code with more features


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.bartitle {
left:10px;top:24px;color:#000000;font-Size:18px;
}

.bartxt {
position:relative;top:2px;width:55px;height:15px;color:#ffffff;font-Size:12px;text-Align:center;
}

.line {
top:22px;height:24px;border-Left:solid #000000 1px;
}

.linetxt {
top:10px;width:55px;height:15px;font-Size:10px;text-Align:center;
}

.today {
top:12px;width:1px;height:33px;background-Color:#339900;
}

.todaytxt {
top:0px;width:55px;height:15px;color:#339900;font-Size:10px;text-Align:center;
}

.monthline {
border-Left:solid #FFFF00 1px;
}

.weekline {
border-Left:solid #CCFFFF 1px;
}

/*]]>*/
</style>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Time Bar (16-December-2008) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk/

// ** Initialised by an event call to function
// zxcTimeBar('tst',[['2005/04/10','My Bar','bartitle'],['2006/04/10','red','Bar 1'],['2009/04/10','blue','Bar 2']],['bartxt','line','linetxt','today','todaytxt'],'mm/dd/yyyy/a',290);
// where:
// parameter 0 = the unique id name of the parent DIV. (string)
// parameter 1 = an array defining bar dates color and text. (array)
// each field of the array is an array:
// field[0][0] the start date(format yyyy/mm/dd). (string)
// field[0][1] (optional) the bar title. (string)
// field[0][2] (optional) the class name of the bar title. (string)
// field[n][0] the end date of the bar(format yyyy/mm/dd). (string)
// field[n][1] the color of the bar. (string)
// field[n][2] the bar text. (string)
// parameter 2 = an array defining the class names of the elements. (array)
// field[0] (optional) the 'bar text' class name. (string)
// field[1] (optional) the 'standard' line class name. (string)
// field[2] (optional) the ' line date' class name. (string)
// field[3] (optional) the 'today' line class name. (string)
// field[1] (optional) the 'month' line class name. (string)
// field[1] (optional) the 'week' line class name. (string)
// parameter 3 = the date 'mm/dd/yyy' or 'dd/mm/yyyy', add '/a' for alph months. (boolean)
// parameter 4 = (optional) the maximum width of the bars. (dights, default = the width or the bars parent node)


// ** Functional Code(3.96K) - NO NEED TO CHANGE

var zxcMonths=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

function zxcTimeBar(zxcid,zxcbarary,zxcclsary,zxcfmt,zxcw){
var zxcp=document.getElementById(zxcid);
var zxcd=zxcp.getElementsByTagName('DIV')[0];
var zxcf=zxcfmt.charAt&&zxcfmt.charAt(0)=='d'?false:true;
var zxcary=[];
for (var zxc0=0;zxc0<zxcbarary.length;zxc0++){
var zxcs=zxcbarary[zxc0][0].split(/\W+/g);
zxcary[zxc0]=[new Date(zxcs[0],zxcs[1]-1,zxcs[2],0,0,0,0)];
zxcary[zxc0][1]=(zxcary[zxc0][0].getTime()-zxcary[0][0].getTime())/1000/60/60/24;
if (zxcfmt.indexOf('a')>-1) zxcs[zxcf?1:2]=zxcMonths[zxcs[zxcf?1:2]-1];
zxcary[zxc0][2]=zxcs;
}
var zxcsep=zxcbarary[0][0].replace(/\w/g,'');
zxcsep=zxcsep.substring(0,Math.ceil(zxcsep.length/2))||'/';
var zxcdw=(zxcw?zxcw:zxcSVInt(zxcd,'width'))/zxcary[zxc0-1][1];
var zxcdh=zxcSVInt(zxcd,'height'),zxcdl=zxcSVInt(zxcd,'left'),zxcnow=new Date(),zxcday=1000*60*60*24;
if (zxcbarary[0][1]&&zxcbarary[0][2]){
var zxctxt=zxcES('DIV',{position:'absolute'},zxcp,zxcbarary[0][1]);
zxctxt.className=zxcbarary[0][2];
}
if (zxcclsary[3]){
var zxctoday=zxcES('DIV',{position:'absolute',zIndex:'2',left:zxcdl+((zxcnow-zxcary[0][0])/zxcday)*zxcdw+'px'},zxcp);
zxctoday.className=zxcclsary[3];
}
var zxctxt=[zxcnow.getFullYear(),zxcnow.getMonth(),zxcnow.getDate()];
zxctxt[1]=zxcfmt.indexOf('a')>-1?zxcMonths[zxctxt[1]]:zxctxt[1]+1;
if (zxcclsary[4]){
zxctxt=zxcES('DIV',{position:'absolute',zIndex:'2'},zxcp,zxctxt[zxcf?1:2]+zxcsep+zxctxt[zxcf?2:1]+zxcsep+zxctxt[0]);
zxctxt.className=zxcclsary[4];
zxcES(zxctxt,{left:zxcdl+((zxcnow-zxcary[0][0])/zxcday)*zxcdw-zxcSVInt(zxctxt,'width')/2+'px'});
}
if (zxcclsary[1]){
var zxcline=zxcES('DIV',{position:'absolute',zIndex:'1',left:zxcdl+'px'},zxcp);
zxcline.className=zxcclsary[1];
}
if (zxcclsary[2]){
zxctxt=zxcES('DIV',{position:'absolute',zIndex:'1',left:zxcdl+'px'},zxcp,zxcary[0][2][zxcf?1:2]+zxcsep+zxcary[0][2][zxcf?2:1]+zxcsep+zxcary[0][2][0]);
zxctxt.className=zxcclsary[2];
zxcES(zxctxt,{left:zxcdl-zxcSVInt(zxctxt,'width')/2+'px'});
}
var zxccolors=['red','green','blue'];
for (var zxccnt=0,zxc1=1;zxc1<zxcary.length;zxc1++){
var zxcbl=zxcdl+zxcary[zxc1][1]*zxcdw;
if (zxcclsary[1]) zxcES(zxcline.cloneNode(false),{zIndex:101-zxc1+'',left:zxcbl+'px'},zxcp);
var zxcbar=zxcES('DIV',{position:'absolute',overflow:'hidden',zIndex:'10',left:zxccnt+'px',top:'0px',width:zxcary[zxc1][1]*zxcdw-zxccnt+'px',height:zxcdh+'px',backgroundColor:zxcbarary[zxc1][1],textAlign:'center'},zxcd);
if (zxcclsary[0]){
var zxcbartxt=zxcES('DIV',{},zxcbar,zxcbarary[zxc1][2]||'');
zxcbartxt.className=zxcclsary[0];
}
if (zxcclsary[2]) zxctxt=zxcES(zxctxt.cloneNode(false),{left:zxcbl-zxcSVInt(zxctxt,'width')/2+'px'},zxcp,zxcary[zxc1][2][zxcf?1:2]+zxcsep+zxcary[zxc1][2][zxcf?2:1]+zxcsep+zxcary[zxc1][2][0]);
zxccnt+=zxcbl-zxcdl;
}
var zxcsrt=zxcary[0][0];
var zxcdays=(zxcary[zxc0-1][0]-zxcsrt)/zxcday;
for (var zxc2=0;zxc2<zxcdays;zxc2++){
var zxcdate=new Date(zxcsrt.getFullYear(),zxcsrt.getMonth(),zxcsrt.getDate()+zxc2,0,0,0,0);
if (zxcclsary[5]&&zxcdate.getDate()==1){
zxcline=zxcES('DIV',{position:'absolute',left:zxc2*zxcdw+'px'},zxcd);
zxcline.className=zxcclsary[5];
}
if (zxcclsary[6]&&zxcdate.getDay()==0){
zxcline=zxcES('DIV',{position:'absolute',left:zxc2*zxcdw+'px'},zxcd);
zxcline.className=zxcclsary[6];
}
}
}

function zxcSVInt(zxcobj,zxcp){
if (zxcobj.currentStyle) return parseInt(zxcobj.currentStyle[zxcp.replace(/-/g,'')]);
return parseInt(document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase()));
}

function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string') zxcele=document.createElement(zxcele);
for (key in zxcstyle) zxcele.style[key]=zxcstyle[key];
if (zxcp) zxcp.appendChild(zxcele);
if (zxctxt) zxcele.appendChild(document.createTextNode(zxctxt));
return zxcele;
}


/*]]>*/
</script></head>

<body onload="zxcTimeBar('tst',[['2005/04/10','My Bar','bartitle'],['2006/04/10','red','Bar 1'],['2009/04/10','blue','Bar 2']],['bartxt','line','linetxt','today','todaytxt'],'mm/dd/yyyy/a',290);" >
2. What we have been provided is some date values like,<br />
a. Product Purchase date(10-04-2005)<br />
b. Product Expiry date(10-04-2006)<br />
c. Current date<br />
d. Warranty start date(this is same as product expiry date)<br />
e. Warranty expiry date(10-04-2009).<br />
http://www.dynamicdrive.com/forums/showthread.php?t=39743<br />
<br />

<br />
<div id="tst" style="position:relative;width:420px;height:50px;background-Color:#FFFFCC;border:solid black 1px;" >
<div style="position:relative;overflow:hidden;left:80px;top:25px;width:300px;height:20px;background-Color:#FFCC66;border:solid black 1px;" >
the bars parent node
</div>
</div>

</body>
</html>

diltony
12-16-2008, 10:18 PM
@Phillips, i salute, u really think in jscript! fantastic!

teamnirvana
12-17-2008, 06:57 AM
That was awesome Phillips. Thanks a bundle for helping me out in such a short time.

It works like a piece of cake. its sweet :)

Thanks a lot.Again and again.

vwphillips
12-17-2008, 11:55 AM
latest


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.bartitle {
left:10px;top:24px;color:#000000;font-Size:18px;
}

.bartxt {
position:relative;top:2px;width:55px;height:15px;color:#ffffff;font-Size:12px;text-Align:center;
}

.bartxtblack {
position:relative;top:2px;width:55px;height:15px;color:#000000;font-Size:12px;text-Align:center;
}
.stdline {
top:22px;height:24px;border-Left:solid #000000 1px;
}

.tstline {
top:22px;height:24px;border-Left:solid #ff0000 1px;
}

.stdlinetxt {
top:10px;width:55px;height:15px;color:#000000;font-Size:10px;text-Align:center;
}

.tstlinetxt {
top:10px;width:55px;height:15px;color:#ff0000;font-Size:10px;text-Align:center;
}

.today {
top:12px;width:1px;height:33px;background-Color:#339900;
}

.todaytxt {
top:0px;width:55px;height:15px;color:#339900;font-Size:10px;text-Align:center;
}

.monthline {
top:25px;height:26px;border-Left:solid #660099 1px;
}

.monthtxt {
top:50px;width:25px;height:15px;color:#660099;font-Size:10px;text-Align:center;
}
.weekline {
top:25px;height:30px;border-Left:solid #CCFFFF 1px;
}

/*]]>*/
</style>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Time Bar (17-December-2008) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk/

var Ary=[]
// 0 1 2 3 4 5
Ary[0]=['2008/02/10','My Bar','bartitle','stdline','stdlinetxt'];
Ary[1]=['2008/04/10','red' ,'Bar 1' ,'bartxt' ,'stdline','stdlinetxt'];
Ary[2]=['2008/10/10','blue' ,'Bar 2' ,'bartxt' ,'tstline','tstlinetxt'];
Ary[3]=['2009/01/10','yellow' ,'Bar 2' ,'bartxtblack' ,'tstline','tstlinetxt'];

// ** Initialised by an event call to function
// zxcTimeBar('tst',Ary,['today','todaytxt','monthline','monthtxt','weekline'],'mmm/dd/yyyy',490);
// where:
// parameter 0 = the unique id name of the parent DIV. (string)
// parameter 1 = an array defining bar dates color and text. (array)
// each field of the array is an array:
// field[0][0] the start date(format yyyy/mm/dd). (string)
// field[0][1] (optional) the bar title. (string)
// field[0][2] (optional) the class name of the bar title. (string)
// field[0][3] (optional) the 'start' line class name. (string)
// field[0][4] (optional) the 'start date' class name. (string)
// field[n][0] the end date of the bar(format yyyy/mm/dd). (string)
// field[n][1] the color of the bar. (string)
// field[n][2] (optional)the bar text. (string)
// field[n][3] (optional) the 'bar text' class name. (string)
// field[n][4] (optional) the 'standard' line class name. (string)
// field[n][5] (optional) the 'line date' class name. (string)
// parameter 2 = an array defining the class names of the elements. (array)
// field[0] (optional) the 'today' line class name. (string)
// field[1] (optional) the 'today' text class name. (string)
// field[2] (optional) the 'month' line class name. (string)
// field[3] (optional) the 'month' text class name. (string)
// field[4] (optional) the 'week' line class name. (string)
// parameter 3 = the date 'mm/dd/yyy' or 'dd/mm/yyyy', use 'mmm' for alph months. (boolean)
// parameter 4 = (optional) the maximum width of the bars. (dights, default = the width or the bars parent node)


// ** Functional Code(3.94) - NO NEED TO CHANGE

var zxcMonths=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

function zxcTimeBar(id,barary,clsary,fmt,width){
var bar=document.getElementById(id);
var par=bar.parentNode;
var barlft=zxcSVInt(bar,'left'),now=new Date(),day=1000*60*60*24,txt,line;
var ff=fmt.charAt&&fmt.charAt(0)=='d'?false:true,sep=fmt.replace(/\w/g,'');
var sep=sep.substring(0,Math.ceil(sep.length/2))||'/';
if (barary[0][1]&&barary[0][2]){ // bar title
txt=zxcES('DIV',{position:'absolute'},par,barary[0][1]);
txt.className=barary[0][2];
}
var ary=[];
for (var z0=0;z0<barary.length;z0++){
var s=barary[z0][0].split(/\W+/g);
ary[z0]=[new Date(s[0],s[1]-1,s[2],0,0,0,0)];
ary[z0][1]=(ary[z0][0].getTime()-ary[0][0].getTime())/1000/60/60/24;
if (fmt.indexOf('mmm')>-1) s[ff?1:2]=zxcMonths[s[ff?1:2]-1];
ary[z0][2]=s;
}
var dw=(width?width:zxcSVInt(bar,'width'))/ary[z0-1][1];
if (clsary[0]){ // today line
line=zxcES('DIV',{position:'absolute',zIndex:'2',left:barlft+((now-ary[0][0])/day)*dw+'px'},par);
line.className=clsary[0];
}
if (clsary[1]){ // today date
txt=[now.getFullYear(),now.getMonth(),now.getDate()];
txt[1]=fmt.indexOf('mmm')>-1?zxcMonths[txt[1]]:txt[1]+1;
txt=zxcES('DIV',{position:'absolute',zIndex:'2'},par,txt[ff?1:2]+sep+txt[ff?2:1]+sep+txt[0]);
txt.className=clsary[1];
zxcES(txt,{left:barlft+((now-ary[0][0])/day)*dw-zxcSVInt(txt,'width')/2+'px'});
}
if (barary[0][3]){ // start line
line=zxcES('DIV',{position:'absolute',zIndex:'4',left:barlft+'px'},par);
line.className=barary[0][3];
}
if (barary[0][4]){ // start line date
txt=zxcES('DIV',{position:'absolute',zIndex:'5',left:barlft+'px'},par,ary[0][2][ff?1:2]+sep+ary[0][2][ff?2:1]+sep+ary[0][2][0]);
txt.className=barary[0][4];
zxcES(txt,{left:barlft-zxcSVInt(txt,'width')/2+'px'});
}
for (var lft=0,z1=1;z1<ary.length;z1++){
// bar item
var item=zxcES('DIV',{position:'absolute',overflow:'hidden',zIndex:'0',left:lft+'px',top:'0px',width:ary[z1][1]*dw-lft+'px',height:zxcSVInt(bar,'height')+'px',backgroundColor:barary[z1][1],textAlign:'center'},bar);
if (barary[z1][3]){ // bar item text
txt=zxcES('DIV',{},item,barary[z1][2]||'');
txt.className=barary[z1][3];
}
var lft=ary[z1][1]*dw;
if (barary[z1][4]){ // bar item line
line=zxcES('DIV',{position:'absolute',zIndex:'4',left:barlft+lft+'px'},par);
line.className=barary[z1][4];
}
if (barary[z1][5]){ // bar item line date
txt=zxcES('DIV',{position:'absolute',zIndex:'5'},par,ary[z1][2][ff?1:2]+sep+ary[z1][2][ff?2:1]+sep+ary[z1][2][0]);
txt.className=barary[z1][5];
zxcES(txt,{left:barlft+lft-zxcSVInt(txt,'width')/2+'px'});
}
}
for (var srt=ary[0][0],days=(ary[z0-1][0]-srt)/day,z2=0;z2<days;z2++){
var date=new Date(srt.getFullYear(),srt.getMonth(),srt.getDate()+z2,0,0,0,0);
if (clsary[2]&&date.getDate()==1){ // month line
line=zxcES('DIV',{position:'absolute',zIndex:'2',left:barlft+z2*dw+'px'},par);
line.className=clsary[2];
}
if (clsary[3]&&date.getDate()==1){ // month text
var month=date.getMonth();
txt=(fmt.indexOf('mmm')>-1)?zxcMonths[month]:month+1>9?month+1:'0'+(month+1);
txt=zxcES('DIV',{position:'absolute',zIndex:'3'},par,txt+(month>0?'':' '+date.getFullYear()));
txt.className=clsary[3];
zxcES(txt,{left:barlft+z2*dw-zxcSVInt(txt,'width')/2+'px'});
}
if (clsary[4]&&date.getDay()==0){ // week line
line=zxcES('DIV',{position:'absolute',zIndex:'1',left:barlft+z2*dw+'px'},par);
line.className=clsary[4];
}
}
}

function zxcSVInt(obj,p){
if (obj.currentStyle) return parseInt(obj.currentStyle[p.replace(/-/g,'')]);
return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(p.toLowerCase()));
}

function zxcES(ele,style,p,txt){
if (typeof(ele)=='string') ele=document.createElement(ele);
for (key in style) ele.style[key]=style[key];
if (p) p.appendChild(ele);
if (txt) ele.appendChild(document.createTextNode(txt));
return ele;
}

/*]]>*/
</script></head>

<body onload="zxcTimeBar('tst',Ary,['today','todaytxt','monthline','monthtxt','weekline'],'mmm/dd/yyyy',490);" >

<br />
<div style="position:absolute;left:50px;top:50px;width:620px;height:150px;background-Color:#FFFFCC;border:solid black 1px;" >
<div id="tst" style="position:relative;overflow:hidden;left:80px;top:25px;width:500px;height:20px;background-Color:#FFCC66;border:solid black 1px;" >
the bars parent node
</div>
</div>

</body>
</html>

teamnirvana
12-23-2008, 03:18 PM
Thanks for the compartmented months code Phillips.

But I observed that if I provide any date which crosses 2009, the JS crashes the browser.

Why does that happen? can you enlighten me?

Thanks a lot for ur support Phillips.

vwphillips
12-23-2008, 05:20 PM
I've just tried with and end date of

Ary[3]=['2010/01/10','yellow' ,'Bar 2' ,'bartxtblack' ,'tstline','tstlinetxt'];


and it works fine.

please post your time array code

vwphillips
12-23-2008, 05:40 PM
BTW latest code


<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Time Line II (22-December-2008) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk/

var Ary=[]
// 0 1 2 3 4 5 6 7 8
Ary[0]=['My Bar','bartitle','2008/01/01','startline','startlinetxt'];
Ary[1]=['2008/03/01','2008/04/21','bar1','Bar 1' ,'bartxt' ,'startline','startlinetxt','endline','endlinetxt'];
Ary[2]=['2008/06/10','2008/08/10','bar2','Bar 2' ,'bartxt' ,'startline','startlinetxt','endline','endlinetxt'];
Ary[3]=['2008/10/10','2009/01/01','bar3','Bar 2' ,'bartxtblack','startline','startlinetxt','endline','endlinetxt'];

// ** Initialised by an event call to function
// zxcTimeLine('tst',Ary,['today','todaytxt','monthline','monthtxt','weekline'],'mmm/dd/yyyy',490);
// where:
// parameter 0 = the unique id name of the parent DIV. (string)
// parameter 1 = an array defining bar dates color and text. (array)
// each field of the array is an array:
// field[0][0] (optional) the bar title. (string)
// field[0][1] (optional) the class name of the bar title. (string)
// field[0][2] (optional) the bar start date(format yyyy/mm/dd). (string, default = field[1][0])
// field[0][3] (optional) the bar start line class name. (string)
// field[0][4] (optional) the bar start date class name. (string)
// field[n][0] the start date of the bar item (format yyyy/mm/dd). (string)
// field[n][1] the end date of the bar item (format yyyy/mm/dd). (string)
// field[n][2] the class name of the bar item. (string)
// field[n][3] (optional)the bar item text. (string)
// field[n][4] (optional) the bar item text class name. (string)
// field[n][5] (optional) the bar item start line class name. (string)
// field[n][6] (optional) the bar item start date class name. (string)
// field[n][7] (optional) the bar item end line class name. (string)
// field[n][8] (optional) the bar item end date class name. (string)
// parameter 2 = an array defining the class names of the elements. (array)
// field[0] (optional) the 'today' line class name. (string)
// field[1] (optional) the 'today' text class name. (string)
// field[2] (optional) the 'month' line class name. (string)
// field[3] (optional) the 'month' text class name. (string)
// field[4] (optional) the 'week' line class name. (string)
// parameter 3 = the date 'mm/dd/yyy' or 'dd/mm/yyyy'. (string, use 'mmm' for alph months, use 'yyyyy' to add year to Jan)
// parameter 4 = (optional) the maximum width of the bars. (dights, default = the width or the bars parent node)


// ** Functional Code(4.57) - NO NEED TO CHANGE

var zxcMonths=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

function zxcTimeLineII(id,barary,clsary,fmt,width){
var bar=document.getElementById(id);
var par=bar.parentNode;
var barlft=zxcSVInt(bar,'left'),now=new Date(),day=1000*60*60*24,txt,line;
var ff=fmt.charAt&&fmt.charAt(0)=='d'?false:true,sep=fmt.replace(/\w/g,'');
sep=sep.substring(0,Math.ceil(sep.length/2))||'/';
if (barary[0][0]&&barary[0][1]){ // bar title
txt=zxcES('DIV',{position:'absolute'},par,barary[0][0]);
txt.className=barary[0][1];
}
var srt=(barary[0][2]||barary[1][0]).split(/\W+/g);
var ary=[[srt,srt,0,new Date(srt[0],srt[1]-1,srt[2],0,0,0,0)]];
for (var z0=1;z0<barary.length;z0++){
srt=barary[z0][0].split(/\W+/g);
var sdate=new Date(srt[0],srt[1]-1,srt[2],0,0,0,0);
ary[z0]=[srt];
var fin=barary[z0][1].split(/\W+/g);
ary[z0][1]=fin;
ary[z0][4]=new Date(srt[0],srt[1]-1,srt[2],0,0,0,0);
ary[z0][5]=new Date(fin[0],fin[1]-1,fin[2],0,0,0,0);
if (ary[z0][5]<ary[z0][4]) return;
ary[z0][2]=((ary[z0][4]-ary[1][4])+(ary[1][4]-ary[0][3]))/1000/60/60/24; // left
ary[z0][3]=(ary[z0][5]-ary[z0][4])/1000/60/60/24; // width
if (fmt.indexOf('mmm')>-1){
ary[z0][0][ff?1:2]=zxcMonths[ary[z0][0][ff?1:2]*1-1];
ary[z0][1][ff?1:2]=zxcMonths[ary[z0][1][ff?1:2]-1];
}
}
var days=ary[z0-1][2]+ary[z0-1][3],dw=(width?width:zxcSVInt(bar,'width'))/days,srt=ary[0][3];
if (now>=srt&&now<=ary[z0-1][5]){
zxcLine(clsary[0],[null,null,((now-srt)/day)],par,bar,barlft,dw,true); // today line
txt=[now.getFullYear(),now.getMonth(),now.getDate()];
txt[1]=fmt.indexOf('mmm')>-1?zxcMonths[txt[1]]:txt[1]+1;
zxcDate(clsary[1],[((now-srt)/day),txt],0,0,1,par,bar,barlft,dw,ff,sep,true); // today date
}
zxcLine(barary[0][3],ary[0],par,bar,barlft,dw); // start line
if (fmt.indexOf('mmm')>-1) ary[0][0][ff?1:2]=zxcMonths[ary[0][0][ff?1:2]*1-1];
zxcDate(barary[0][4],ary[0],2,0,0,par,bar,barlft,dw,ff,sep); // bar start date
for (var z1=1;z1<ary.length;z1++){
// bar item
var item=zxcES('DIV',{position:'absolute',overflow:'hidden',left:ary[z1][2]*dw+'px',width:ary[z1][3]*dw+'px'},bar);
item.className=barary[z1][2];
if (barary[z1][4]){ // bar item text
txt=zxcES('DIV',{},item,barary[z1][2]||'');
txt.className=barary[z1][4];
}
zxcLine(barary[z1][5],ary[z1],par,bar,barlft,dw); // bar item start line
zxcDate(barary[z1][6],ary[z1],2,0,0,par,bar,barlft,dw,ff,sep); // bar item start date
zxcLine(barary[z1][7],ary[z1],par,bar,barlft,dw); // bar item finish line
zxcDate(barary[z1][8],ary[z1],2,ary[z1][3],1,par,bar,barlft,dw,ff,sep); // bar item finish date
}
for (var week=ff?0:1,z2=0;z2<days+1;z2++){
var date=new Date(srt.getFullYear(),srt.getMonth(),srt.getDate()+z2,0,0,0,0);
if (clsary[2]&&date.getDate()==1){ // month line
line=zxcES('DIV',{position:'absolute',zIndex:'2',left:barlft+z2*dw+'px'},par);
line.className=clsary[2];
}
if (clsary[3]&&date.getDate()==1){ // month text
var month=date.getMonth();
txt=(fmt.indexOf('mmm')>-1)?zxcMonths[month]:month+1>9?month+1:'0'+(month+1);
txt=zxcES('DIV',{position:'absolute',zIndex:'3'},par,txt+(month>0||fmt.indexOf('yyyyy')==-1?'':' '+date.getFullYear()));
txt.className=clsary[3];
zxcES(txt,{left:barlft+z2*dw-zxcSVInt(txt,'width')/2+'px'});
}
if (clsary[4]&&date.getDay()==week){ // week line
line=zxcES('DIV',{position:'absolute',zIndex:'1',left:barlft+z2*dw+'px'},par);
line.className=clsary[4];
}
}
}


function zxcLine(cls,ary,par,bar,barlft,dw,today){
if (cls){
var line=zxcES('DIV',{position:'absolute',left:barlft+ary[2]*dw+'px'},par);
line.className=cls;
if (!today) zxcES(line,{top:zxcSVInt(bar,'top')+zxcSVInt(line,'top')+'px'});
}
}

function zxcDate(cls,ary,nu,os,date,par,bar,barlft,dw,ff,sep,today){
if (cls){
txt=zxcES('DIV',{position:'absolute'},par,ary[date][ff?1:2]+sep+ary[date][ff?2:1]+sep+ary[date][0]);
txt.className=cls;
zxcES(txt,{left:barlft+ary[nu]*dw+os*dw-zxcSVInt(txt,'width')/2+'px'});
if (!today) zxcES(txt,{top:zxcSVInt(bar,'top')+zxcSVInt(txt,'top')+'px'});
}
}

function zxcSVInt(obj,p){
if (obj.currentStyle) return parseInt(obj.currentStyle[p.replace(/-/g,'')]);
return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(p.toLowerCase()));
}

function zxcES(ele,style,p,txt){
if (typeof(ele)=='string') ele=document.createElement(ele);
for (key in style) ele.style[key]=style[key];
if (p) p.appendChild(ele);
if (txt) ele.appendChild(document.createTextNode(txt));
return ele;
}

/*]]>*/
</script>

vwphillips
12-27-2008, 12:59 PM
I thought I replied to this

however I'm unable to reproduce the problem

please post you time array