We often see some dynamically updated pictures on web pages, the most common of which is the stock K-line chart. This article attempts to use a simple example to show you how to call JavaBean through JSP to dynamically generate a histogram on the web page.
Background: When I was developing a project for a statistics bureau recently, I was involved in the problem of dynamically generating images on a web page. It took me a day and I finally solved it. In order to help everyone avoid detours when encountering the same problem in the future, I will now The design ideas and source code are published for everyone to share. The following code was successfully tested on Windows 2000, and the Web application server uses Allaire's Jrun3.0.
Step 1: Create a Java Bean to generate jpg files.
The source program is as follows:
//Java Bean to generate images
//Author: Cui Guanyu
//Date:2001-08-24
import java.io.*;
import java.util.*;
import com.sun.image.codec.jpeg.*;
import java.awt.image.*;
import java.awt.*;
public class ChartGraphics {
BufferedImage image;
public void createImage(String fileLocation) {
try {
FileOutputStream fos = new FileOutputStream(fileLocation);
BufferedOutputStream bos = new BufferedOutputStream(fos);
JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(bos);
encoder.encode(image);
bos.close();
} catch(Exception e) {
System.out.println(e);
}
}
public void graphicsGeneration(int h1,int h2,int h3,int h4,int h5) {
final int X=10;
int imageWidth = 300; //The width of the picture int imageHeight = 300; //The height of the picture int columnWidth=30; //The width of the column int columnHeight=200; //The maximum height of the column
ChartGraphics chartGraphics = new ChartGraphics();
chartGraphics.image = new BufferedImage(imageWidth, imageHeight, BufferedImage.TYPE_INT_RGB);
Graphics graphics = chartGraphics.image.getGraphics();
graphics.setColor(Color.white);
graphics.fillRect(0,0,imageWidth,imageHeight);
graphics.setColor(Color.red);
graphics.drawRect(X+1*columnWidth, columnHeight-h1, columnWidth, h1);
graphics.drawRect(X+2*columnWidth, columnHeight-h2, columnWidth, h2);
graphics.drawRect(X+3*columnWidth, columnHeight-h3, columnWidth, h3);
graphics.drawRect(X+4*columnWidth, columnHeight-h4, columnWidth, h4);
graphics.drawRect(X+5*columnWidth, columnHeight-h5, columnWidth, h5);
chartGraphics.createImage("D:\temp\chart.jpg");
}
}
Explanation: The createImage(String fileLocation) method is used to create a JPG image. The parameter fileLocation is the file path.
The graphicsGeneration(int h1, int h2, int h3, int h4, int h5) method is used to draw the content of the image. The parameters h1...h5
Step 2for the height of each rectangle
: Create another Java Bean to read data from the text file (the height of each rectangle). In actual applications, the data is stored in the Oracle database.
The source program is as follows:
//Read Text file Java Bean for data
//Author: Cui Guanyu
//Date:2001-08-24
import java.io.*;
public class GetData {
int heightArray[] = new int[5];
public int[] getHightArray() {
try {
RandomAccessFile randomAccessFile = new RandomAccessFile ("d:\temp\ColumnHeightArray.txt","r");
for (int i=0;i<5;i++)
{
heightArray[i] = Integer.parseInt(randomAccessFile.readLine());
}
}
catch(Exception e) {
System.out.println(e);
}
return heightArray;
}
}
Explanation: getHightArray() is used to read data from text, convert the String type in the text to int type, and return it as an array type.
Step 3: Create the JSP file
source program as follows:
＜%@ page import="ChartGraphics" %＞
＜%@ page import="GetData" %＞
＜jsp:useBean id="cg" class="ChartGraphics"/＞
＜jsp:useBean id="gd" class="GetData"/＞
<%!
int height[]=new int[5];
%>
<%
height=gd.getHightArray();
cg.graphicsGeneration(height[0],height[1],height[2],height[3],height[4]);
%>
<html>
<body>
＜img src="d:tempchart.jpg"＞＜/img＞
＜/body＞
</html>
Explanation: JSP first calls Bean (GetData..class) to read the data in the file, then calls Bean (ChartGraphics.class) to generate the picture, and finally displays the picture.
Conclusion: Since the data in the text (ColumnHeightArray.txt) can change at any time, the height of the five rectangles in the generated image changes accordingly, thus realizing the dynamic generation of the image. This design idea can also be used to make websites voting system.