roadmap page

This is probably not a usual question but, how were the % complete charts from page
https://vaadin.com/roadmap
created?

regards,

Hugo

That part is simply queries for closed and open tickets for those milestones in our trac.
The progress there is not linear as especially bigger tickets tend to be closed towards the end of a cycle even though work for them may start early and smaller tickets (but more numerous) are often addressed later in the cycle.

Henri:

Thank you very much for your answer…what I asked was how to create a chart of a “% complete” variable as the one in the page, because I need to create a chart that show the% complete of a document and I would like to show it with an horizontal bar like the one from the page… sorry if I wasn’t too clear with my question…

regards,

Hugo

Those are actually shown as very simple HTML tables - I copied this from the site DOM:

<table class="progress">
  <tbody>
    <tr>
      <td class="closed" style="width: 43%"> <a href="..." target="_new" title="3/7 closed"> </a></td>
      <td class="open" style="width: 57%"> <a href="..." target="_new" title="4/7 active"> </a></td>
    </tr>
  </tbody>
</table>

This would even be doable with a Label in HTML mode and some CSS; if you want something more elaborate, look at the various chart add-ons in the
Directory
.

Thank you very much Henri for your help…I’m trying to add what you sent me in a label and is not working (first time I use html)…how do I add the code you sent me?..here is what I did:

Label avance = new Label("",Label.CONTENT_PREFORMATTED);
	    avance.setValue(
	    		 "<html>" +
	    		 "<table class='progress'>" +
	    		 "<tbody>" +
	    		 "<tr>" +
	    		 "<td class='closed' style='width: 43%'> <a href='...' target='_new' title='3/7 closed'> </a></td>" +
	    		 "<td class='open' style='width: 57%'> <a href='...' target='_new' title='4/7 active'> </a></td>" +
	    		 "</tr>" +
	    		 "</tbody>" +
	    		 "</table>" +
	    		 "</html>");
            
	    layout.addComponent(avance);

thanks!!!

Try this:

Label avance = new Label("",Label.CONTENT_XHTML);
avance.setValue(
                 "<table class='progress'>" +
                 "<tbody>" +
                 "<tr>" +
                 "<td class='closed' style='width: 43%'> <a href='...' target='_new' title='3/7 closed'> </a></td>" +
                 "<td class='open' style='width: 57%'> <a href='...' target='_new' title='4/7 active'> </a></td>" +
                 "</tr>" +
                 "</tbody>" +
                 "</table>");
            
layout.addComponent(avance);

Never tested if the label would actually show a table this way … but why shouldn’t it?

I tried it and didn’t work, maybe a label is not the best way to do it…I’ll do some more research here, I’m not good with html and I’m just trying to copy paste this solution…

thanks for all the help…

Label label = new Label("<table style='width:100px; height:15px;'>" +
                "<tbody>" +
                "<tr>" +
                "<td style='width: 43%; background-color: #FF0000;'>43%</td>" +
                "<td style='width: 57%; background-color: #00FF00;'>57%</td>" +
                "</tr>" +
                "</tbody>" +
                "</table>", Label.CONTENT_XHTML);
mainWindow.addComponent(label);

Tested it just out of curiosity … Works fine. Leaving it up to you to find out how to change the values, colors etc.

It worked!!!..again…Thank you for all your help Tobias, you really saved my day!!!..I’m completely in debt with you…

regards,

Hugo