CS290I - Scalable Internet Services and Systems

Thorsten von Eicken - UCSB - Spring 2001

Project 2 HowTo: Charts

Charting package

Unfortunately there doesn't seem to be any standard good simple graphing/charting package for Java. However, there are a number of packages with various levels of complexity and functionality that are available on the web. We have found KavaCharts to be a good compromise between functionality and complexity for this project. We have a installed the free version of KavaCharts, which is fully functional, but places a little "KavaCharts ad" at the bottom of each graph. You can find out more about KavaCharts at http://www.ve.com/kavachart/index.html.

The documentation for KavaCharts is available locally at KavaChart Documentation.

Example

In order to produce the charts you will need to generate GIFs or PNGs and serve them to the web browser. Below is a code snippet that illustrates the use of the package we will use.

protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException 
{
  out = response.getOutputStream();
  response.setContentType("image/png");

  javachart.servlet.Bean chart = new javachart.servlet.finComboApp();
  // Generic graph values for the financial Combo (split)
  chart.setProperty("imageType", "j_png");
  chart.setProperty("useCache", "false");
  chart.setProperty("byteStream", "true");
  chart.setProperty("axisDateFormat", "MMM/yy");
  chart.setProperty("splitWindow", "true");
  chart.setProperty("dataset0Type", "Line");
  chart.setProperty("dataset1Type", "Stick");
  chart.setProperty("xAxisLabelAngle", "90");
  chart.setProperty("titleString", "Share and volume");
  chart.setProperty("yAxisTitle", "dollars");
  chart.setProperty("dataset0Name", "price per share");
  chart.setProperty("dataset1Name", "Volume (mil) ");
  chart.setProperty("legendOn", "yes");
  chart.setProperty("legendHorizontal", "yes");
  chart.setProperty("legendllX", "0.65");
  chart.setProperty("legendllY", "0.65");
  chart.setProperty("iconHeight", "0.005");
  // Execute the SQL query and collect the data,  filling in the x axis with dates, and the
  // two y axes with closing price and volume.  This is an example that statically sets some
  // sample values instead of actually querying the DB
  // NOTE: the dates must be expressed in ms from 1970. You can use the following to easily get
  // this value: from a recordset (RS) of a query, get the "date" field in your table as a
  // sql Data object and then invoke the "getTime()" call that returns the ms from 1970.
  // ie: java.sql.Date date = RS.getDate("date"); date.getTime();
  String xAxis = "694339200000,713339200000,728408000000,738408000000,748408000000," +
                 "768408000000,778408000000,788408000000"";
  String closeAxis = "523,932,723,1343,845,700,800,900";
  String volAxis = "123,432,123,543,345,300,400,500";
  chart.setProperty("dataset0xValues", xAxis );
  chart.setProperty("dataset1xValues", xAxis );
  chart.setProperty("dataset0yValues", closeAxis );
  chart.setProperty("dataset1yValues", volAxis );
  // Set the size and print the graph
  chart.setProperty("width", (new Integer(500)).toString());
  chart.setProperty("height", (new Integer(500)).toString());
  try{
    // Get the image bytes of the graph and ship it to the client
    out.write(chart.getImageBytes());
  }catch (Exception e){
    System.out.println("Error gettin image bytes...");
  }
    out.close();
  }