Skip to main content

How to add a graph with LWUIT?

3 replies [Last post]
johneee999
Offline
Joined: 2011-11-03
Points: 0

Hi all,
it is possible to somehow add/create a chart with LWUIT? I need add a graph to my app but I dont know how to. On the picture is shown what i want. I tried the beanizer chartcomponent, but its not worked for me.
Thanks in advance.

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
vimald
Offline
Joined: 2010-11-06
Points: 0

If your target is the right top quater that contains the graph, the approach would be

Create a custom component, over-ride its paint(...) to manually render the axis, the background grids and the graphs. To render the axis and grids, use lcdui drawline(...). To render the axis units and axis legends which are strings use bitmap / system fonts and read the lwuit label text display paint logic. Now to render the graph idea is to scale the original graph co-ordinates to your target graph co-ordinates , by this i mean reuse the bezier (or any other) algorithm to trace the graph but convert each graph co-ordinate to the target graph co-ordinate using the following formula

Target point X co-ordinate:   
          tX = taX + ((tW * (sX - saX)) / sW)

Target point Y co-ordinate:  
          tY = taY - ((tH * (saY - sY)) / sH)



saX : Source axis start X coordinate
saY : Source axis start Y coordinate
sW  : Souce Width
sH  : Source Height

taX : Target axis start X coordinate
taY : Target axis start Y coordinate
tW  : Target Width
tH  : Target Height

NOTE: Assumption is the graph (0,0) graphics reference rendering start point in the source and the target systems is the same which is left-top. In case they are different you have to appropriately change the formula.

The above concept is same conversion of world to view transformation of the object with 2D axis.

The other 3 quaters in your image are pretty simply to implement using the different components and forms.

johneee999
Offline
Joined: 2011-11-03
Points: 0

Thanks for your response, but I never used Graphics in J2ME until now. So what I have to do? For example I tried this. Im tring to add rectangle and a line to the form, but its not working. I tried to search for some examples on the net but I dont find anything useful :/

import com.sun.lwuit.Component;
import javax.microedition.lcdui.Graphics;
public class ChartComponent extends Component {
    public void paint(Graphics g) {
        g.setColor(0x222222);
        g.fillRect(20, 30, 200, 80);
        g.setColor(0x456548);
        g.drawLine(0, 0, 100, 200);
    }
}<br />
protected boolean onGraphFormDraw() {
        boolean val = super.onGraphFormDraw();
        Form root = Display.getInstance().getCurrent();
        root.addComponent(BorderLayout.CENTER, new ChartComponent());
        return val;
}
Thanks for your patience.
vimald
Offline
Joined: 2010-11-06
Points: 0

The way you are adding 'ChartComponent' to the form is correct. The issue is in the paint(){...} of ChatComponent. Use my sample code to kickstart your work

class ChartComponent extends Component {
    boolean isDirty;

    ChartComponent () {
        isDirty = true;
    }
   
    public void paint(Graphics g) {
        if (isDirty) {
            //isDirty = false;           

            int buffer = 20;

            g.setClip(getX(), getY(), getWidth(), getHeight());

            //BG
            g.setColor(0xEDEDED);
            g.fillRect(getX(), getY(), getWidth(), getHeight());
           
            //Graph grids
            g.setColor(0xFFFFFF);
            int size = 6;
            for (int i = 0, x = getX() + buffer, y = getY() + buffer,
                            w = getWidth() - (buffer * 2),
                            h = getHeight() - (buffer * 2),
                            dw = w / size,
                            dh = h / size;
                    i &lt; size; i++) {
               
                g.drawRect(x + ( i * dw), y, dw, h);
                g.drawRect(x, y + ( i * dh), w, dh);
            }

            //Graph axis
            g.setColor(0x333333);
            g.drawLine(getX() + buffer, getY() + getHeight() - buffer,
                    getX() + getWidth() - buffer, getY() + getHeight() - buffer); //X-axis
            g.drawLine(getX() + buffer, getY() + buffer,
                    getX() + buffer, getY() + getHeight() - buffer); //Y-axis

           


            //Write code to render axis units
           



            //Write code to render axis legends


           

            //code to render graph

        }

    }
<br type="_moz" />

You also need to worry about the padding and margin of the component and considering that in your calcualtions.

A good starting pointing to understand the LWUIT rendering (paint(){...}) is Label component. Check the method

DefaultLookAndFeel.drawLabel(Graphics g, Label l) {...}<br type="_moz" />

and understand how the component x, y, width, height and its padding, margin is used to render the component.