Use an image tag that references to a 1-dot image of your chosen bar color. Then enlarge the image in width and height according to your performance results. Use these images in table cells and write number on top.
code snippet from my application:
Code:
<% // display the graph. %>
<%
for (int itemIndex = graphStart, lastIndex = Math.min(numberOfItems, graphStart + MAX_COLUMNS_PER_GRAPH); itemIndex < lastIndex; itemIndex++)
{
// compute the height of the column
StatisticsItem currentItem = (StatisticsItem) statisticsList.elementAt(itemIndex);
double yCoordValue = currentItem.getYCoordValue();
int height = (int) (MAX_BAR_HEIGHT * yCoordValue / maxYCoordValue);
// compute the label of the column. Show the value either as integer or fraction.
String yCoordLabel = (yCoordValue == (int) yCoordValue) ? String.valueOf((int) yCoordValue) : decimalFormat.format(yCoordValue);
%>
<% // display the graph columns %>
<% // bugfix: the SPAN element must be surrounded by a table, else it will show and print each column on a different page in the print preview of the Internet Explorer %>
<td width=<%= BAR_WIDTH %>></td>
<td align=center width=<%= BAR_GAP %> valign="bottom">
<table cellspacing="0" cellpadding="0" border=0>
<tr>
<td>
<span class=blackLittleText style="writing-mode:tb-rl">
<%= yCoordLabel %>
</span>
</td>
</tr>
</table>
<%= statisticsImages.getImage("BLUE_BAR", "style='background-color:#31659C' width=" + BAR_WIDTH + " height=" + height) %>
</td>
<%
} // end of for-loop
%>
You can also try with divs and background color and position them next to each other.
Comment