{"id":40,"date":"2016-05-06T08:54:38","date_gmt":"2016-05-06T08:54:38","guid":{"rendered":"http:\/\/symbioticindia.in\/docu\/?p=40"},"modified":"2016-05-06T08:54:38","modified_gmt":"2016-05-06T08:54:38","slug":"get-started-with-j2me-chartcomponent","status":"publish","type":"post","link":"http:\/\/symbioticindia.in\/docu\/2016\/05\/06\/get-started-with-j2me-chartcomponent\/","title":{"rendered":"Get started with J2me ChartComponent"},"content":{"rendered":"
Introduction<\/strong><\/div>\n

J2me Chart Component<\/a> 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.<\/p>\n

Overview<\/strong><\/div>\n

Since version 1.5 of ChartComponent, developers can choose to use it in two different ways:<\/p>\n

1) As a UI widget (PieChart, VBarChart, HBarChart,LineChart)
\n2) As a drawing library, using custom Graphics objects as targets<\/p>\n

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.
\nBefore you read on, please dowload the library here<\/a> and make sure you add it to your classpath.<\/p>\n

The code<\/strong>
\nWe are going to code a minimal midlet with a form containing a vertical bar-chart. Here is the code:<\/p>\n

\n
   1:<\/span>import<\/span> javax.microedition.midlet.*; \r\n   2:<\/span>import<\/span> javax.microedition.lcdui.*; \r\n   3:<\/span>import<\/span> java.util.*; \r\n   4:<\/span> \r\n   5:<\/span>import<\/span> org.beanizer.j2me.charts.VBarChart; \r\n   6:<\/span> \r\n   7:<\/span>public<\/span> class<\/span> ChartExample1 extends<\/span> MIDlet implements<\/span> CommandListener {<\/span> \r\n   8:<\/span>    private<\/span> Display display; \r\n   9:<\/span>    private<\/span> Form mainForm; \r\n  10:<\/span>    private<\/span> final<\/span> static<\/span> Command CMD_EXIT =<\/span> new<\/span> Command<\/span>(\"<\/span>Exit<\/span>\"<\/span>, Command.EXIT, 1<\/span>); \r\n  11:<\/span>    final<\/span> VBarChart item=<\/span> new<\/span> VBarChart<\/span>(\"<\/span>\"<\/span>);  \r\n  12:<\/span>     <\/span><\/pre>\n<\/div>\n
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:<\/p>\n
\n
 \r\n  13:<\/span>    public<\/span> void<\/span> startApp<\/span>() {<\/span> \r\n  14:<\/span>        display =<\/span> Display.getDisplay<\/span>(this<\/span>); \r\n  15:<\/span>         \r\n  16:<\/span>        mainForm =<\/span> new<\/span> Form<\/span>(\"<\/span>VBarChart<\/span> Demo<\/span>\"<\/span>); \r\n  17:<\/span>        item.setFont<\/span>(Font.FACE_PROPORTIONAL,Font.STYLE_PLAIN,Font.SIZE_SMALL); \r\n  18:<\/span>        item.setDrawAxis<\/span>(true<\/span>); \r\n  19:<\/span>        item.setPreferredSize<\/span>(mainForm.getWidth<\/span>(),120<\/span>); \r\n  20:<\/span>        item.setMargins<\/span>(5<\/span>,45<\/span>,10<\/span>,15<\/span>); \r\n  21:<\/span>        item.showShadow<\/span>(true<\/span>); \r\n  22:<\/span>        item.setShadowColor<\/span>(20<\/span>,20<\/span>,20<\/span>); \r\n  23:<\/span>        item.setColor<\/span>(40<\/span>, 40<\/span>, 200<\/span>); \r\n  24:<\/span>        item.resetData<\/span>(); \r\n  25:<\/span>        item.addElement<\/span>(\"<\/span>a<\/span>\"<\/span>,40<\/span>,0<\/span>,0<\/span>,255<\/span>); \r\n  26:<\/span>        item.addElement<\/span>(\"<\/span>b<\/span>\"<\/span>,23<\/span>,0<\/span>,255<\/span>,0<\/span>); \r\n  27:<\/span>        item.addElement<\/span>(\"<\/span>c<\/span>\"<\/span>,75<\/span>,255<\/span>,0<\/span>,0<\/span>); \r\n  28:<\/span>        item.setMaxValue<\/span>(100<\/span>); \r\n  29:<\/span>        mainForm.append<\/span>(item); \r\n  30:<\/span>        mainForm.addCommand<\/span>(CMD_EXIT); \r\n  31:<\/span>        mainForm.setCommandListener<\/span>(this<\/span>);   32:<\/span>        display.setCurrent<\/span>(mainForm); \r\n  33:<\/span>    }<\/span> \r\n  34:<\/span> <\/span><\/pre>\n<\/div>\n
Let’s focus just on important lines:<\/p>\n
    \n
  1. Line 18: we want X and Y axis to be shown<\/li>\n
  2. Line 21: a shadow makes the chart look 3D<\/li>\n
  3. Line 22: the colour of the shadow<\/li>\n
  4. Line 24: reset our data just in case we’re updating the widget<\/li>\n
  5. Line 25-26-27: here we actually push data in our chart. The parameters are:\n
      \n
    1. a label to be shown on the X axis<\/li>\n
    2. a value (for the Y axis)<\/li>\n
    3. the bar colour in R,G,B notation<\/li>\n<\/ol>\n<\/li>\n
    4. Line 28: here we set the maximum Y value<\/li>\n<\/ol>\n
      The rest of the code is just what we usually find in any midlet.<\/p>\n
      \n
          35:<\/span>    public<\/span> void<\/span> commandAction<\/span>(Command c, Item e) {<\/span> \r\n  36:<\/span>            if<\/span>(c.getLabel<\/span>().equals<\/span>(\"<\/span>Exit<\/span>\"<\/span>)){<\/span> \r\n  37:<\/span>                destroyApp<\/span>(false<\/span>); \r\n  38:<\/span>                notifyDestroyed<\/span>();         \r\n  39:<\/span>            }<\/span> \r\n  40:<\/span>    }<\/span> \r\n  41:<\/span>    public<\/span> void<\/span> commandAction<\/span>(Command c, Displayable d){<\/span> \r\n  42:<\/span>            if<\/span>(c.getLabel<\/span>().equals<\/span>(\"<\/span>Exit<\/span>\"<\/span>)){<\/span> \r\n  43:<\/span>                destroyApp<\/span>(false<\/span>); \r\n  44:<\/span>                notifyDestroyed<\/span>();         \r\n  45:<\/span>            }<\/span> \r\n  46:<\/span>    }<\/span> \r\n  47:<\/span> \r\n  48:<\/span>    protected<\/span> void<\/span> pauseApp<\/span>() {<\/span> \r\n  49:<\/span>    }<\/span> \r\n  50:<\/span> \r\n  51:<\/span>    protected<\/span> void<\/span> destroyApp<\/span>(boolean<\/span> arg0){<\/span> \r\n  52:<\/span>    }<\/span> \r\n  53:<\/span>     \r\n  54:<\/span>}<\/span> \r\n  55:<\/span> <\/span><\/pre>\n<\/div>\n
      Should we need a line chart or a horizontal bar chart we just need to change line 11:<\/p>\n
      \n
         11:<\/span>    final<\/span> LineChart item=<\/span> new<\/span> LineChart<\/span>(\"<\/span>\"<\/span>); <\/span><\/pre>\n<\/div>\n
      or<\/p>\n
      \n
         11:<\/span>    final<\/span> HBarChart item=<\/span> new<\/span> HBarChart<\/span>(\"<\/span>\"<\/span>);  <\/span><\/pre>\n<\/div>\n
      Keep in mind that with HBarChart axis are inverted.
      \nI’ll leave the explaination of PieChart to the next article, as it slightly differs from the other type of charts.<\/p>\n
      Using the library as a drawing tool<\/strong>
      \nThe 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<\/em> method ( drawPie for PieChart). drawChart<\/em> accepts as parameters a Graphics object and the width and height of the chart.
      \nSo, 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:<\/p>\n
      \n
      Image image=<\/span> Image.createImage<\/span>(150<\/span>,150<\/span>);\r\n Graphics g=<\/span> image.getGraphics<\/span>();\r\n item.drawChart<\/span>(g,120<\/span>, 120<\/span>);\r\n mainForm.append<\/span>(image);\r\n <\/span><\/pre>\n<\/div>\n
      As you can see, we create an image, draw the chart inside of its Graphics object, and add the image to the form, instead of a ChartItem.<\/p>\n
      Conclusions<\/strong>
      \nThere’s enough to get started with the library. Next article will focus on PieChart and a bunch of other useful features of ChartComponent.
      \nChartComponent is and will remain free for both personal or commercial usage. If you find it and this article useful, please blog about it.<\/p>\n","protected":false},"excerpt":{"rendered":"
      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 ..<\/p>\n
      <\/div>\n
      Read more<\/a><\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-40","post","type-post","status-publish","format-standard","hentry","category-java"],"_links":{"self":[{"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/posts\/40","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/comments?post=40"}],"version-history":[{"count":1,"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/posts\/40\/revisions"}],"predecessor-version":[{"id":41,"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/posts\/40\/revisions\/41"}],"wp:attachment":[{"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/media?parent=40"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/categories?post=40"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/tags?post=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}