Complex Progress Bar requirements. Can anyone help?
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.
Please check the screenshot I have provided in the attachments for a details.
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.
| Attachment | Size |
|---|---|
| Progress Bar.JPG | 9.38 KB |
pr0gr4mm3r posted this at 15:03 — 15th December 2008.
He has: 1,502 posts
Joined: Sep 2006
Welcome to the forums, teamnirvana.
Are there any certain techniques that you have to use? For example, does this have to be done in HTML & CSS, PHP's GD library, or something else?
teamnirvana posted this at 10:44 — 16th December 2008.
They have: 4 posts
Joined: Dec 2008
Thanks for the reply.
PHP is not required. The functionality is when dates are provided in the text boxes and the submit is clicked, these dates become respective parameters like Product purchase date, manufacturer's expiry date and certificate effective date and certificate expiry date. Today's date, retrieved on the fly.
Basic HTML,CSS and JavaScript is enough for help.
Thank you.
pr0gr4mm3r posted this at 15:08 — 16th December 2008.
He has: 1,502 posts
Joined: Sep 2006
Well, the first step would be to replicate that picture the best you can with HTML & CSS before we attempt to manipulate it with JavaScript.
I would warp the bar in a
<div>, and then have smaller ones inside that and have the background color set to the colors you see in the progress bar. Then adjust their widths as necessary based on the dates.decibel.places posted this at 16:22 — 16th December 2008.
He has: 1,494 posts
Joined: Jun 2008
using DHTML, one of the key points to remember is to assign uniqiue CSS ids to each element (div or span), so they can be individually manipulated using document.getElementById
then you would need some scaling code to process the input values into values usable for the graph (some validation of input would not hurt)
another approach could be using the Google Charts API which returns a PNG image as output, but that may not be within the assignment's requirements
pr0gr4mm3r posted this at 17:43 — 16th December 2008.
He has: 1,502 posts
Joined: Sep 2006
Being an academic project, I think the OP is limited to HTML/CSS/Javascript. Otherwise, the Google Charts API or even GD functions would be a better option IMO.
teamnirvana posted this at 10:47 — 17th December 2008.
They have: 4 posts
Joined: Dec 2008
Hi can you provide me with code for this requirement.
That would be a great help for me.
Yeah, as an academic project, this feature has to work on html,css and javascript.
Thank you.
decibel.places posted this at 14:14 — 17th December 2008.
He has: 1,494 posts
Joined: Jun 2008
That would be a great help for me.
Yeah, as an academic project, this feature has to work on html,css and javascript.
Since this is an academic project, asking someone else to provide you with the code for it is ... unethical at best, probably cheating.
I have no problem holding your hand, giving advice, pointing you to tools/resurces that will assist you.
I am not going to complete your academic project for you, in the long run that is for your own good
I'll give you a tip - Google is the developer's best friend - maybe you could try one of these results...
teamnirvana posted this at 07:29 — 18th December 2008.
They have: 4 posts
Joined: Dec 2008
@Decibel.places: Yes, I do agree with you and I would like to gladly take your help in this regard. But, the only constraint that I have is the time. I, being a Java guy, am not that comfortable with JavaScript.
Even if I start learning it in bits and pieces now, it would do me no good for this project. So, I had at last with no way to look had asked for the code.
Thanks for replying.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.