pie graph

Vertical Bar Graph API (Java Bean)

[ Bar Graph Home ] [ Buy Now ] [ Installing ] [ Using the Bar Graph API ] [ API Docs ] [ Demo's ]

Using the Bean with Borland JBuilder

This section provides a quick tutorial on how to add the Vertical Bar Graph bean to a simple Java Application with JBuilder.

If you have not already done so then you will need to install the bean into JBuilder.
For instructions on installing click here.

 

The following steps will guide you through:-

  1. Create a New Application
  2. Adding the Vertical Bar Graph
  3. Adding Data to the Graph
  4. Configuring some Properties of the Bar Graph.

 

 

 

Step 1 - Create a New Application

From the JBuilder menu select File >New...
In the popup dialogue that appears select the Application icon and click Ok

In the Name field type a name for your application and then click the Finish button.

You should now see the Application Wizard dialogue, type in a name in the Class Name field and the click Finish.

 

 

Step 2- Adding the Vertical Bar Graph

From the previous step you should now have an application with a single frame and the right hand window should be displaying the source code of that frame.

In the right hand window click on the 'Design' tab at the foot of the window. You should now see the frame as a blank canvas.

At the top of this window you should see various tabs for all the different libraries configured within the palette. Amongst these you should see the library 'JPOWvbgraph' created in the Installing section. ( if you have many libraries configured then you may need to scroll to the right).

(If you do not see the JPOWvbgraph tab or the icon as below then you will need to repeat the section "Configuring the Palette" in the installing section )

Click on the JPOWvbgraph tab. You should now see this,

 

Click on the Vertical Bar Graph Icon and then place on the Frame canvas. You have now added the Vertical Bar Graph to the Frame and the graph should be displaying a default chart like this:-

 

 

 

Step 3 - Adding Data to the Graph

This step shows how to create a data object and then add that data object to the Vertical Bar Graph.

At the bottom of the right hand window click on the Source tab. In the methodjbInit() add the following code:-

This code creates a new data object and then adds 3 series of data each with 6 data points. In practice the data values would be derived from say a database. However for the purposes of demonstration here we simply hard code the values.

Next add this data object to the instance of the Vertical Bar Graph bean with the following line od code:-

For further information on the Dataobject please see the API Docs - Dataobject

Your jbInit() method should now look like this:-

 

In the right hand window click on the Design tab again. This time you should see graph plotting the data just added:-

 

 

 

Step 4 - Configuring the Graph Properties

The above graph is a little untidy and so it is time to adjust some of the properties. If you click on the graph area then over to the far right you will see many of the properties listed which can be adjusted as required.

In the list of properties change:-

  • barwidth from 15 to 10
  • bar_spacing from 5 to 3
  • gridposition from 5,127 to 50,127
  • depth3D from 15 to 10#
  • ndecplaces from 2 to 0

Your graph should now look like this:-

 

To add some labels to the x-axis do the following,

click on the Source tab at the bottom of the window and add the following code to the jbInit() method:-

click on the Design tab and the then adjust the following properties:-

  • labelOrientation - change from 'Horizontal' to 'Up Angle'
  • labelsy_offset - set to 0
  • labelsy set to 130

For further information on the Xlabelobject please see the API Docs - Xlabelobject

Next add some titles to the chart by setting the following properies:-

  • xtitletext - set to 'Month'
  • xtitleposition - set to '145,180'
  • titletext - set to 'Main Title'
  • titleposition - set to '140,14'
  • ytitletext - set to 'Percentage'
  • ytitleposition - set to '5,40'
  • ylabel_post - set to '%'
  • popup_post - set to '%'

You chart should now look like this:-

The last thing we will do here is modify the bar colours and the legend labels. This is done by supplying 'Series Data' to the chart.

In the Source view add the following code to the jbInit() method:-

For further information on the Xlabelobject please see the API Docs - Seriesobject

The graph should now look like this:-

 

Now run the application by selecting Run > Run Project

Moving the cursor over the bars will trigger the popup value display.

 

As you will see from the properties window in the design view there are many more configurable properties of the component. For further information on all of these please refer to the API Docs

 

If you require help or assistence then please feel free to contact us at Jpowered Support

 

 

 

[ Bar Graph Home ] [ Buy Now ] [ Installing ] [ Using the Bar Graph API ] [ API Docs ] [ Demo's ]

Bar Graph Home

Installing

Using the Bar Graph API

API Docs

Demo's