To illustrate the use of drill-down charts using server-side click-across, this section contains procedures to create a table of data with the stock market’s most active stocks and use drill-down charting to get the quote page with details of a selected stock. The information is presented in a bar chart.
To create a drill-down charting application for two chart applications, 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 procedure assumes you:
Know how to log in to Mobile Web Studio.
Know how to create and approve an application in Mobile Web Studio.
Have set the Split window property (SPLITENABLED) to “true” in the global.properties.xml file located in %SYBASE%\tomcat\webapps\onepage\config.
Creating the StockDetails application
Log in to Mobile Web Studio.
Select Applications from the Build menu in the left pane, select New from the Application Manager Status menu, then click the New button to launch the Application Builder.
Click Add.
When the New Web Element window appears, in Address,
enter http://finance.yahoo.com/,
and click Go.
When the Yahoo Finance Web site displays, type SY in
the Enter Symbol field below the Today in Finance title bar, and
click GO.
Verify that One Click is selected as the Format, and click Next.
Place the cursor over the Last Trade cell and click the mouse. The window refreshes displaying various presentation possibilities.
Click Select next to the first option, then click Next.
On the Split window, click Next to bypass the options.
On the Define window, click Next to bypass the options.
On the Filter window, in the Add Filter Rule section, add a rule to include only rows 1, 4, 5, and 8:
In the left-most drop-down list, select “Include record(s).”
Make sure the second drop-down list is set to “number.”
In the text box, enter 1,4,5,8 to
indicate you only want to include these records.
Click Add. In Preview, the records Last Trade, Prev Close, Open, and 1 Yr. Target Est. are highlighted in blue, and a new rule is added under Current Filter Rules.
Click Next.
On the Configure Parameters window, select the Variable option for the “s” parameter and complete these options for that parameter (accept the defaults for all others):
Display Name – enter symbol.
Default Value – accept SY.
Type – select None.
Click Next.
On the Window Preview, enter StockDetails (no
space) for the element name and click Finish.
In the Application Builder, click Save to create the application.
On the Finish window, make this change (accept the default for all others):
Name – enter StockDetails (no
space).
In Context – select this option.
Click Finish, and click OK to confirm.
Click Close to close the Application Builder.
In the Mobile Web Studio main window, select New from the Application Manager Status menu, then right-click the StockDetails application in the details pane and select Create Chart. The Create Chart window displays.
Under Choose a Selection, click Select, then click Next.
Complete the following options in the Select Chart Type window:
Chart Title – enter StockDetails.
Chart Height – change this value to 300, since PDA screens are only 320 pixels high.
Chart Width – change this value to 200, since PDA screens are only 240 pixels wide.
Font Name – accept the default of SansSerif.
Chart Legend – select None from the drop-down list.
Chart Output – accept the default of JPEG.
If you are using Pocket Internet Explorer, you can use
Flash. Otherwise, you must use JPEG.
Chart Type – select Bar Chart.
Click Next to continue.
On the Create Chart window, look for the Chart Parameter section, and set these options:
X-Axis Label – enter Time to
establish a label for the row.
Y-Axis Label – enter Value 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.
In the Preview window, you see a stock details bar chart in blue, with labels for Value and Time.
Click Finish to save the application, and click OK to confirm.
In Mobile Web Studio, click New under Application Manager Status. The StockDetails application displays in the detail pane.
Approve the application:
Right-click the StockDetails application in the detail pane, and select Approval Status | Approved.
Select Approved under Application Manager Status and verify the StockDetails application displays.
Creating the Most Actives
stock application
In Mobile Web Studio, select Applications from the Build menu in the left pane, select New from the Application Manager Status menu, then click the New button to launch the Application Builder.
Click Add.
When the New Web Element window appears, enter http://finance.yahoo.com/ in
the Location field and click Go or press Enter.
When the Yahoo Finance Web site displays, click the Most Actives link, located in the left column below Market Summaries and above Investing.
When the Stock Market is closed, the previous day’s
most active stocks display.
Verify that One Click is selected as the Format, and click Next.
Perform a one-click capture on the Most Actives stock table by clicking on Symbol (the cursor flag provides instructions). The window displays various presentation styles.
Click Select to the left of the first grid, and then click Next.
On the Split window, notice that Column 3 includes several values—trade and time. Split Column 3 into separate columns to accommodate each value:
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. The Preview section shows the changes, and a new rule is added.
Click Next.
On the Define 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 Configure Parameters window, click Next to bypass the options.
In Window Preview window, enter Most
Actives for the Element Name, and click Finish.
On the Application Builder, click Save to create the application.
In the Finish window, change:
Name – enter Most
Actives.
In Context – select this option.
Click Finish, then click OK to confirm.
Click Close to close the Application Builder.
On the Mobile Web Studio main window, select New from the Application Manager Status menu.
Right-click the Most Actives application in the details pane and select Create Chart.
On the Create Chart window, click Select, and click Next.
Complete the following options in the Select Chart Type window:
Chart Title – enter Most
Actives.
Chart Height – change this value to 300, since PDA screens are only 320 pixels high.
Chart Width – change this value to 200, since PDA screens are only 240 pixels wide.
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 StockDetails application.
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, hence the value “nothing”.
Accept the default options that are selected below the Series Event Name.
Client Side – make sure this option is not selected (unchecked).
Click Find Application.
When the Search window displays, click Search, select the StockDetails application in the Results pane, then click Add. The Name, Resource ID, and Window ID of the associated application 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 Mobile Web Studio main window, right-click the Most Actives application in the detail view and select Approval Status | Approved.
When you see the confirmation that the application was saved successfully, click OK.
Previewing the drill-down chart application
Select Approved from the Application Manager Status menu.
Select the Most Actives application in the detail pane and click Preview.
Click one of the bars in the bar chart. You see the StockDetails charting application with a bar chart for the selected company.
The Most Actives application is used in “Creating the Most Actives stock application”.
