Tutorial #1: Pie Chart Applet
A short tutorial explaining how to display a pie chart in a Java applet
Introduction
Using Openchart2 within an applet is relatively simple. This tutorial shows how to create a static pie chart in a simple Java applet window. The complete source code is available at the end of the tutorial.
Step 1: Define Some Data
To make this chart, we'll need some basic data to display on the chart. Some nonsense data by continent is displayed below:
private static final String[] categories = {"Africa",
"Asia",
"Australia",
"Europe",
"North America",
"South America"};
private static final int[] amount = {40,
30,
20,
40,
30,
20};
This simple data will be sufficient for our pie chart. The data is defined inside a simple class that extends javax.swing.JApplet.
Step 2: Build the Chart within the Constructor
Assume that our applet class is named PieChart. The entire chart will be created within the applet's constructor. The first step is to prepare our data for the Openchart2 system.
Pie charts represent a special case for considering series. Specifically, each entry on the pie chart should be treated as a separate data series. To do this, we create a data array for passing that contains "amount.length" series, each having exactly one data point. Openchart2 does support multiple points in the data series, creating a composite pie chart, but we'll ignore that for now. The following reshapes the numeric data into a two-dimensional array:
int data[][] = new int[amount.length][1];
for(int i=0;i<amount.length;i++) {
data[i][0] = amount[i];
}
Even though we won't be display the text, the column label needs to be defined. The data has been constructed so that there are multiple series with exactly one data point, or column, in each series. The column designator would make more sense if we were drawing a bar chart, for example. For this example, we'll use a simple description of the single column of data:
String[] column_id = {"Continental Amounts"};The data is now ready for passing into an Openchart2 model constructor. Openchart2 offers a number of data models, each of which is tailored to certain types of data and charts. For a pie chart, a simple ObjectChartDataModel will suffice, as it allows for integer values and non-numeric x-axis labels. The constructor is called as follows:
ObjectChartDataModel model = new ObjectChartDataModel(data, column_id, categories);
The data array contains "amount.length" series with 1 data point each. The column_id variable contains a single entry that will not actually be used. The categories array contains the name of each series, and here it will be used to label each pie slice.
Generating the model is probably the most difficult part because certain data formats are required by the constructors. The process now becomes simpler. The next step is to actually create the chart based on our data model. We'll use a DefaultChart object for this example:
chart = new DefaultChart(model,"Pie Chart Example");
We've constructed the chart with the data model constructed above and the title Pie Chart Example. The data model is necessary to be passed because it is used by the DefaultChart for constructing the default color scheme. At this point, we still have only a blank chart since we have not added a renderer to perform the actual drawing. Multiple renderers, each drawing the same or different types of graphs, can be added to a single chart to provide overlapping graphs. Here we'll add a single PieChartRenderer:
PieChartRenderer renderer = new PieChartRenderer(model);
chart.addChartRenderer(renderer, 0);
The above code constructs a renderer using our data model and adds the renderer to the chart at the z-position of 0. The z-position value is used when multiple renderers are on the same chart to determine which renderer is drawn on top of another. Using 0 is reasonable in this case since there is only a single renderer anyway.
Finally, we need to construct a coordinate system, which is used to perform scaling. The coordinate system,while not used for scaling on a pie chart, is necessary for every type of chart. We'll create one here, but we'll disable all the unnecessary features:
CoordSystem coord = new CoordSystem(model);
coord.setPaintAxes(false);
chart.setCoordSystem(coord);
The above statements create a CoordSystem based on our data model, disable painting the axes, and sets the newly constructed object as the chart's coordinate system. The CoordSystem object uses the data model for determination of the largest and smallest data values for autoscaling purposes. In this example, autoscaling is unecessary since there is no need to "scale" a pie chart.
At this point, the chart is constructed and ready to be drawn in our applet.
Step 3: Drawing the Chart
The chart object is going to be drawn directly in our applet's graphics space. To do this, we'll simply override the default paint() method as follows:
public void paint(Graphics g) {
super.paint(g);
// Pass the drawing bounds into the chart
chart.setBounds(new Rectangle(this.getWidth(), this.getHeight()));
// Render the chart
chart.render((Graphics2D)g);
}The above method first calls the default applet painting method. Once complete, the chart is then drawn. First the drawing area is determined and passed into our DefaultChart object. Second the chart's render() method is called, which performs all necessary drawing, including legends, titles, and the chart itself.
Conclusion
At this point, our applet is complete. The resulting code will display a simple color-coded pie chart on the screen. The code could be simplified by possibly using Swing-compatible Openchart2 objects, such as DefaultChartPanel (this is covered in other tutorials). To see the complete example code, download the resulting java source code:
Source code: Download!