The Column Chart Bean

This bean will generate a Column chart bean based upon the data contained within several data objects. We have split the information required, to produce the chart image, into the following objects,

  1. Chart data object
  2. Legend data object
  3. Title data object
  4. Xlabels data object
  5. Ylabels data object
  6. Series and Column data object
  7. Min / Max data object
  8. Image data object
  9. Text data object

Each of these objects is a property of the Column Chart Bean and as such, once the object is created your application can simply set the relevant property within the bean.

Set and Get method summary,

Legend Properties Object Get and Set methods
getLegenddata()
setLegenddata(Legenddata object)

Chart Properties Object Get and Set methods
getChartdata()
setChartdata(Chartdata object)

Image Object Get and Set methods
getImagedata()
setImagedata(Imagedata object)

Text Object Get and Set methods
getTextdata()
setTextdata(Textdata object)

Title Object Get and Set methods
getTitledata()
setTitledata(Titledata object)

X Labels Object Get and Set methods
getXlabelsdata()
setXlabelsdata(Xlabelsdata object)

Y Labels Object Get and Set methods
getYlabelsdata()
setYlabelsdata(Ylabelsdata object)

Series data Object Get and Set methods
getSeriesdata()
setSeriesdata(Seriesdata object)

Min Max Object Get and Set methods
getMinmaxdata()
setMinmaxdata(Minmaxdata object)

Below we describe each of the objects in detail and explain their role within the chart bean. You will see in the applet and application examples that using the column chart bean is simple and straight forward. With all the data required being contained within the data objects, the process is simply one of creating an instance of the columnchart bean, creating the data objects and finally setting the object properties of the bean.

1. The Chart Data Object

This object contains all the general information which define the following characteristics of the chart.

Three D Boolean flag indicating whether the chart should be drawn in 3D or 2D mode.
Grid Boolean flag indicating whether the chart should be drawn with a grid or not.
Axis Boolean flag indicating whether the chart should be drawn with axis or not.
Y Labels Boolean flag indicating whether the Y axis labels should be automatically generated or not
Outline Boolean flag indicating whether the columns should be emphasised with an outline, only relevant in 3D mode.
Legend Boolean flag indicating whether the legend should be automatically generated from the series data.
Width The width of the image to be produced
Height The height of the image to be produced
Number of Columns Max number of data columns within each series
Number of Rows Number of horizontal rows
Vertical Spacing Vertical spacing of the rows in pixels
Horizontal Spacing Horizontal spacing in pixels between the data points
Grid X position Left position of the grid
Grid Y position Bottom position of the grid
Depth 3D The depth in pixels of the 3D effect
N Decimal Places The number of the decimal places to use when displaying values
Column Width The width of the columns in pixels
Chart Scale The value that each vertical interval represents
Chart Start Y Value The value that the chart base line should represent
Grid Color The color of the Grid
Axis Color The color of the axis
Floor Color The x-axis floor color in 3D mode
Label Color Text color of the labels
Background Color Background color
Background Color Background color
Outline Color Column Outline Color

Example code to create the Chart data object and then add this into an instance of the column chart bean called columnchart.

     private Vector chartdata;
     chartdata = new Vector();
     chartdata.addElement(new Chartdata(true,  // threeD
                                        true,  // grid
                                        true,  // axis
                                        true,  // ylabels
                                        false, // outline
                                        true,  // legend
                                        600,   // width
                                        320,   // height
                                        12,    // number of columns,
                                        7,     // number of nrows,
                                        20,    // vertical spacing,
                                        3,     // number of series,
                                        30,    // horizontal spacing,
                                        95,    // gridxpos,
                                        200,   // gridypos,
                                        15,    // depth3D,
                                        2,     // ndecplaces,
                                        10,    // Column width
                                        1000,  // chartScale,
                                        5000,  // chartStartY,
                                        new Color(100,100,100), // gridColor,
                                        new Color(0,0,0),       // axisColor,
                                        new Color(100,100,100), // floorColor,
                                        new Color(0,0,0),       // labelColor,
                                        new Color(255,255,231), // backgroundColor
                                        new Color(200,200,200)  // column outline color
     ));
         columnchart.setChartdata(chartdata);


2. Legend Data Object

This object provides the chart bean with the necessary information with which to produce the automatic legend for the chart. The properties are,

Title The legend title text
Color Text color
Font Text Font
Position Top left position of the legend area

Example code to create the Legend data object and then add this into an instance of the column chart bean called columnchart.

   private Vector legenddata;
   legenddata = new Vector();
legenddata.addElement(new Legenddata("Products", // Legend title new Color(0,0,0), // Legend text color new Font("Courier",Font.PLAIN,12), // Legend text font new Point(475,100) // Legend top-left position (x,y) ));
columnchart.setLegenddata(legenddata);

3. Title data object

The title data object contains one element for each title that is displayed upon the chart. e.g Main Title, X-axis title and Y-axis title. Each title element is made up of the following properties,

Text Title Text
Color Text Color
Font Text Font
Position Tile position

The following example code demonstrates how to construct a Title Data object ( titledata) which contains three elements representing A Main Title, The X-axis title and The Y-axis title.

   private Vector titledata;
   titledata = new Vector(); 
titledata.addElement(new Titledata("Sales",new Color(0,0,0),
new Font("TimesRoman",Font.BOLD + Font.ITALIC,24),
new Point(100,20)));
titledata.addElement(new Titledata("Fiscal Period",new Color(0,0,0),
new Font("TimesRoman",Font.BOLD,14),
new Point(220,260)));
titledata.addElement(new Titledata("Value in £",new Color(0,0,0), new Font("TimesRoman",Font.BOLD,14),
new Point(10,225)));
columnchart.setTitledata(titledata);

4. Xlabels data object

The Xlabels data object defines each of the labels along the x-axis of the chart. Each element in this object defines the following characteristics,

Text Label Text
Color Text Color
Font Text Font
Y-position Y position for this label
Orientation The label orientation ( 0 to 6 )

In this example we have twelve labels representing each month of the year,

       private Vector xlabelsdata;
       xlabelsdata = new Vector();
xlabelsdata.addElement(new Xlabelsdata("Jan",new Color(0,0,0),new Font("Courier",Font.PLAIN,12), 220, 0)); xlabelsdata.addElement(new Xlabelsdata("Feb",new Color(0,0,0),new Font("Courier",Font.PLAIN,12), 220, 0));
xlabelsdata.addElement(new Xlabelsdata("Mar",new Color(0,0,0),new Font("Courier",Font.PLAIN,12), 220, 0));
xlabelsdata.addElement(new Xlabelsdata("Apr",new Color(0,0,0),new Font("Courier",Font.PLAIN,12), 220, 0));
xlabelsdata.addElement(new Xlabelsdata("May",new Color(0,0,0),new Font("Courier",Font.PLAIN,12), 220, 0));
xlabelsdata.addElement(new Xlabelsdata("Jun",new Color(0,0,0),new Font("Courier",Font.PLAIN,12), 220, 0));
xlabelsdata.addElement(new Xlabelsdata("Jul",new Color(0,0,0),new Font("Courier",Font.PLAIN,12), 220, 0));
xlabelsdata.addElement(new Xlabelsdata("Aug",new Color(0,0,0),new Font("Courier",Font.PLAIN,12), 220, 0));
xlabelsdata.addElement(new Xlabelsdata("Sept",new Color(0,0,0),new Font("Courier",Font.PLAIN,12), 220, 0));
xlabelsdata.addElement(new Xlabelsdata("Oct",new Color(0,0,0),new Font("Courier",Font.PLAIN,12), 220, 0));
xlabelsdata.addElement(new Xlabelsdata("Nov",new Color(0,0,0),new Font("Courier",Font.PLAIN,12), 220, 0));
xlabelsdata.addElement(new Xlabelsdata("Dec",new Color(0,0,0),new Font("Courier",Font.PLAIN,12), 220, 0));
columnchart.setXlabelsdata(xlabelsdata);

5. Ylabels data object

This object defines just two characteristics of the Y-labels of the chart.

Color Y - Labels Color
Font Y - Label Font
   private Vector ylabelsdata;
   ylabelsdata = new Vector();
   ylabelsdata.addElement(new Ylabelsdata(new Color(0,0,0),new Font("Courier",Font.PLAIN,10)));
   columnchart.setYlabelsdata(ylabelsdata);

6. Series and Column data object

This object is actually two objects which hold the information about all the data point to be plotted. The series data object contains information which applies to all columns within a series and contains a column data object. The column data object contains one element for each column in the series.

Series Data Object

Series Name Series name text used in the legend
Column Color Color of the Columns to be plotted
Column data object see below

Column Data object

value value of this column
display value flag boolean flag to indicate whether this value should be displayed

The following code demonstrates how to create the objects that are required to represent 3 series of data each with upto 12 data columnss. Note series 2 only contains 6 columns and therefore the plot for this series would cease there.

   private Vector seriesdata;
private Vector columndata;
seriesdata = new Vector();
   // Series 1
   columndata = new Vector();
   columndata.addElement(new Columndata(5100, false));
   columndata.addElement(new Columndata(5500, false));
   columndata.addElement(new Columndata(6400, false));
   columndata.addElement(new Columndata(8200, false));
   columndata.addElement(new Columndata(8900, false));
   columndata.addElement(new Columndata(9300, false));
   columndata.addElement(new Columndata(7000, false));
   columndata.addElement(new Columndata(6300, false));
   columndata.addElement(new Columndata(7000, false));
   columndata.addElement(new Columndata(7400, false));
   columndata.addElement(new Columndata(8100, false));
   columndata.addElement(new Columndata(11000, false));
   seriesdata.addElement(new Seriesdata("Product X", new Color(255,50,50), columndata));
   // Series 2
   columndata = new Vector();
   columndata.addElement(new Columndata(8300, false));
   columndata.addElement(new Columndata(7100, false));
   columndata.addElement(new Columndata(6550, false));
   columndata.addElement(new Columndata(5300, false));
   columndata.addElement(new Columndata(5200, false));
   columndata.addElement(new Columndata(5050, false));
   seriesdata.addElement(new Seriesdata("Product Y", new Color(255,100,255), columndata));
   // Series 3
   columndata = new Vector();
   columndata.addElement(new Columndata(5700, false));
   columndata.addElement(new Columndata(5150, false));
   columndata.addElement(new Columndata(5050, false));
   columndata.addElement(new Columndata(5150, false));
   columndata.addElement(new Columndata(5300, false));
   columndata.addElement(new Columndata(5700, false));
   columndata.addElement(new Columndata(6500, false));
   columndata.addElement(new Columndata(7100, false));
   columndata.addElement(new Columndata(7700, false));
   columndata.addElement(new Columndata(8400, false));
   columndata.addElement(new Columndata(8200, false));
   columndata.addElement(new Columndata(8600, false));
   seriesdata.addElement(new Seriesdata("Product Z", new Color(50,255,50), columndata));
   columnchart.setSeriesdata(seriesdata);

7. Min / Max data object

This object provides the facility for adding limit lines running across the chart (e.g. average level, Min Max levels, Target levels ). The properties for this object are,

Name Text for the limit line
Color Color of the limit line
Font Font for the text
Value Value at which the line to be plotted
Style The style ranging from 0 to 3

The following code defines two limit lines representing Break Even and Target lines on a Sales chart.

   private Vector minmaxdata;
   minmaxdata = new Vector();
   minmaxdata.addElement(new MinMaxdata("Break Even",new Color(100,0,0), new Font("Arial",Font.BOLD,12),6300,0));
   minmaxdata.addElement(new MinMaxdata("Target",new Color(0,100,0), new Font("Arial",Font.BOLD,12),8700,1));
   columnchart.setMinmaxdata(minmaxdata);

8. Image data object

This object provides the facility for adding bespoke images to the chart area. For example you may wish to incorporate a company logo or product image. The properties for this object are,

Image file name The image filename
Image The image object
Position The position on the chart to draw this image

The following code demonstrates how to create the image data object for three images, meter1.gif, tools1.gif and drill1.gif. (Note : downloadImage(); is a bespoke function for loading an image file into a java image object)

   private Vector imagedata;
   imagedata = new Vector();
   imagedata.addElement(new Imagedata("meter1.gif", downloadImage("meter1.gif"), new Point(570,100)));
   imagedata.addElement(new Imagedata("tools1.gif", downloadImage("tools1.gif"), new Point(570,118)));
   imagedata.addElement(new Imagedata("drill.gif", downloadImage("drill1.gif"), new Point(570,136)));
   columnchart.setImagedata(imagedata);

9. Text data object

The final object provides the facility for adding bespoke lines of text onto the chart image. This can be used for additional descriptions or notes on the chart area. The properties of each text element are,

Text The text to be displayed
Color Text Color
Font Text Font
Position Position of the text

The following example code creates a Textdata object with three elements ( line of text ),

   private Vector textdata;
   textdata = new Vector();
   textdata.addElement(new Textdata("Notes:", // Text line 1
                                    new Color(100,0,0), // text color
                                    new Font("Courier",Font.BOLD,12), // text font
                                    new Point(345,260) // text position (x,y)
   ));
   textdata.addElement(new Textdata("Product Y was discontinued", //    Text line 2
                                    new Color(0,0,0), // text color
                                    new Font("Courier",Font.PLAIN,12), // text font
                                    new Point(350,272) // text position (x,y)
   ));
   textdata.addElement(new Textdata("in June 2000.", // Text line 3
                                    new Color(0,0,0), // text color
                                    new Font("Courier",Font.PLAIN,12), // text font
                                    new Point(350,284) // text position (x,y)
   ));
   columnchart.setTextdata(textdata);

 

There are no further properties of this bean. It is recommended that, to fully appreciate how to incorporate this bean into your own applications, that you spend some time looking at the applet and application examples.