EP allows you to create drill-down charts using the charting post-processing wizard. Drill-down charts use server-side click-across to link multiple charting portlets together into a cohesive application.
To create a drill-down charting portlet for two chart portlets, there must be a relationship between the category or series names of the first chart and the parameters used in defining the second chart’s data source.
This section has procedures to illustrate the creation of drill-down charts using server-side click-across. You create a table of data with the stock market’s most active stocks and use drill-down charting to display the quote page with details of a selected stock.
Creating the Stock Details portlet
Log in to Web Studio.
Select Portlets from the Build menu in the left pane, select New from the Portlet Manager Status menu, then click the New button to launch the Portlet Builder.
Click the arrow to the right of the Add button and select Web Element
When the New Web Element window appears, enter http://finance.yahoo.com/ in
the Location field and click Find.
When the Yahoo Finance Web site displays, enter SY in
the Enter Symbol field below the Yahoo Finance title bar, and click
GO.
In the New Web Element window, verify that One Click is selected as the Format, and click Next.
Perform a One Click capture on the left column of the Sybase stock details table; that is, when the yellow selection box displays, click on the Last Trades cell.
In the window where you choose which capture option to use, click Select to the left of the top grid capture, which should look like the capture option shown below, then click Next.
On the Add Split Rules window, click Next to bypass the options.
On the Define Record Layout window, click Next to bypass the options.
On the Filter window, in the Add Filter Rule section,
select “Include record(s)” and “number”,
enter 1,4,5,8 in the text field,
click Add, then click Next. The result looks similar to Figure 1-2.
On the Parameters window, select the Variable option for the “s” parameter and complete these options for that parameter:
Display Name – enter symbol.
Default Value – enter SY.
Type – select None.
Personalize, Key, Kind – accept the default values.
Required – select this option.
Click Next.
On the Window Preview, enter Stock
Details for the element name and click Next.
On the Continuous Capture window, because you do not want to perform a continuous capture, do not to click Continue, and click Finish.
In the Portlet Builder, click Save.
In the New Portlet Finish window, complete these options:
Content tab Enter Stock Details in
the Name field. The In Context option is selected by default.
Click Finish.
When you see the message that the portlet was successfully saved, click OK.
Close the Portlet Builder. Back in the Web Studio main window, select New from the Portlet Manager Status menu.
Right-click the Stock Details portlet in the details pane and select Create Chart. The Create Chart wizard appears.
In the Choose a Selection window, click Select next to the table and click Next.
Complete the following options in the Select Chart Type window:
Chart Title – enter Stock
Details.
Chart Height – accept the default of 500.
Chart Width – accept the default of 500.
Font Name – accept the default of Sans Serif.
Chart Legend – select None from the drop-down list.
Chart Output – accept the default of JPEG.
Chart Type – select Bar Chart.
Click Next to continue.
On the Chart Parameters window, set these options:
X-Axis Label – enter Time.
Y-Axis Label – enter Value.
Category Labels – select Column 1 from the drop-down list.
Show Values – select this option.
Series 1 Data – select Column 2.
Series 1 Name – accept the default. This field does not matter since the legend is set to None.
Series 1 Color – select Blue.
Click Next to continue.
In the Preview window, click Finish.
In the Web Studio main window, right-click the Stock Details portlet in the detail view and select Approval Status | Approved.
When you see the confirmation that the portlet was saved successfully, click OK.
Creating the Most Actives
stock portlet
In Web Studio, select Portlets from the Build menu in the left pane, select New from the Portlet Manager Status menu, then click the New button to launch the Portlet Builder.
Click the arrow to the right of the Add button and select Web Element.
When the New Web Element window appears, enter http://finance.yahoo.com/ in
the Location field and click Find.
When the Yahoo Finance Web site displays, click the Most Actives link above the Market Overview.
In the New Web Element window, verify that One Click is selected as the Format, and click Next.
Perform a One Click capture on the Most Actives stock table; that is, when the yellow selection box displays, click on the Symbol header cell.
In the window where you choose which capture option to use, click Select to the left of the top grid capture, which should look like the capture option shown in Figure 1-3, then click Next.
Figure 1-3: Select capture option
On the Add Split Rules window, set the following:
In the left drop-down list, select “Column No.”.
Enter 3 in
the text box.
In the second drop-down list, select “Space”.
Click Add.
On the Define Record Layout window, click Next to bypass the option.
On the Filter window, in the Add Filter Rule section, set the following:
“Include record(s)” and “number”,
enter 2-6 in the text field,
and click Add;
“Include field(s)” and “number”,
enter 1,3 in the text field,
and click Add.
Click Next.
On the Parameters window, click Next to bypass the options.
In the Window Preview window, enter Most Actives for the Element Name.
On the Continuous Capture window, click Finish.
In the Portlet Builder, click Save.
In the New Portlet Finish window:
Name – enter Most
Actives.
In Context – select this option.
Roles tab Click Add All to add all of the available roles to the assigned roles list.
Click Finish.
Close the Portlet Builder. Back in the Web Studio main window, select New from the Portlet Manager Status menu.
Right-click the Most Actives portlet in the details pane and select Create Chart.
In the Create Chart wizard, click Select next to the table and click Next.
Complete the following options in the Select Chart Type window:
Chart Title – enter Most
Actives.
Chart Height – accept the default of 500. To view this chart on a PDA, change this value to 300; PDA screens are only 320 pixels in height.
Chart Width – accept the default of 500. To view this chart on a PDA, change this value to 200; PDA screens are only 240 pixels in width.
Font Name – accept the default of SansSerif.
Chart Legend – select None from the drop-down list.
Chart Output – accept the default of JPEG.
Chart Type – select Bar Chart.
Create An Image Map – select this option. Several additional options display when this option is selected.
Category Event Name – enter symbol,
which is the name of the parameter in the Stock Details portlet.
Accept the default options that are selected below the Category Event Name.
Series Event Name – enter nothing.
While this is a required value, we are not using it, so enter some
value such as “nothing”, without the quotes.
Accept the default options that are selected below the Series Event Name.
Client Side – make sure this option is not selected (unchecked).
Click Find Portlet.
When the Search window displays, click Search, select the Stock Details portlet in the Results pane, then click Add. The Name, Resource ID, and Window ID of the associated portlet display.
Click Next to continue.
In the Chart Parameters window, complete these options:
X-Axis Label – enter Stock to
establish a label for the row.
Y-Axis Label – enter Volume to
establish a label for the column.
Category Labels – select Column 1 from the drop-down list.
Show Values – select this option.
Series 1 Data – select “Column 2” from the drop-down list.
Series 1 Name – accept the default, since the legend is set to None.
Series 1 Color – select “Blue” from the drop-down list.
Click Next to continue. The Most Actives chart displays in the Preview window.
In the Preview window, click Finish.
In the Web Studio main window, right-click the Most Actives portlet in the detail view and select Approval Status | Approved.
When you see the confirmation that the portlet was saved successfully, click OK.
Previewing the drill-down chart portlet
Select Approved from the Portlet Manager Status menu.
Select the Most Actives portlet in the detail pane and click Preview.
Click one of the bars in the bar chart. You see the Stock Details charting portlet with a bar chart for the selected company.
| Copyright © 2004. Sybase Inc. All rights reserved. |
|
|
