Patent Publication Number: US-7714861-B1

Title: Method of producing electronically readable documents with updatable pie charts

Description:
BACKGROUND OF THE INVENTION 
   The present invention provides a method for displaying a set of numerical data graphically on an Internet web page by creating a pie chart having “slices”, each of which is proportional in size to the value of one datum. 
   More specifically the present invention teaches a method for affixing to a web page instructions for displaying numerical data in pie chart form and for updating the pie chart display in response to changes in the data. 
   The use of pie charts to make data comparisons is a technique known in the art. Long before the birth of personal computers and of the Internet, pie charts were drawn on paper, blackboards, and the like in order to enable an audience to readily compare numerically measurable attributes such as dollar expenditures and revenues, population distributions, and the like. 
   In a client-server environment in which the client communicates with the server over the Internet, it has been known to enable the client to transmit data entered on a web page to the server, and to receive back from the server instructions for drawing a pie chart representative of the data on the web page. However, when the client is working offline, i.e., disconnected from the server, the generation of a pie chart to illustrate the data on the web page in an efficient manner has not been possible. 
   Pie charts are made up of “slices” each of which represents one datum. Each slice has a circular or elliptical arc and two radii connecting the ends of the arc with the center of the circle or ellipse. 
   Web browsers typically deal with rectangular elements. Web technologies (HTML, CSS) do not provide built-in methods for creating non-rectangular shapes such as pie slices. 
   SUMMARY OF THE INVENTION 
   The present invention overcomes the aforementioned limitations of the prior art by providing a method of efficiently creating pie charts in Javascript®® which can then be displayed in any Javascript®-enabled web browser, such as Internet Explorer® or Firefox®. 
   It is therefore an object of the invention to attach to a web page instructions for constructing a pie chart illustrative of data entered on the web page without resort to a server or other external processor. 
   Another object of the invention is to efficiently construct a pie chart on a web page from segments of horizontal lines drawn on the web page. 
   Still another object of the invention is to construct a pie chart without computing the coordinates of each and every point in the pie chart. 
   Other and further objects of the invention will be apparent from the following drawings and description of a preferred embodiment of the invention. 

   
     DESCRIPTION OF THE DRAWINGS 
       FIG. 1  is a schematic block diagram of apparatus for performing the method of the preferred embodiment of the invention; 
       FIG. 2  is a view of the appearance of a display portion of the apparatus shown in  FIG. 1  at a first time during performance of the method of the preferred embodiment of the invention; 
       FIG. 3  is a view of the appearance of a display portion of the portion of the apparatus shown in  FIG. 1  during performance of the method of the preferred embodiment of the invention at a time later than the time of  FIG. 2 ; 
       FIG. 4  is a view of the appearance of a display portion of the portion of the apparatus shown in  FIG. 1  during performance of the method of the preferred embodiment of the invention at a time later than the time of  FIG. 3 ; 
       FIG. 5  is a view of the appearance of a display portion of the portion of the apparatus shown in  FIG. 1  during performance of the method of the preferred embodiment of the invention at a time later than the time of  FIG. 4 ; 
       FIG. 6  is a view of the appearance of a display portion of the portion of the apparatus shown in  FIG. 1  during performance of the method of the preferred embodiment of the invention at a time later than the time of  FIG. 5 ; 
       FIG. 7  is a view of the appearance of a display portion of the portion of the apparatus shown in  FIG. 1  during performance of the method of the preferred embodiment of the invention at a time later than the time of  FIG. 6 ; 
       FIG. 8  is a view of the appearance of a display portion of the portion of the apparatus shown in  FIG. 1  during performance of the method of the preferred embodiment of the invention at a time later than the time of  FIG. 7 ; 
       FIG. 9  is a view of the appearance of a display portion of the portion of the apparatus shown in  FIG. 1  during performance of the method of the preferred embodiment of the invention at a time later than the time of  FIG. 8 . 
       FIG. 10  is a view of the appearance of a display portion of the portion of the apparatus shown in  FIG. 9  illustrating further features of the method of the preferred embodiment of the invention. 
   

   DESCRIPTION OF THE PREFERRED EMBODIMENT 
   Referring now to  FIG. 1  of the drawings, there is shown a client computer  1  having a central processing unit (CPU)  3  which includes a microprocessor, RAM, ROM, and a rewritable data storage device in the form of a hard disk, a keyboard  5  for input of information to the CPU, and a video monitor  7  on which there is displayed a pie chart which graphically illustrates the relative magnitudes of the data in a data set having 4 members. Although not readily apparent to the eye, the pie chart and its slices are constructed from segments of horizontal lines of pixels on the display screen of the monitor, each segment being a rectangle with a height of one pixel. 
   In order to represent pie slices as collections of rectangles, two constraints must be observed. First, the outer, curved edge of each slice must correspond to the ideal circle (or ellipse) of the pie radius as closely as possible given the pixel resolution. Also the radial, i.e., straight boundaries of each slice n must intersect at an angle of ANGLE n  degrees. 
   Two sets of calculations are made to construct a pie chart drawn with horizontal lines. 
   First, the end points of horizontal lines forming the entire pie chart, whether it be circular or elliptical, are determined and stored in an array in computer memory. By working only with the pixels included in the horizontal lines forming the overall pie, it is ensured that the outer, curved edge of each slice corresponds to the ideal circle (or ellipse) of the pie radius as closely as possible, given the pixel resolution. 
   Also, the calculations of the horizontal line end point coordinates for the entire pie are done only once, and are not repeated for each slice. This approach maximizes the speed of constructing the pie chart and enforces consistency of the circular boundaries from one slice to the next. 
   Thereafter, for each of the slices 0 to m, a determination of which pixels are included in the slice is made. The included pixels are then represented by a set of rectangles overlaying the horizontal lines forming the pie. 
   Irrespective of whether or not the pie is in the form of a circle or an ellipse, the determination of which pixels are included in each slice is computed by determining a start angle and a stop angle for each slice having a vertex at the center point of the pie. 
   In order to obtain a representation of all the pixels contained within the circle or ellipse, a modification of a scan conversion algorithm known in the art is applied as explained below. 
   The desired radius of the circular pie can be fixed in accordance with the framework of the web page, or it can be set with a data entry input to the client computer 1. The radius, measured in pixels, of the pie which is to be drawn is specified by the calling Javascript®. 
   Since circles exhibit eight-fold symmetry, it is only necessary to scan one eighth, or 45 degrees, of the circumference of a circular pie to define the complete set of pixels that represent the entire circular pie. It is not only more computationally efficient, but the resulting approximation of the true circle is automatically a symmetric one, which is usually more pleasing to the eye. 
   Prior art scan conversion algorithms for drawing circular objects find a point (x,y) in one 45 degree interval and map all 8 points that result from symmetries: (x,y); (x,−y); (−x, y); (−x,−y); (y,x); (y,−x); (−y, x); (−y,−x). 
   In accordance with the method of the invention, horizontal lines (rather than points) forming the circular pie are defined and the definitions are stored in an array, preferably in the random access memory of the client digital computer. That is, the coordinates of the end points of each horizontal line, i.e., a rectangle having a height of one pixel, are stored in the array of horizontal lines defining the circle. 
   Assuming that the pie is centered at the origin (0,0) of a rectangular coordinate system, the highest point on the pie will be at (0,R) where R is the radius of the circular pie. 
   The known Bresenham circle scan algorithm is used to determine from the radius of the desired circle which forms the circumference of the pie to be drawn, the coordinates of the right-most pixel on the top of the circle. One form of the Bresenham circle scan conversion algorithm which takes advantage of the 8-way symmetry of the circle has the following steps: 
   Start at a specific point, usually the center pixel at the top of the circle (x=0, y=R). 
   While x is less than y (in the North-NorthEast octant of the circle): 
   add the current point; 
   test to see whether the pixel to the right, or the pixel to the right and down, is closest to the true circle. If the pixel to the right is closest, move to the right by setting x=x+1 with y unchanged. If the pixel to the right and down is closest, move down and to the right by setting x=x+1 and y=y−1. 
   In accordance with the present invention, the Bresenham circle scan algorithm is modified so that before setting x=x+1 and y=y−1, x and y are saved as the coordinates of the rightmost pixel on the circumference of the pie for the current y. From these x,y coordinates, a horizontal line of pixels terminating in the pixel having the current x,y coordinates is determined as are other horizontal lines in the pie which can be derived from symmetries inherent in the circular pie as follows. 
   First the endpoints of the lines having as x and y coordinates [(−α,R), (α,R)] and [(−α,−R), (α,−R)] are stored in the array of line endpoint coordinates where α is the x coordinate of the right-most pixel on the top of the circle and R is the radius of the desired circle which forms the circumference of the pie to be drawn. Also stored in the array of line endpoint coordinates are the lines [(−α,−R), (α,−R)] and the N lines that result from exchanging the x and y coordinates and decrementing the y coordinate until it is equal to zero, where N=(2α+1), i.e., the length of the line [(−α,R), (α,R)] measured in pixels. That is, the N stored horizontal lines include α lines above the x axis, α lines below the x axis, and one line coincident with the x axis for a total of 2α+1 lines. The horizontal lines above the x axis which are generated from the coordinates of the right-most pixel on the top of the circle are defined by the x,y coordinates of their end points as [(−R,α), (R,α)], [(−R,α−1), (R,α−1)], [(−R,α−2), (R,α−2] . . . [(−R,1), (R,1)]. 
   The horizontal lines below the x axis which are generated from the coordinates of the right-most pixel on the top of the circle are [(−R,−α), (R,−α)], [(−R,−(α−1)), (R,−(α−1)], [(−R,−(α−2), (R,−(α−2)] . . . [(−R,−1), (R,−1)]. 
   The results of the above, for a pie having a radius of 14 pixels, are shown in  FIGS. 2-6 . Note that the algorithm for this case has determined that the coordinates of the right-most pixel at the top of the pie are (3,14). 
   In order to begin to construct from horizontal lines or rectangles, the circular pie which is to be divided into slices, the following lines have their end point coordinates stored in an array in computer memory. 
   [(−3,14), (3,14)] 
   [(−3,−14), (3,−14)] 
   [(−14,3), (14,3)] 
   [(−14,2), (14,2)] 
   [(−14,1), (14,1)] 
   [(−14,0), (14,0)] 
   [(−14,−1), (14,−1)] 
   [(−14,−2), (14,−2)] 
   [(−14,−3), (14,−3)] 
   The result of the foregoing is illustrated in  FIG. 2 . 
   The y-coordinate of the last determined right-most pixel of the pie is decremented by 1 to determine a new y-coordinate. The algorithm is again applied to determine the x-coordinate of the rightmost pixel of the pie having the new y-coordinate. In the example given, for a pie having a radius of 14 pixels, the rightmost pixel has the coordinates (6,13). 
   Referring to  FIG. 3 , the above procedure is applied to determine the following lines, the end point coordinates of which are stored in the array. 
   [(−6,13), (6,13)] 
   [(−6,−13), (6,−13)] 
   [(−13,6), (13,6)] 
   [(−13,5), (13,5)] 
   [(−13,4), (13,4)] 
   [(−13,3), (13,3)] 
   [(−13,2), (13,2)] 
   [(−13,1), (13,1)] 
   [(−13,0), (13,0)] 
   [(−13,−1), (13,−1)] 
   [(−13,−2), (13,−2)] 
   [(−13,−3), (13,−3)] 
   [(−13,−4), (13,−4)] 
   [(−13,−5), (13,−5)] 
   [(−13,−6), (13,−6)] 
   If more than one scan line is produced for the same y-coordinate, the coordinates of the end points of the longest line are stored and the coordinates of the end points of the shorter lines are discarded. 
   Each time that a new right-most x-coordinate is determined for a new decremented y-coordinate, a comparison is made between the new x-coordinate and y-coordinate to determine whether the new right-most pixel is within the 45 degrees measured along the circumference of the circle clockwise from the positive y-axis. As long as the x-coordinate of the rightmost pixel is less than the y-coordinate of the rightmost pixel, the rightmost pixel is used to generate and store a further set of horizontal lines after which the y-coordinate of the last right-most pixel in the pie is decremented by 1 and a new right-most pixel is determined. 
   Once the comparison discloses that the x-coordinate of the rightmost pixel is greater than the y-coordinate of the rightmost pixel, this procedure is halted as all of the horizontal lines necessary to draw the pie are produced after 45 degrees of the circumference of the pie have been covered. If the comparison discloses that the x-coordinate of the rightmost pixel is equal to the y-coordinate of the rightmost pixel, the pixel is included in the pie and a corresponding horizontal line is determined. 
   The y-coordinate of the last determined right-most pixel of the pie is, again, decremented by 1 to determine a new y-coordinate, i.e., 13−1=12. The algorithm is applied to determine the x-coordinate of the rightmost pixel of the pie having the new y-coordinate. In the example given, x coordinate of the right-most point on the line is found to be 7. 
   Referring to  FIG. 4 , the above procedure is applied to determine the following lines, the end point coordinates of which are stored in the array. 
   [(−7,12), (7,12)] 
   [(−7,−12), (7,−12)] 
   [(−12,7), (12,7)] 
   [(−12,6), (12,6)] 
   [(−12,5), (12,5)] 
   [(−12,4), (12,4)] 
   [(−12,3), (12,3)] 
   [(−12,2), (12,2)] 
   [(−12,1), (12,1)] 
   [(−12,0), (12,0)] 
   [(−12,−1), (12,−1)] 
   [(−12,−2), (12,−2)] 
   [(−12,−3), (12,−3)] 
   [(−12,−4), (12,−4)] 
   [(−12,−5), (12,−5)] 
   [(−12,−6), (12,−6)] 
   [(−12,−7), (12,−7)] 
   If more than one scan line is produced for the same y-coordinate, the coordinates of the end points of the longest line are stored and the coordinates of the end points of the shorter lines are discarded. 
   The y-coordinate of the last determined right-most pixel of the pie is, again, decremented by 1 to determine a new y-coordinate, i.e., 12−1=11. The algorithm is applied to determine the x-coordinate of the rightmost pixel of the pie having the new y-coordinate. In the example given, x coordinate of the right-most point on the line is found to be 9. 
   Referring to  FIG. 5 , the above procedure is applied to determine the following lines, the end point coordinates of which are stored in the array. 
   [(−9,11), (9,11)] 
   [(−9,−11), (9,−11)] 
   [(−11,9), (11,9)] 
   [(−11,8), (11,8)] 
   [(−11,7), (11,7)] 
   [(−11,6), (11,6)] 
   [(−11,5), (11,5)] 
   [(−11,4), (11,4)] 
   [(−11,3), (11,3)] 
   [(−11,2), (11,2)] 
   [(−11,1), (11,1)] 
   [(−11,0), (11,0)] 
   [(−11,−1), (11,−1)] 
   [(−11,−2), (11,−2)] 
   [(−11,−3), (11,−3)] 
   [(−11,−4), (11,−4)] 
   [(−11,−5), (11,−5)] 
   [(−11,−6), (11,−6)] 
   [(−11,−7), (11,−7)] 
   [(−11,−8), (11,−8)] 
   [(−11,−9), (11,−9)] 
   If more than one scan line is produced for the same y-coordinate, the coordinates of the end points of the longest line are stored and the coordinates of the end points of the shorter lines are discarded. 
   The y-coordinate of the last determined right-most pixel of the pie is, again, decremented by 1 to determine a new y-coordinate, i.e., 11−1=10. The algorithm is applied to determine the x-coordinate of the rightmost pixel of the pie having the new y-coordinate. In the example given, x coordinate of the right-most point on the line is found to be 10. 
   Referring to  FIG. 6 , the above procedure is applied to determine the following lines, the end point coordinates of which are stored in the array. 
   [(−10,10), (10,10)] 
   [(−10,−10), (10,−10)] 
   [(−10,10), (10,10)] 
   [(−10,9), (10,9)] 
   [(−10,8), (10,8)] 
   [(−10,7), (10,7)] 
   [(−10,6), (10,6)] 
   [(−10,5), (10,5)] 
   [(−10,4), (10,4)] 
   [(−10,3), (10,3)] 
   [(−10,2), (10,2)] 
   [(−10,1), (10,1)] 
   [(−10,0), (10,0)] 
   [(−10,−1), (10,−1)] 
   [(−10,−2), (10,−2)] 
   [(−10,−3), (10,−3)] 
   [(−10,−4), (10,−4)] 
   [(−10,−5), (10,−5)] 
   [(−10,−6), (10,−6)] 
   [(−10,−7), (10,−7)] 
   [(−10,−8), (10,−8)] 
   [(−10,−10), (10,−10)] 
   If more than one scan line is produced for the same y-coordinate, the coordinates of the end points of the longest line are stored and the coordinates of the end points of the shorter lines are discarded. 
   Each time that a new right-most x-coordinate is determined for a new decremented y-coordinate, a comparison is made between the new x-coordinate and y-coordinate to determine whether the new right-most pixel is within the 45 degrees measured along the circumference of the circle clockwise from the positive y-axis. As long as the x-coordinate of the rightmost pixel is less than or equal to the y-coordinate of the rightmost pixel, the rightmost pixel is used to generate and store a further set of horizontal lines after which the y-coordinate of the last right-most pixel in the pie is decremented by 1 and a new right-most pixel is determined. 
   Once the comparison discloses that the x-coordinate of the rightmost pixel is greater than the y-coordinate of the rightmost pixel, this procedure is halted as all of the horizontal lines necessary to draw the pie are produced after 45 degrees of the circumference of the pie have been covered as can be seen in  FIG. 6 . 
   It is sometimes desirable to create the illusion of looking at the pie chart from an angle, which can be accomplished by drawing the pie slices on an ellipse aligned with its major axis along the X-axis. Unlike circles which exhibit eight-fold symmetry, ellipses exhibit only four-fold symmetry. Hence, when the pie to be drawn is elliptical but not circular, it is necessary to continue the above described cycle through a scan of 90 degrees of the ellipse. The cycle by which the end point coordinates of the lines necessary to draw the elliptical pie are determined and stored in an array continues after the magnitude of the x-coordinate exceeds that of the y-coordinate and until the y-coordinate is equal to zero. 
   As before, when a pixel (x,y) is determined to be a right-most pixel on the ellipse, the lines [(−x,y), (x,y)] and [(−x,−y), (x,−y)] are stored in the array in memory. No exchange of x and y is possible in the case of an ellipse. However, since the entire first quadrant, i.e., 90 degrees of the ellipse, is scanned, the exchange of coordinates is not necessary to determine all of the horizontal lines needed to draw the ellipse. 
   Once the array of horizontal line end point coordinates is completed it can remain in storage and need not be recalculated while the web page remains loaded, i.e., the array need only be calculated once. 
   Having defined the pie as a group of horizontal lines, the pixels contained within each slice of the pie are then calculated, using the array of horizontal lines and the angles which define the slice. 
   The angles at which the radial boundaries of each of the slices intersect at the center of the pie are calculated from an array of data values [a 0 , a 1 , a 2 , . . . a n ] which are to be represented in the pie chart to be drawn as follows. 
   First the 360 degrees of arc forming the circumference of the pie chart are subdivided into arcs proportional in length to the magnitudes of the data. Radii extending from the center of the circular pie to the end points of each arc form slices proportional in size to the magnitudes of the data. Each datum a i  is replaced by its absolute value to avoid problems associated with negative values in pie charts. 
   The magnitudes of the data are added to compute their total, T.
 
 T=a   0   +a   1   + . . . +a   n  
 
   Datum values which are less than the smallest value to be represented by a pie slice, i.e., the threshold value (typically set to between 1% and 5% of the total), are combined by adding their values to obtain a sum to be represented by a single slice denoted “Other” if the data set [|a i |] contains more than one such small slice. This processing can be avoided if desired, by setting the threshold for inclusion in the “Other” slice to zero. 
   Consider a modified data set [b 0 , b 1 , . . . b m ], where b m  is the total of all the “too-small” slices which are to be combined into a single a slice, and each of the b i  up to b m−1  are the “large enough” absolute values each of which is to be represented in the pie by its own slice. 
   For each of the b i , the percent of the total is computed as follows:
 
 p   i   =b   i   /T× 100%
 
   These percentages are stored in an array [p 1  . . . p m ], preferably in computer memory. 
   The start and stop angles for each slice of the pie chart to be drawn are derived from the array of percentages [p1 . . . pm]. Since the complete pie is 360 degrees, or 2D radians, the angular size for the nth slice is computed in radians as ANGLEn=pn*360 degrees=pn*2D radians. 
   To adhere to the convention for business-oriented pie charts, SLICE 0  (the slice representing value b 0 ) starts at 90 degrees, i.e., at the positive y-axis, and extends clockwise for ANGLE 0  degrees, ending at (90−ANGLE 0 ) degrees. For programming purposes, it is easier to have the first slice, i.e., slice  0 , begin at 90−ANGLE 0  degrees and extend counterclockwise ANGLE 0  degrees, ending at 90 degrees. That is, the radius of the pie which coincides with one edge of the first slice to be drawn intersects the Y-axis at an angle of START 0  degrees where
 
START 0  degrees=(90 degrees−ANGLE 0  degrees)
 
   The radius of the pie which coincides with the other edge of the first slice to be drawn intersects the Y-axis at an angle of STOP 0  degrees where
 
STOP 0 =90 degrees.
 
   Subsequent angles are obtained by accumulation of angles: 
   Slice  1  (the slice representing value b 1 ) has the following start and stop angles.
 
STOP 1 =START 0 ;
 
START=STOP 1 −ANGLE 1 .
 
   Slice i (the slice representing value b i ) has the following start and stop angles.
 
STOP i =START i−1 ;
 
START i =STOP i −ANGLE i .
 
   By the nature of pie charts, the start angle of slice (i+1) is the stop angle of slice i. By using each slice&#39;s start angle as the stop angle for the succeeding slice, the number of necessary computations can be minimized and rounding errors that occur if the percentages are simply accumulated, and start and stop angles for each slice are independently calculated, can be avoided. 
   The angles of intersection for the radii bordering each slice are stored in arrays of [START] and [STOP] whereby the angles can be used to construct the pie slices. 
   Since each slice must be within the confines of the circle or ellipse which has been defined as a series of horizontal lines, the pixels of each slice can be identified by testing the pixels in each horizontal line for presence in each slice as follows. 
   Starting at the leftmost pixel of the uppermost horizontal line of the pie which is stored within the array of lines defining the pie, the coordinates of the pixel are tested for presence within a slice of the pie having a stop angle and a start angle by subjecting them to the following calculations: 
   Let:
 
 xp 1=1000*cos(start angle);
 
 yp 1=1000*sin(start angle);
 
 xp 2=1000*cos(stop angle);
 
 yp 2=1000*sin(stop angle).
 
   1) If y*xp1&gt;=x*yp1, then the point (x,y) is counterclockwise from the start angle. 
   2) If y*xp2&lt;=x*yp2, then the point (x,y) is clockwise from the stop angle. 
   In order for a point to be within a slice occupying less than 50 percent of the pie, i.e., with an angle &lt;=180 degrees, both of relationships 1) and 2) above must be true. 
   For slices which represent values greater than 50 percent of the total of the values represented by the pie, i.e., subtending an angle of more than 180 degrees, at least one of relationships 1) and 2) must be true for the point (x,y) to belong to the slice. 
   Since Javascript® is a relatively slow interpreted language, it is desirable to avoid repetitive time consuming calculations using sine and cosine functions. Hence, sin(start angle), cos(start angle), sin(stop angle) and cos(stop angle) are computed once for each slice. Those values are then used repeatedly to determine whether each pixel in the pie is in the slice bordered by radii respectively having the start angle and stop angle. 
   To further minimize processing time, floating point calculations are avoided by multiplying the results of the sin(start), cos(start angle), sin(stop) and cos(stop angle) calculations by 1000 and rounding them to integers. It is then possible to use integer multiplication, which is faster than floating point multiplication, to determine whether a given pixel is counterclockwise from the start angle and clockwise from the stop angle, in which case it is within the slice. 
   If a pixel is found not to be within the slice for which pixel presence is being tested, the pixel to the right of the tested pixel found not to be within the slice is subjected to the same test. Each pixel to the right of a pixel found not to be within the slice is tested in the same manner until either one of two events. 
   If the rightmost pixel on the horizontal line is reached and upon being tested is found not to be within the slice, the entire horizontal line is segregated from the horizontal lines to be used in drawing the slice. 
   If the test of a pixel on the horizontal line for presence within the slice is positive, the coordinates of the pixel are stored, and the next pixel to be tested for inclusion in the slice is the rightmost pixel on the same horizontal line. If the rightmost pixel is not within the slice, the pixel to the left of the last tested pixel found not to be within the slice is subjected to the same test. Each pixel to the left of a pixel found not to be within the slice is tested in the same manner until a pixel tests positive for inclusion within the slice. The coordinates of the leftmost pixel and rightmost pixel on the horizontal line within the slice are stored. 
   Thereafter, starting at the leftmost pixel of the horizontal line of the pie next beneath the top horizontal line, the cycle continues with the coordinates of each tested pixel being subjected to the calculation above. 
   Again, if the rightmost pixel on the horizontal line is reached and upon being tested is found not to be within the slice, the entire horizontal line is segregated from the horizontal lines to be used in drawing the slice. Otherwise, after a pixel tests positive for inclusion in the slice, processing continues at the rightmost pixel on the same horizontal line of the pie as before. 
   The foregoing procedure continues for each slice from the topmost horizontal line forming the pie through the bottommost horizontal line forming the pie. With the completion of the procedure for each slice, the x coordinates of the end pixels of all of the horizontal lines forming the slice, and the Y coordinate of the line are stored in an array in computer memory. These three coordinates define a clipped scan line of the pie which will be included in the respective slice. 
   In cases where a slice has radial borders which intersect at an angle greater than 180 degrees, two discontinuous segments of each horizontal line of the pie, either above or below the x-axis depending on the orientation of the slice, must be included in the slice, i.e., the slice cannot be represented by a series of single horizontal scan lines. This occurs when the slice occupies more than half the pie and is either a) at the bottom of the pie with both sides rising above the horizontal center line of the pie; or b) at the top of the slice with both sides dropping below the horizontal center line. In these cases, the y-values rising above or dropping below the center line must be represented by two scan lines each, one for the left side and one for the right side of the slice. 
   Before processing of the horizontal scan lines of the pie begins to determine the coordinates of the clipped line(s) to be included in each slice the pie, the start and stop angles for each slice of the pie are tested to see if their difference is greater than 180 degrees and, if so, whether or not both angles are above or below the horizontal centerline (X-axis) of the pie. 
   If the slice&#39;s start angle is in the first quadrant of the pie, i.e., the start angle is &gt;=0 degrees and &lt;=90 degrees and its stop angle is in the fourth quadrant, i.e., the stop angle is &gt;270 degrees and &lt;=360 degrees, the slice subtends and angle of more than 180 degrees and fills the entire bottom half of the circular pie. For positive Y-values, 2 spaced horizontal line segments may be needed for each Y-value. 
   If the slice&#39;s start angle is in the third quadrant of the pie, i.e., the start angle is &gt;180 degrees and &lt;=270 degrees and its stop angle is in the second quadrant of the pie, i.e., the stop angle is &gt;90 degrees and &lt;=180 degrees, the slice subtends and angle of more than 180 degrees and fills the entire top half of the circular pie. For negative Y-values, 2 spaced horizontal line segments may be needed for each Y-value. 
   If neither condition applies, the slice never needs more than one continuous horizontal line for a given Y-value. 
   In the case of a slice found to require two horizontal line segments within each horizontal line of the pie, the above procedure is modified as follows. 
   First the above method for finding the leftmost and rightmost pixels in a slice which is wholly above or wholly below the x-axis is performed. If both the leftmost and rightmost pixel are on the same side of the y-axis, i.e., the x coordinates of both the leftmost and rightmost pixels are &lt;=0, or the x coordinates of both the leftmost and rightmost pixels are &gt;=0), then there is only one horizontal line for this Y-value. Since the leftmost and rightmost pixels that define the line are already known, the line is defined as [leftmost, rightmost, Y-value] and the foregoing method is then applied for the next Y-value. 
   If the leftmost and rightmost pixels are on the different sides of the Y-axis, i.e., the x coordinate of the leftmost pixel is &lt;=0 and the x coordinate of the rightmost pixel is &gt;=0, or the x coordinate of the leftmost pixel is &gt;=0 and the x coordinate of the rightmost pixel is &lt;=0, then two spaced horizontal line segments are required for the y-value. 
   If the leftmost pixel for the Y-value is &lt;=0 and the rightmost pixel is &gt;=0 there will be two horizontal line segments for the Y-value, one on the left half (its pixels will all have x&lt;=0) and one on the right half (its pixels will all have x&gt;=0). It then remains necessary to determine the rightmost pixel in the left-half line segment and the leftmost pixel in the right-half line segment. 
   The rightmost pixel in the left-half line segment is determined by starting at x=0 and moving to the left. The first pixel found to be in the slice, which could be x=0 itself, will be the rightmost pixel in the left-half line segment. The left-half line segment is then defined as [leftmost, rightmost-left-half, Y-value]. 
   The leftmost pixel in the right-half line segment is found by starting at x=1 and moving to the right. The first pixel we found to be in the slice, which could be x=1 itself, is the leftmost pixel in the right-half line segment. The right-half line segment is then defined as [leftmost, rightmost-left-half, Y-value]. 
   An alternative modification of the procedure is as follows. 
   If the start and stop angles of the slice are in the upper half of the pie, i.e., above the horizontal centerline of the slice or above the x-axis, the following takes place. 
   Starting at the leftmost pixel of the uppermost horizontal line of the pie which is stored within the array of lines defining the pie, the coordinates of the pixel are tested to determine whether the pixel is in the slice. 
   If the pixel is not within the slice, the pixel to the right of the tested pixel found not to be within the slice is subjected to the same test. Each pixel to the right of a pixel found not to be within the slice is tested in the same manner until either one of two events. 
   As in the case where only one segment of a horizontal line of the pie is required in the slice, if the rightmost pixel on the horizontal line is reached and upon being tested is found not to be within the slice, the entire horizontal line is segregated from the horizontal lines to be used in drawing the slice. 
   If the test of a pixel on the horizontal line for presence within the slice is positive, the x coordinate of the pixel is stored, and each pixel to the right of the pixel found to be within the slice is sequentially tested until a pixel on the horizontal line is found not to be within the slice. The x coordinate for the last pixel found to be within the slice is stored and the next pixel to be tested for inclusion in the slice is the rightmost pixel of the pie on the same horizontal line. 
   If the rightmost pixel is not within the slice, the pixel to the left of the last tested pixel found not to be within the slice is subjected to the same test. Each pixel to the left of a pixel found not to be within the slice is tested in the same manner until a pixel tests positive for inclusion within the slice. The x coordinate of the pixel which tested positive is stored, and each pixel to the left of the pixel found to be within the slice is sequentially tested until a pixel on the horizontal line is found not to be within the slice. The x coordinate for the last pixel found to be within the slice is stored. 
   The four X coordinates which have been stored, along with the Y coordinate of the horizontal line define the endpoints of two segments of the horizontal line which are within the slice. 
   Thereafter, starting at the leftmost pixel of the next lower horizontal line of the pie, the cycle continues until the center horizontal line in the pie (having a Y coordinate of 0) has been tested for pixels to be included in the slice. 
   Processing of the pixels in horizontal lines below the horizontal centerline continues in the same fashion as when a slice subtends and angle of less than 180 degrees. That is after the leftmost pixel of the slice is located, the next pixels to be processed are the rightmost pixel on the same horizontal line of the pie and successive pixels to the left until the rightmost pixel on the line is identified. During processing of pixels on horizontal lines below the horizontal centerline, only two x coordinates are stored for each line as only a single continuous segment of the line will be included in the slice. 
   Again, if the rightmost pixel on the horizontal line is reached and upon being tested is found not to be within the slice, the entire horizontal line is segregated from the horizontal lines to be used in drawing the slice. Otherwise, after a pixel tests positive for inclusion in the slice, processing continues at the rightmost pixel on the same horizontal line of the pie as before. 
   If the start and stop angles of the slice are in the lower half of the pie, i.e., below the horizontal centerline of the slice, processing of the pixels in horizontal lines above the horizontal centerline begins at the left end of the uppermost left horizontal line in the pie in the same fashion as when a slice subtends and angle of less than 180 degrees. That is after the leftmost pixel of the slice is located, the next pixels to be processed are the rightmost pixel on the same horizontal line of the pie and successive pixels to the left until the rightmost pixel on the line is identified. During processing of pixels on horizontal lines above the horizontal centerline, only two x coordinates are stored for each line as only a single continuous segment of the line will be included in the slice. If the rightmost pixel on the horizontal line is reached and upon being tested is found not to be within the slice, the entire horizontal line is segregated from the horizontal lines to be used in drawing the slice. Otherwise, after a pixel tests positive for inclusion in the slice, processing continues at the rightmost pixel on the same horizontal line of the pie as before. 
   Processing to locate pixels in the slice within each horizontal line in the pie continues from line to line, downwardly, until the center horizontal line is processed. Thereafter, starting at the leftmost pixel of the first horizontal line of the pie below the center horizontal line, the coordinates of the pixel are tested to determine whether the pixel is in the slice. 
   If the pixel is not within the slice, the pixel to the right of the tested pixel found not to be within the slice is subjected to the same test. If the test is positive, i.e., the pixel is within the slice, the x coordinate of the pixel is stored, and each pixel to the right of the pixel found to be within the slice is sequentially tested until a pixel on the horizontal line is found not to be within the slice. The x coordinate for the last pixel found to be within the slice is stored and the next pixel to be tested for inclusion in the slice is the rightmost pixel of the pie on the same horizontal line. 
   If the rightmost pixel is not within the slice, the pixel to the left of the last tested pixel found not to be within the slice is subjected to the same test. Each pixel to the left of a pixel found not to be within the slice is tested in the same manner until a pixel tests positive for inclusion within the slice. The x coordinate of the pixel which tested positive is stored, and each pixel to the left of the pixel found to be within the slice is sequentially tested until a pixel on the horizontal line is found not to be within the slice. The x coordinate for the last pixel found to be within the slice is stored. 
   The four X coordinates which have been stored, along with the Y coordinate of the horizontal line define the endpoints of two segments of the horizontal line which are within the slice. 
   Thereafter, starting at the leftmost pixel of the next lower horizontal line of the pie, the cycle continues until the lowermost (bottom) horizontal line in the pie has been tested for pixels to be included in the slice. 
   EXAMPLE 
   Consider the data set 1, 1, 8, 2 which is to be illustrated in a pie chart. From the foregoing, the angles of the slices which will illustrate the data are:
 
1/12*360 degrees=30 degrees
 
1/12*360 degrees=30 degrees
 
8/12*360 degrees=240 degrees
 
2/12*360 degrees=60 degrees
 
   The start and stop angles of the slices are computed as follows.
 
STOP 0 =90 degrees
 
   As shown in  FIG. 7 , slice  1  (the slice representing first value 1) has the following start and stop angles.
 
STOP 1 =START 0 =90 degrees
 
START 1 =STOP 1 −ANGLE 1 =90−30=60 degrees
 
   As shown in  FIG. 8 , slice  2  (the slice representing second value 1) has the following start and stop angles.
 
STOP 2 =START 1 =60 degrees
 
START 2 =STOP 2 −ANGLE 2 =60−30=30 degrees
 
   As shown in  FIG. 9 , slice  3  (the slice representing third value 8) has the following start and stop angles.
 
STOP 3 =START 2 =30 degrees
 
START 3 =STOP 3 −ANGLE 3 =30−240=−210 degrees or +150 degrees
 
   Slice  4  (the slice representing fourth value 2) has the following start and stop angles.
 
STOP 4 =START 2 =−210 degrees
 
START 4 =STOP 4 −ANGLE 4 =−210−60=−270 degrees or +90 degrees.
 
   Once all of the line segments forming each slice of the pie have been identified by storing the x coordinates of the end pixels of each line, and the Y coordinate of the line, in an array in computer memory, a DIV is created for each of the line segments. The class of each DIV is the slice number, e.g. “1” for slice  1 . The DIV is given absolute positioning, so its position and size are solely determined by the dimensions calculated from the scan line itself. 
   Each DIV has a color which is also dependent on the slice number. The “slice colors” can be specified programmatically as an array of colors, or obtained from a cascading style sheet. In either case, if there are more slices than colors, the modulus function is used to loop back to the beginning of the list of colors after the all of the colors in the list have been used in respective slices. 
   The code for creating the DIV elements provides an option for specifying event-handling attributes. For example, to enable mouse rollover (tool tip) functionality, the onmouseover and onmouseout attributes are set to Javascript® functions. The first function, assigned to onmouseover, sets the text of a normally invisible, absolutely positioned “tool tip DIV” to show the name of the slice, its value and its percentage of the total as shown in  FIG. 10 . The function also positions the DIV relative to the mouse and then makes it visible. The function assigned to onmouseout simply makes the tool tip DIV invisible again. 
   A similar technique can be used to assign a function which puts up a small alert displaying descriptive information about a slice whenever the user double-clicks any of the DIVs included in the slice. 
   Finally, the DIVs are used to represent each slice using standard DHTML techniques (absolutely positioned DIV elements), which are appended to the current web page and therefore automatically drawn by the browser. 
   Instead of storing the coordinates of the end pixels of each line in the pie, it is possible to define each rectangle of adjacent horizontal lines having the same length by storing the coordinates of the upper leftmost pixel in the rectangle, and the height and width of the rectangle. From this information, it is possible to calculate the coordinates of all pixels in the rectangle. 
   It is to be appreciated that the foregoing is a description of a preferred embodiment of the invention to which modifications may be made without departing from the spirit and scope of the invention.