2
Building Basic Static Charts

2.2.1 Building a Line Chart

Line charts are one of the most commonly used types of charts. This section describes a Java application that creates the following line chart:

The following example shows the code that creates this chart:

//Import the Java AWT package.

import java.awt.*;


//Import Oracle Chart Builder packages.                                  [1]

import oracle.charts.*;

import oracle.charts.axischart.*;

import oracle.charts.types.*;


public class linechart1 extends Frame {


    // Chart data, defined inline.                   

    // Monthly timestamps for 2000.                                      [2]

    public final static java.sql.Date MonthlyTimestamps[] =

    {

        java.sql.Date.valueOf("2000-01-01"),

        java.sql.Date.valueOf("2000-02-01"),

        java.sql.Date.valueOf("2000-03-01"),

        java.sql.Date.valueOf("2000-04-01"),

        java.sql.Date.valueOf("2000-05-01"),

        java.sql.Date.valueOf("2000-06-01"),

        java.sql.Date.valueOf("2000-07-01"),

        java.sql.Date.valueOf("2000-08-01"),

        java.sql.Date.valueOf("2000-09-01"),

        java.sql.Date.valueOf("2000-10-01"),

        java.sql.Date.valueOf("2000-11-01"),

        java.sql.Date.valueOf("2000-12-01")

    };


    // Define the values for the Y-axis--Exports to Canada.              [3]

    public final static double ExportsCA[] =

    {

        13604.5, 14968.7, 17085.7, 14794.0, 15834.0, 16054.0,

        12153.0, 15325.0, 14847.4, 15725.1, 15159.3, 13390.4

    };


    public static void main(String[] argv)

    {

        // Dimensions of chart.

        int Chart_width = 400, Chart_height = 200;


        // Create a new frame and set its size.                          [4]

        Frame f = new Frame();

        f.setSize(Chart_width + 10, Chart_height + 40);


        try {

            // Create a new AxisChart object.                            [5]

            AxisChart MyAxisCh = new AxisChart();


            // Set the size of the chart.

            MyAxisCh.setSize(Chart_width, Chart_height);                 [6]


            // Load the timestamps from the MonthlyTimestamps array.     [7]

            MyAxisCh.setXSeries(MonthlyTimestamps);


            // Load the values for the Y-axis from the ExportsCA array.  [8]

            MyAxisCh.setYSeries("Canada", ExportsCA);


            // Set the chart title.                                      [9]

            MyAxisCh.getTitle().setText("Exports to Canada");


            // Add the chart to the frame.                              [10]

            f.add(MyAxisCh);


        } catch (ChartException e)

            { System.out.println(e.getMessage()); }


        f.show();

    }

}

The numbers in the example correspond to the numbers in the following list, which describes the example in detail:

1. The application imports the Chart Builder packages that you need for your chart. This example uses three packages.

2. To make it easier to follow the example, the values for the X-axis are defined directly in the code, in the MonthlyTimestamp array. In most cases, you would load data from a database, a text file, an input stream, or using the frequency-based setXSeries( ) method. The frequency-based setXSeries( ) method uses start and end timestamps with an interval.

3. To make it easier to follow the example, the Y-axis values are defined directly in the code. In most cases, you would load the values from a database, a text file, or an input stream.

4. Because this is a Java application, you must create a container, such as a frame to display the chart.

5. The AxisChart( ) constructor creates a new axis chart object. In this example, the object is named MyAxisCh.

6. The setSize( ) method specifies the width and height of the chart by referring to variables that are initialized earlier in the code.

7. The setXSeries( ) method loads the data for the X-axis. In this example, it loads the timestamps from the MonthlyTimestamp array, which was previously initialized with data. The setXSeries( ) method accepts an array of type Date or String as input. If the array is of type Date, Chart Builder labels the X-axis automatically, using the full date or abbreviations depending on the size of the chart and the amount of data. Because of the size of the chart specified for this example, Chart Builder uses the initial letters of each month.

8. The setYSeries( ) method loads the data for the Y-axis. In this example, it loads the values from the ExportsCA array, which was initialized earlier in the code. The Y-axis series is named Canada. The setYSeries( ) method accepts an array of type double as input.

9. The getTitle( ) method specifies the title of the chart.

10. The java.awt.frame.add( ) method adds the chart to the frame.

When you run the Java application, Chart Builder creates the chart and displays it in a frame.

2.2.2 Building an Area Chart

Building an area chart is similar to building a line chart or any vertical axis chart. To specify an area chart, you use the setSeriesGraphType( ) method to set the type of graph to AREA for each Y-axis series.

For example, to change the line chart example in Section 2.2.1 to an area chart, use the following code:

MyAxisCh.setSeriesGraphType("Canada", AxisChart.AREA);

The following figure shows the chart in Section 2.2.1 after it is modified to be an area chart:

2.2.3 Building a Bar Chart

Building a bar chart is similar to building a line chart or any vertical axis chart. To specify a bar chart, you use the setSeriesGraphType( ) method to set the type of graph to BAR for each Y-axis series.

For example, to change the line chart example in Section 2.2.1 to a bar chart, use the following code:

MyAxisCh.setSeriesGraphType("Canada", AxisChart.BAR);

The following figure shows the chart after it is modified to be a vertical bar chart:

The previous examples loaded an array of type Dates into the X-axis. You can create axis charts that load an array of type String into the X-axis. You can use any type of axis chart, although bar charts are often best in conveying the meaning of this type of data.

To create a chart that loads an array of type String into the X-axis, you must define the array of strings, as shown in the following example:

// Define the array of strings.

public final static String AirportsLabels[] =

                               {"ATL","ORD", "LAX", "LHR","DFW",

                                "HND", "FRA", "CDG", "SFO", "AMS" };

 

Then, you pass the array to the setXSeries( ) method, as shown in the following example:

MyAxisCh.setXSeries(AirportsLabels);

The following figure shows the resulting bar chart:

2.2.4 Building a Stock Chart

Chart Builder supports three types of stock charts:

• High-Low-Close: The high, low, and close values are displayed for each timestamp. A vertical line segment indicates the low and high price; a marker connected to the vertical line segment indicates the closing price.

• Open-High-Low-Close: The open, high, low, and close values are displayed for each timestamp. A vertical line segment indicates the low and high price. A marker connected to the left side of the vertical line segment indicates the opening price; a marker connected to the right side of the vertical line segment indicates the closing price.

• Candlestick: The open, high, low, and close values are displayed for each timestamp. The opening and closing prices are represented by a color-coded rectangle, known as the body. A white rectangle indicates that the closing price was higher than the opening price. A black rectangle indicates that the closing price was lower than the opening price. The low and high prices are represented by a vertical line segment, known as the shadow.

Building a stock chart is similar to building any vertical axis chart. The primary difference is that you must use one of the following methods to load the data into a stock chart:

• For High-Low-Close charts, use the setHiLoCloseSeries( ) method and pass three arrays of values to it.

• For Open-High-Low-Close charts, use the setOpenHiLoCloseSeries( ) method and pass four arrays of values to it.

• For Candlestick charts, use the setCandlestickSeries( ) method and pass four arrays of values to it.

The following example shows the code that is specific to a stock chart (in this case, an Open-High-Low-Close chart):

// Load the OpenHiLoClose series.

MyAxisCh.setOpenHiLoCloseSeries("ACME", Open, High, Low, Close);

The following figure shows the resulting Open-High-Low-Close chart:

2.2.5 Building a Horizontal Bar Chart

You can use Chart Builder to build horizontal bar charts or to easily change vertical charts to horizontal bar charts.

Building a horizontal bar chart is similar to building a vertical axis chart. Note the following differences:

• The setXSeries( ) method, which populates the vertical axis in a horizontal chart, accepts only an array of strings as input. Chart Builder uses the strings in the array for the labels for the X-axis. The following example shows the array declaration and the call to the setXSeries( ) method:

  public final static String USExportsLabels[] =
  
                             {"Canada", "Mexico", "Japan"};
  
  
  MyAxisCh.setXSeries(USExportsLabels);
  
  

• In horizontal charts, the setYSeries( ) method defines the horizontal axis and the setXSeries( ) method defines the vertical axis. This allows you to easily change a vertical chart to a horizontal chart.

• The setYSeries( ) method, which populates the horizontal axis in a horizontal chart, accepts an array of type double as input.

• You call the setChartOrientation( ) method, specifying HORIZONTAL, as shown in the following example:

  MyAxisCh.setChartOrientation(AxisChart.HORIZONTAL);
  
  

• You set the graph type to BAR, using the setSeriesGraphType( ) method, as shown in the following example:

  MyAxisCh.setSeriesGraphType("Canada", AxisChart.BAR);
  
  

The following example shows an excerpt from a Java application that creates a horizontal bar chart:

.

.

.

    public final static String USExportsLabels[] =

                               {"Canada", "Mexico", "Japan"};

    public final static double USExports[] = {13390.0, 8136.0, 5824.0};

.

.

.

         // Create a new AxisChart object.

         AxisChart MyAxisCh = new AxisChart();


         // Set the orientation of the chart to be horizontal.

         MyAxisCh.setChartOrientation(AxisChart.HORIZONTAL);


         // Set the size of the chart.

         MyAxisCh.setSize(Chart_width, Chart_height);


         // Set the title text.

         MyAxisCh.getTitle().setText("U.S. Exports");


         // Load the data.

         MyAxisCh.setXSeries(USExportsLabels);

         MyAxisCh.setYSeries("USexports", USExports);


         //Set the graph type.

         MyAxisCh.setSeriesGraphType("USExports", AxisChart.BAR);

.

.

.

The following figure shows the resulting horizontal bar chart:

For complete examples of creating axis charts, see the axischart subdirectory of the Chart Builder demos directory.

2.4.1 Loading Data from a Text File

Using the Chart Builder class TimeSeriesFileReader, you can load data from a text file into an axis chart. This class, part of the oracle.charts.io package, reads data from files and converts the data into arrays suitable for populating charts.

This class supports only vertical, not horizontal, axis charts. It accepts only Date (java.util.Date) and Number data types, including locale-specific formats of dates and numbers. It ignores any other data, such as text data, in the file.

Chart Builder is flexible in its support of the format of the data. It supports comma-separated values, space-separated values, and tab-separated values. For example, the following formats are valid:

DATE, NUMBER[, NUMBER][, NUMBER] ...[, NUMBER]

DATE  NUMBER  [NUMBER]  [NUMBER] ... [NUMBER]  

DATE <tab> NUMBER [<tab>NUMBER] [<tab>NUMBER] ... [<tab>NUMBER]

Chart Builder accepts any Java Number type and converts it to the type double. Each data value of type double that is associated with a date value is referred to as an observation. You can have an unlimited number of observations associated with a date value, but all date values must have the same number of observations.

To load data from a text file into a vertical axis chart, take the following basic steps:

1. Create a new TimeSeriesFileReader object and read the contents of the file into the object using the readFile( ) method. Chart Builder converts the data to arrays of dates and observations.

   TimeSeriesFileReader tsReader = new TimeSeriesFileReader();
   
   tsReader.readFile("myfile.txt");
   
   

2. Retrieve the array of dates using the getDates( ) method:

   java.util.Date FileDates[] = tsReader.getDates();
   
   

3. Retrieve the array of observations using the getObservations( ) method:

   double FileObs[] = tsReader.getObservations();
   
   

   If each date value is associated with more than one observation, resulting in more than one array of observations, you use the getObservations( ) method for each array. For example, if the file contains two arrays of observations, you could use the following code to retrieve the arrays:

   double FileObs[] = tsReader.getObservations(0)
   
   double FileObs2[] = tsReader.getObservations(1)
   
   

   To determine the number of arrays of observations, you can use the getObservationCount( ) method, as shown in the following example:

   double FileObs[] = tsReader.getObservations(0)
   
   ObsCount = tsReader.getObservationCount();
   
   if (ObsCount == 2)
   
       FileObs2 tsReader.getObservations(1);
   
   

Assume that you have a text file that contains loan rates for 30-year fixed mortgages and for bank prime rates. This file, called loanrate.txt, contains the following data:

Date          Mortgage    Prime

01/01/2000     8.2100      8.50

02/01/2000     8.3250      8.73

.

.

.

12/01/2000     7.3820      9.50

You can embed other characters besides dates and numbers in the text file. Chart Builder ignores these characters.

The following example shows excerpts from a Java application that are pertinent to reading data from a file:

import java.awt.*;


import oracle.charts.*;

import oracle.charts.Chart;

import oracle.charts.axischart.*;

import oracle.charts.types.*;

import oracle.charts.legend.*;

import oracle.charts.io.*;


public class readloanrate extends Frame {

    

    //Arrays read in from the file.

    static java.util.Date FileDates[];

    static double FileObs[];

    static double FileObs2[];


    static int ObsCount;


    public static void main(String[] argv) 

    {


     String fileName = "loanrate.txt";                                     

     if (argv.length > 0) fileName = argv[0];

      

     try {


         TimeSeriesFileReader tsReader = new TimeSeriesFileReader();     [1]

         tsReader.readFile(fileName);


         FileDates = tsReader.getDates();                                [2]

         ObsCount = tsReader.getObservationCount();                      [3]

         FileObs = tsReader.getObservations();                           [4]


         if (ObsCount == 2)                                              [5]

          FileObs2 = tsReader.getObservations(1);

.

.

.

         // Load the timestamps.

         MyAxisCh.setXSeries(FileDates);                                 [5]

         

         // Load two data series associated with the timestamps.         [6]

         MyAxisCh.setYSeries("Mortgage", FileObs);

         MyAxisCh.setYSeries("Prime", FileObs2);

.

.

.

}

The numbers in the example correspond to the numbers in the following list, which describes the example in detail:

1. The TimeSeriesFileReader( ) constructor creates a new object. Using the readFile( ) method, it reads the contents of the data file, loanrate.txt, into the object. The constructor converts the data to arrays of dates and observations.

2. The getDates( ) method retrieves the array of dates and places it in the array named FileDates.

3. The getObservationCount( ) method returns the number of arrays of observations in the file.

4. The getObservations( ) method retrieves the array of observations and places it in the array named FileObs.

5. The setXSeries( ) method loads the array of dates (FileDates) for the X-axis.

6. The first setYSeries( ) method loads the first array of observations (FileObs) into the Y-axis. The second setYSeries( ) method loads the second array of observations (FileObs2) into the Y-axis.

The following figure shows the resulting line chart:

For complete examples of reading data from a file, see the readfile subdirectory of the Chart Builder demos directory.

2.4.2 Loading Data from an Input Stream

Using the Chart Builder class TimeSeriesFileReader, you can load data from an input stream into an axis chart. The data can originate anywhere, such as in memory, in a file, or generated by another program. As with loading data from a text file, this class accepts only Date (java.util.Date) and Number data types, including locale-specific formats of dates and numbers. The TimeSeriesFileReader class reads the data and converts it into arrays suitable for populating charts.

Loading data from an input stream is similar to loading data from a file. Instead of the readFile( ) method, you use the read( ) method.

The following describes the steps pertinent to reading an input stream:

1. Create the input stream using a Java input stream method. The following example uses the FileInputStream( ) method.

   FileInputStream myInputStream = null;
   
   

2. Open the input stream using the openInputStream( ) method:

   myInputStream = openInputStream(fileName);
   
   

3. Create a new TimeSeriesFileReader object and read the contents of the input stream into the object using the read( ) method. Chart Builder converts the data to arrays of dates and observations.

   TimeSeriesFileReader tsReader = new TimeSeriesFileReader();
   
   tsReader.read(myInputStream);
   
   
   FileObs = tsReader.getObservations();
   
   FileDates = tsReader.getDates();
   
   

For a complete example of reading data from an input stream, see the readfile subdirectory of the Chart Builder demos directory.

2.4.3 Loading Data from a Database

Using Java Database Connectivity (JDBC), you can retrieve data from a database and then use Chart Builder to load the data into a chart.

JDBC is a standard Java interface for connecting from Java to relational databases. You can use JDBC to query tables and return data where, for example, the number and types of the columns are not known until runtime. This capability is called dynamic SQL. Therefore, JDBC is a way to use dynamic SQL statements in Java programs. With Chart Builder, you can load the data from the database into any chart.

When you use JDBC to load data into charts, you take the following steps:

1. Take the typical JDBC steps, such as loading the JDBC driver, connecting to the database, and creating a statement object. See the JDBC documentation for more information.

2. Create the SQL statement that queries the database to get the data. Then, execute a SQL statement that counts the number of rows that will be returned by the statement. Use the number of rows to allocate arrays for the data.

3. Execute the SQL statement and store the returned values into the arrays.

4. Use the setXSeries( ) and setYSeries( ) methods to load the data into the charts from the arrays.

Assume that a database table, ECONOMIC_TAB, contains data about the amount of imports and exports each month from a number of countries. This table contains the following data:

SYMBOL     TSTAMP          OBS1

---------- --------- ----------

EXPCA      01-JAN-90     6377.5

IMPFR      01-JAN-90     1078.3

EXPJP      01-JAN-90       4028

IMPJP      01-JAN-90     6878.2

 .

 .

 .

EXPCA      01-JAN-00      13570

IMPJP      01-JAN-00      10302

IMPMX      01-JAN-00       9567

The following example shows excerpts from a Java application that gets the amount of imports from Japan, by month, from the database and loads the data into an axis chart:

// Import the Java classes.

import java.awt.*;


// Import the JDBC classes.

import java.sql.*;


// Import the Chart Builder classes.

import oracle.charts.*;

import oracle.charts.axischart.*;

import oracle.charts.types.*;


public class jdbc_imp extends Frame {


  // Declare the driver to be loaded.

  static final String driver_class = "oracle.jdbc.driver.OracleDriver";


  // Declare the connect string. 

  static final String connect_string =   

                    "jdbc:oracle:thin:scott/tiger@host:1521:orcl2";


  // Declare the connection to the database.

  static Connection conn;

 

 // Declare the arrays to hold the data.

  static java.sql.Timestamp TimeStamps[];

  static double Observation[];


  static int Display_height;

  static int Display_width;


  public static void main(String[] argv) 


    {

.

.

.

   getData();


   try {


     // Create a new AxisChart object.

     AxisChart MyAxisCh = new AxisChart();

.

.

.

     // Load the timestamps.                                             [9]

     MyAxisCh.setXSeries(TimeStamps);


     // Load the data series, JapanImp, associated with the timestamps.  [9]

     MyAxisCh.setYSeries("JapanImp", Observation);


    // Add the chart to the frame.

    f.add(MyAxisCh);


   } catch (ChartException e) 

          {

            System.out.println(e.getMessage());


          }

    f.show();

      

   }


   public static void getData() {


    // Open a connection to the database if one is not open.     

    if (conn == null) {

            

        // Load the JDBC driver.                                         [1]

        try {

            Class.forName (driver_class);

            }

        catch (ClassNotFoundException ex ) {

           System.out.println ("Could not load class: " + 

           driver_class + "\n");

          }

            

        // Connect to the database and create a connection object.       [2]

        try {

            conn = DriverManager.getConnection (connect_string);

        } catch (SQLException e) 

               { System.out.println(e.getMessage()); };

     }

      

    // When the connection has been established, query the database.

    try {

        // Create a statement object.                                    [3]

        Statement stmt = conn.createStatement ();

      

        ResultSet rset;

          

        // Describe the source of data.


        // Define table and column names.

        String tableName = "economic_tab";


        String dateColumnName = "TSTAMP";

        String obsColumnName = "OBS1";

        String symbolColumnName = "SYMBOL";

          

        // Define the data we wish to query.

        String obs = "IMPJP";

        String startDate = "01-JAN-1991";

        String endDate = "01-JAN-2000";


        // Define strings to be used to construct the query. The query will 

        // return timestamps and numeric values from two columns in the

        // ECONOMIC_TAB table where the date is between a given start

        // and end date. 

        String selectClauseCount = "SELECT count(*) ";                   [4]

        String selectClause = "SELECT " + dateColumnName + ", " +             

                                 obsColumnName + " ";

        String fromClause = "FROM " + tableName + " ";

        String whereA = "WHERE tstamp >= to_date(" + "'" + startDate 

                                         + "', 'DD-MON-YYYY') ";

        String whereB = "AND tstamp <= to_date(" + "'" + endDate + 

                                          "', 'DD-MON-YYYY') ";

        String whereC = "AND " + obsColumnName + " is not null ";

        String whereD = "AND " + symbolColumnName + " = '" + obs + "'";

          

        String fromWhere = fromClause + whereA + whereB + whereC + whereD;


        // Execute a SELECT statement to get the number of rows that will 

        // be returned by the query and save the result in numRows.

       

        rset = stmt.executeQuery (selectClauseCount + fromWhere);        [5]

        rset.next();

        int numRows = rset.getInt(1);


        // Allocate arrays for the timestamps and the data, using

        // the value of numRows to size the arrays.

        TimeStamps = new java.sql.Timestamp[numRows];                    [6]

        Observation = new double[numRows];


        // Execute the SELECT statement and store the results 

        // in the result set object.

        rset = stmt.executeQuery (selectClause + fromWhere);             [7]


        // Iterate through the results and store the values in the arrays.

        int k = 0;                                                       [8]

        while (rset.next ()) {

          TimeStamps[k] = rset.getTimestamp(1);

          Observation[k] = rset.getDouble(2);

          if (rset.wasNull())

              System.out.println("Was null (1) " + k);

          k++;

        }

.

.

.

The following list describes the parts of the example that pertain to using JDBC to load data into a chart:

1. The JDBC Class.forName( ) method loads the JDBC driver.

2. The DriverManager.getConnection( ) method connects to the database and creates the Connection object conn. The connect string you use depends on what JDBC driver you are using.

3. The JDBC createStatement( ) method creates the Statement object, stmt.

4. The SQL statements are constructed using variables for the database object names and strings for the clauses.

5. The executeQuery( ) method executes a SQL statement that counts the number of rows that will be returned.

6. The count returned in step 5 is used to allocate the arrays for the timestamps and the data associated with them.

7. The executeQuery( ) method executes the SQL statement and returns the data to the result set object, rset.

8. The next( ) method iterates through the result set object row by row and stores the values in the arrays.

9. The setXSeries( ) method loads the array of dates (Timestamps) into the X-axis. The setYSeries( ) method loads the array of imports (Observation) into the Y-axis.

The following figure shows the chart that is generated:

For complete examples of loading data from a database, see the jdbc subdirectory of the Chart Builder demos directory.

2.5.1 Improving Image Quality

Generally, when you use the encoders to generate image files of the charts, Chart Builder generates image files with good image quality. However, charts that contain many colors or contain transparencies may benefit from additional processing. To create a higher-quality GIF image, Chart Builder provides the Quantizer class. This class provides the rgb24to8( ) method, which converts (quantizes) a 24-bit image to an 8-bit image.

The following example shows the code used to quantize a pie chart:

// Define a buffer for a 24-bit image. Use TYPE_INT_RGB.                 [1]

BufferedImage bufimg24 = new BufferedImage(Chart_width, Chart_height,

                                           BufferedImage.TYPE_INT_RGB);

// Define a buffer for an 8-bit image. Use TYPE_BYTE_INDEXED.            [2]

BufferedImage bi = new BufferedImage(Chart_width, Chart_height,            

                                      BufferedImage.TYPE_BYTE_INDEXED);

// Get the graphics context of the 24-bit buffered image.                [3]

Graphics2D g2 = null;

g2 = bufimg24.createGraphics();

// For file encoding.

MyPieCh.drawBuffer(g2);                                                  [4]


// Use the rgb24to8() method to convert the 24-bit image to 8-bit.       [5]

bi = Quantizer.rgb24to8(bufimg24);


// Create the GIF file.                                                  [6]

EncodeGifFile(bi, "pie_example_quant.gif");

1. Define a buffered image for a 24-bit image using the BufferedImage constructor. This example defines a buffered image called bufimg24.

   Note that the image type you specify depends on the type of file you are encoding. Because this example creates a 24-bit image, it uses TYPE_INT_RGB.

2. Define a buffered image for an 8-bit image using the BufferedImage constructor. This example defines a buffered image called bi.

   Note that the image type you specify depends on the type of file you are encoding. Because this example creates an 8-bit GIF image, it uses TYPE_BYTE_INDEXED.

3. Get the graphics context of the 24-bit buffered image using the BufferedImage createGraphics( ) method. This example instantiates it in the graphics object named g2.

4. Call the drawBuffer( ) method to render the chart into the buffered image associated with g2.

5. Use the rgb24to8( ) method to convert (quantize) the 24-bit image to an 8-bit image.

6. Encode the file as a GIF file using the GIFEncoder( ) constructor and write it out to the output file.

The following figure shows the resulting GIF file: