Bar Chart
This section illustrates you how to create bar chart using html in jsp.
To draw a bar chart, we have used html tags. In this, firstly
create rows with <tr> tag. The tag<td> contains the row
data,<div> tag provides the division in a chart.
Two rows are used. The first row draw the bars for the specified marks by
providing height and width. The second row describes the id of the student to the
respective marks. For id, we have used while loop. It will increment the
value of id by one for the respective marks.
Here is the code of barGraph.jsp
<%@ page language="java" %>
<html>
<head>
<title>Bar Chart</title>
</head>
<body bgcolor=white text=black>
<table id=graph align=center width=600 cellpadding=0 cellspacing=1 border=0>
<tr bgcolor=#C0C0C0>
<td align=center valign=bottom width=29>100<br>
<div style=' background-color:cyan; width:24; height:100;' />
</td>
<td align=center valign=bottom width=29>90<br>
<div style=' background-color:cyan; width:24; height:90;' />
</td>
<td align=center valign=bottom width=29>95<br>
<div style=' background-color:cyan; width:24; height:95;' />
</td>
<td align=center valign=bottom width=29>60<br>
<div style=' background-color:cyan; width:24; height:60;' />
</td>
<td align=center valign=bottom width=29>85<br>
<div style=' background-color:cyan; width:24; height:85;' />
</td>
<td align=center valign=bottom width=29>100<br>
<div style=' background-color:cyan; width:24; height:100;' />
</td>
<td align=center valign=bottom width=29>70<br>
<div style=' background-color:cyan; width:24; height:70;' />
</td>
<td align=center valign=bottom width=29>100<br>
<div style=' background-color:cyan; width:24; height:100;' />
</td>
<td align=center valign=bottom width=29>75<br>
<div style=' background-color:cyan; width:24; height:75;' />
</td>
<td align=center valign=bottom width=29>85<br>
<div style=' background-color:cyan; width:24; height:85;' />
</td>
</tr>
<tr bgcolor=#C0C0C0>
<%
int id=0;
while(id<10)
{
id=id+1;
%>
<td align=center><%out.println(id);%></td>
<%
}
%>
</tr>
</table>
</body>
</html> |
To run the above example start the tomcat and enter http://localhost:8080/application/jsp/barGraph.jsp
to the address bar and hit enter.
Output will be displayed as:
Download source Code
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
