Easily use JSP to generate pie charts

js| Pie Chart

JSP provides a number of simple and useful tools, including reading data from a database, sending data, and being able to display the results in a pie shape. Now let's take a look at this simple and practical approach.

All the things you need

In order to properly run the relevant examples of this article, you must need JDK 1.2 or higher version, a relational database management system, a JSP network server. I've been debugging these examples at Tomcat, and I've also used the Sun Java 2 SDK release com.sun.image.codec.jpegclasses.

Database design
Let's say you work for a company that sells fresh fruit, and the fruits that the company sells include apples, oranges, and grapes. Now your boss wants to use a pie shape to show the total sale of each fruit, the pie shape can make each product sales situation at a glance, the boss can quickly grasp the company's product transactions.

Table A uses two of the database lists in this article. The first list (products) contains the names of all the items sold, and the second list (sales) contains the corresponding sales for each product.

The Products list contains ProductID and ProductName two domains. The sales list contains Saleid, ProductID, and total. The ProductID in the Sales list provides an association between the two lists. The total amount in the Sales list contains the amount of cash sold per time, which appears as floating-point data.

The GetProducts () method in table B connects the two databases and saves all the product names in the array, and I set the following database rules:

ProductID in the product list of the most unique, but also the most critical;
ProductID A value of 0 for the first record;
All successive records are cumulative, so the second record has a ProductID of 1, a third record ProductID 2, and so on.
These database rules allow you to store data in the product array, as follows:

Arr[rs.getint ("ProductID")] = rs.getstring ("ProductName");

Some database management systems allow the automatic accumulation of data or automatic sorting by default. When you design a database, you must first find out what rules your database management system follows, such as automatic accumulation, automatic sorting, and so on.

Get Total Sales

In most cases, there will be many records in the sales list, so it is important to access the database quickly and efficiently. Now we only need to access the total sales volume of each product in the database.

The Getsales () method in table C connects to the database and returns an array that contains the total amount sold for each product. When Getsales () traverses all records, it only stores new sales for each product:

int product = Rs.getint ("ProductID");
Arr[product] + + = rs.getfloat ("Amount");

Piecolor objects
Each product on a pie-shaped graphic should be displayed in a different color. To do this, we create a Piecolor object (as shown in table D) that contains an array of colors:

Color piecolorarray[] = {new Color (210,60,60), new color (60,210,60) ...}

The Piecolor class defines a Setnewcolor () method that enables Curpiecolor and indexes to be incremented, and it can check that the index does not exceed the bounds of the boundary, that is, if the curpiecolor is too large, it assigns a value of 0.

More effectively, Setnewcolor () loops through each color and executes the following code in the first color:

curpiecolor++;
if (Curpiecolor >= piecolorarray.length)
{curpiecolor = 0;}

Renderinghints and antialiasing classes
The Java.awt.RenderingHints class defines a number of methods for displaying two-dimensional graphics, including Alpha_interpolation, jitter, and antialiasing methods. Renderinghints helps determine how graphics are displayed and how graphics are best handled.

For smooth display, you can use the Antialiasing method to process a pie shape. Antialiasing is a smoothing method for graphic processing. The algorithm is to select a special pixel color value and replace the pixels at the intersection, so that the line intersection can be smoothed.

Figure A illustrates the effect of the antialiasing method. You can see that the line intersection of the pie shape using the antialiasing method becomes smooth.

Figure A

At the same time, you can create a Renderinghints object and pass it to the Graphics2D setrenderinghints () method, as follows:

Renderinghints renderhints = new Renderinghints (renderinghints.key_antialiasing,
RENDERINGHINTS.VALUE_ANTIALIAS_ON);
G2d.setrenderinghints (renderhints);

Making adjustable borders

The pie shape in figure A has a boundary, how can you change the size of the boundary? You can first define int border = 10, and then calculate the size of the area within the boundary to achieve:

Ellipse2d.double Elb = new Ellipse2d.double (X_PIE-BORDER/2, Y_PIE-BORDER/2, Piewidth + border, pieheight + border);

The values of X_pie and Y_pie represent the upper-left corner of the square that surrounds the pie shape. We get the center of the pie shape by half of the boundary area (BORDER/2).

Arc (ARC) theory
The Fillarc () method inherited from the Java.awt.Graphics class provides a simple way to draw the various parts (or arcs) of a pie shape:

G2d.fillarc (X_position, y_position, width, height, startangle, sweepangle);

X_position, and y_position integers represent the x,y coordinates of the upper-left corner of the arc to be filled, and the width and heigh integers represent their specific dimensions. If the value of width and height is equal, the pie shape will be a circle. If the width and height are not equal, the pie shape will be an ellipse.

The Fillarc () method determines the size of the arc based on the Sweepangle integer value. If the Sweepangle value is positive, the arc is drawn in a counterclockwise direction, otherwise it is drawn clockwise.

Draw Arcs
The first step is to use the Getpiecolor () method of the Piecolor object to get the color of the most recent pie-shaped arc and give it the current arc::

G2d.setcolor (Pc.getpiecolor ());

Next, you get a total sales by looping through the sales[] array and accumulating it:

Salestotal + = Sales[i];

By using a total sales volume, you can calculate the total amount of sales for each product:

float perc = (sales[i]/salestotal);

We calculate sweepangle to assign degrees to each part of the arc:

int sweepangle = (int)

After each part of the arc is finished, startangle can be incremented according to the current sweepangle. This ensures that the current Arc section is the beginning of the above arc, thus creating a complete pie shape.

Display icon
The icon provides the simplest way to show the parts of a pie shape. The size of an icon should correspond to the amount of occupancy in the pie shape.

Figure B shows a complete pie shape and its corresponding parts of the icon, including the product name, sales volume, and each part of the share.

Figure B

Summarize

This article describes how to use JSP to draw pie-shaped graphics methods and algorithms, these methods and algorithms are simple and practical, developers can make full use of these methods.