| | | | Browse by category |
How do I use the individual component beans available in ChartJ to create charts?
Action
This page will outline how to reproduce the prebuilt HighLowStockChart from the individual component beans in ChartJ. This Knowledge Base page is aimed at increasing the developer's understanding of the component beans and their properties. This page will also help the developer understand the basics needed to begin creating customized chart types. By using the individual component beans available in ChartJ, a developer may achieve exactly the look and feel desired, while using the smallest possible set of Java classes. This approach will generate small applets and quick downloads for the user.
This example requires the March '98 version of the 1.0 BDK, which is available from Sun at http://java.sun.com/beans/software/bdk_download.html. It is suggested that you follow the steps exactly as outlined below for best results. As you become more comfortable with the BDK and ChartJ, you will find that some steps can be altered or eliminated to meet your needs.
Step 1: | Start the March '98 BeanBox with Chart.jar from JChart v2.1.x in the jars subdirectory of the BeanBox install directory. Make your BeanBox workspace big enough to comfortably fit two completed charts and ten or so non-visual Beans. Add a HighLowStockChart Bean ![]() |
Step 2: | Add a ScrollableChart ![]() |
Step 3: | Add a LinearScale![]() |
Step 4: | Select Edit from the BDK menu bar, and Bind property. Select the "Overlay" property from the LinearScale and click OK. Position your cursor along the outer edge of the ScrollableChart and click to select this component as the binding target object. Select the "Primary scale overlay" from the list on the ScrollableChart and click OK. Don't worry for now that the scale on your new chart does not match the pre-built exampe. The scales will change later as we add data to the chart. Your chart should now appear as shown in the example below.
|
Step 5: | Add a second LinearScale ![]() |
Step 6: | Bind the second LinearScale "Overlay" property to the the "Secondary scale overlay" on the ScrollableChart. Note that nothing visible happens until you complete step 7. |
Step 7: |
Change the second LinearScale "scale" in the BDK Properties window to "Secondary", as shown below. Your ScrollableChart will now display a vertical scale along the right and left sides. |
Step 8: | Add FileData ![]() |
Step 9: |
With the FileData Bean selected on the workspace, bind the "Data" to "data" on the ScrollableChart. Notice that the values displayed in your chart should now appear as shown below. The date values allong the horizontal axis should now match those on the pre-built chart. |
Step 10: |
Add RowRangeDataRange Note that the default value for numberOfRows is 1. Later you might expect that this value should be changed to 4 to plot high, low, open, and close prices. However, this is not the case since the HighLowOverlay Bean we will add in Step 13 expects four rows and will override any value you may set here for numberOfRows. It is also tempting to try and adjust the scale values along the left vertical axes to match the pre-built bean in the Property window for the ScrollableChart. Adjusting these values should be postponed until after Step 11 to avoid conflicts with internal algorithms used in setting scale values. |
Step 11: |
Add SingleRowDataRange The right axis should now match the axis on the pre-built chart. |
Step 12: |
With the ScrollableChart selected, set the value of "Primary axis increment" to "1.0" in the Properties window. Set the "Primary axis min" property to "8.0". The scale property values for the scondary axis do not need to change from the default values. Note that there is no way to change the precision so that 300000.0, for example, appears as 300000 (as it does in the pre-built chart) without writing some Java code. This is because the pre-built chart uses some code in Rogue Wave's JTools product to adjust the precision. Your chart should now appear as shown in the image below: |
Step 13: | Add HighLowOverlay ![]() |
Step 14: |
You will now need to make two changes in the horizontal axis properties in order to make the time scales (trade dates) match. Using the property editor on the ScrollableChart, change "Space between columns" to a value of "1". Also change the "Column line period" to a value of "5". Your chart should now appear as shown below.
|
Step 15: |
Add BarOverlay |
Step 16: |
To make the color of the "Secondary axis label" in the ScrollableChart match the color of the bars in the BarOverlay, you will need to change blue to medium green. Select the LinearScale Bean under the right side of the chart and change the "labelColor" property to a value set of "0,178,0". Note that this illustrates the tradeoffs in using a pre-built chart versus a component based implementation. The pre-built chart will set labels and color values automatically, where the component Beans will give you more control, but also require a bit more work to achieve the same result. An alternate approach to setting the color would be to bind the "Secondary axis color" for the ScrollableChart to "labelColor" for the right LinearScale. Then you would bind the "Secondary axis color" property for the ScrollableChart to the "color" property for the BarOverlay. In this case, binding would automate the match between these properties. Your chart should now appear as shown below. |
Step 17: |
Add a Text Bean |
Step 18: |
Add a second Text Bean |
Step 19: |
The final step is to add a HighLowKey Your completed chart should appear as shown below.
|