The following steps will guide you through:-
- Create a New Application
- Adding the Vertical Bar Graph
- Adding Data to the Graph
- 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
|