| | | | | Browse by category |
Problem
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 to the workspace. To add a component to the workspace in the BDK, simply click on the item in the Toolbox window, then click in the workspace window at the position you wish to place the component. Position the HighLowStockChart in the upper half of the workspace. This is the pre-built chart we will be duplicating in the steps below. The purpose of this chart is to serve as a visual example for what you will be building in the steps below. |
| Step 2: | Add a ScrollableChart . Position it directly beneath the HighLowStockChart. The Scrollable Chart is one of the two available overlay base charts. If you need to select a visible object to reposition it on the BDK palette, click on the outer edge of the object to access the object handles. |
| Step 3: | Add a LinearScale. This is the first of two scales you will be adding. Place this Bean under the left vertical axis of the ScrollableChart. |
| 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 . Position the second LinearScale under the right vertical axis. |
| 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 . The FileData will change both the vertical axes and the horizontal axes. |
| 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 . Position this Bean under the left vertical axis. Bind the RowRangeDataRange "dataRange" property to the "Primary axis data range" property on the ScrollableChart. Notice the change in the scale values along both the left hand and the right hand axes. With the RowRangeDataRange Bean selected, change "lowValueMode" to "Minimum" in the BDK Properties window. 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 . Position this bean under the right vertical axis. Bind SingleRowDataRange property "dataRange" to "Secondary axis data range" on the ScrollableChart. With the SingleRowDataRange Bean selected, change the "dataRow" value to "4". 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 . Bind the "overlay" property from the HighLowOverlay to the "overlay1" property in the ScrollableChart. Notice that the high, low, open, and close (HLOC) prices are properly displayed immediately. All of the default values in the property editor now match those in the pre-built chart, so no further modifications are necessary for the primary axis scale. Also notice that a "tickWidth" of "2" refers to each of the individual open and close ticks. This means that the entire marker for each of the prices would be: 2 (open tick) + 1 (vertical marker)+ 2 (close tick) = 5 pixels. |
| 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 . Bind the "overlay" property in the BarOverlay Bean to the "overlay2" property in the ScrollableChart. Using the Property editor window for the BarOverlay, set the "barWidth" to "5" which will set the width of the bar to match the width of the pricing tick set in Step 15. Change the "color" property to a value set of "0,178,0", which is a medium green. You will also need to set the "dataRow" property to "4", and the "scale" property should be set to "Secondary" as shown below. |
| 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 and position it under the left vertical axis of the ScrollableChart. Bind the "overlay" property for the Text Bean to "overlay3" from the ScrollableChart. Select the Text Bean and change the "font" property to a 14 point italic font, and change the "text" property to "Price". Change the "placement" property to "Above and left of" from the drop down box as shown below. |
| Step 18: |
Add a second Text Bean and position it under the right vertical axis of the ScrollableChart. Bind the "overlay" property for the Text Bean to "overlay4" from the ScrollableChart. Select this Text Bean and change the "font" property to a 14 point italic font, and change the "text" property to "Volume". Change the "placement" property to "Above and right of" from the drop down box. Change the "yBase" to "Grid Top", "xBase" to "GridRight", "y" to a value of "-10", and "x" to a value of "0" as shown. |
| Step 19: |
The final step is to add a HighLowKey . Bind the "overlay" property of the HighLowKey to the "overlay5" property of the ScrollableChart. Your completed chart should appear as shown below. |
Why won't the InfoBrowser contents update in response to selection changes in ClassView or FileView?
