|
 |
Get started with J2me ChartComponent
|
|
Introduction
J2me Chart Component is a free MIDP2.0 library, aimed at helping J2ME developers to easily add charts to their personal or commercial midlets. I'm writing this article because some people have asked for a simple kickstarting tutorial on how to use the library. I hope this will be useful and that will also help ChartComponent expand its user-base.
Overview
Since version 1.5 of ChartComponent, developers can choose to use it in two different ways:
1) As a UI widget (PieChart, VBarChart, HBarChart,LineChart)
2) As a drawing library, using custom Graphics objects as targets
Here we'll explore both usages. We'll use a Form with A Chart widget in the first example, and a Form with an Image in the second. This second usage allows also to export or manipulate created charts.
Before you read on, please dowload the library here and make sure you add it to your classpath.
The code
We are going to code a minimal midlet with a form containing a vertical bar-chart. Here is the code:
1:import javax.microedition.midlet.*;
2:import javax.microedition.lcdui.*;
3:import java.util.*;
4:
5:import org.beanizer.j2me.charts.VBarChart;
6:
7:public class ChartExample1 extends MIDlet implements CommandListener {
8: private Display display;
9: private Form mainForm;
10: private final static Command CMD_EXIT = new Command("Exit", Command.EXIT, 1);
11: final VBarChart item= new VBarChart("");
12:
Nothing fancy up to now. The only noticeable thing is the instantiation of a VBarChart item. The interesting part comes now, in the startApp method:
13: public void startApp() {
14: display = Display.getDisplay(this);
15:
16: mainForm = new Form("VBarChart Demo");
17: item.setFont(Font.FACE_PROPORTIONAL,Font.STYLE_PLAIN,Font.SIZE_SMALL);
18: item.setDrawAxis(true);
19: item.setPreferredSize(mainForm.getWidth(),120);
20: item.setMargins(5,45,10,15);
21: item.showShadow(true);
22: item.setShadowColor(20,20,20);
23: item.setColor(40, 40, 200);
24: item.resetData();
25: item.addElement("a",40,0,0,255);
26: item.addElement("b",23,0,255,0);
27: item.addElement("c",75,255,0,0);
28: item.setMaxValue(100);
29: mainForm.append(item);
30: mainForm.addCommand(CMD_EXIT);
31: mainForm.setCommandListener(this); 32: display.setCurrent(mainForm);
33: }
34:
Let's focus just on important lines:
- Line 18: we want X and Y axis to be shown
- Line 21: a shadow makes the chart look 3D
- Line 22: the colour of the shadow
- Line 24: reset our data just in case we're updating the widget
- Line 25-26-27: here we actually push data in our chart. The parameters are:
- a label to be shown on the X axis
- a value (for the Y axis)
- the bar colour in R,G,B notation
- Line 28: here we set the maximum Y value
The rest of the code is just what we usually find in any midlet.
35: public void commandAction(Command c, Item e) {
36: if(c.getLabel().equals("Exit")){
37: destroyApp(false);
38: notifyDestroyed();
39: }
40: }
41: public void commandAction(Command c, Displayable d){
42: if(c.getLabel().equals("Exit")){
43: destroyApp(false);
44: notifyDestroyed();
45: }
46: }
47:
48: protected void pauseApp() {
49: }
50:
51: protected void destroyApp(boolean arg0){
52: }
53:
54:}
55:
Should we need a line chart or a horizontal bar chart we just need to change line 11:
11: final LineChart item= new LineChart(""); 11: final HBarChart item= new HBarChart("");
I'll leave the explaination of PieChart to the next article, as it slightly differs from the other type of charts.
Using the library as a drawing tool
The simple usage presented covers most needs a j2me developer should have when using charts, but there are times where we don't need a widget, and the chart needs being exported or manipulated. This is possible with ChartComponent simply using drawChart method ( drawPie for PieChart). drawChart accepts as parameters a Graphics object and the width and height of the chart.
So, if you need to draw a chart inside an Image, you can still use the previous code, just substitute line 29 with something like this:
Image image= Image.createImage(150,150);
Graphics g= image.getGraphics();
item.drawChart(g,120, 120);
mainForm.append(image);
Conclusions
There's enough to get started with the library. Next article will focus on PieChart and a bunch of other useful features of ChartComponent.
ChartComponent is and will remain free for both personal or commercial usage. If you find it and this article useful, please blog about it.
Hasta la proxima. |
|
 |
|
Articles 
