Many web‐based reports are interactive, allowing the user to change configuration information in order to provide a pseudo ad‐hoc style report. This next tutorial will involve creating a variable data query, a chart, a table, and then a page with a menu to drive the report.

When Completed

Your NetCharts Designer perspective will appear like this:
 

Create a New Project

As was done in the Five Minute Report tutorial, ensure NetCharts Designer is started and then create a new project named MenuReport.

Creating a Variable Named Data Set

This example uses variables to dynamically change charts and tables, so our first step is to create a Named Data Set (NDS) that uses a variable. Start by selecting the icon for the New Data wizard off of the toolbar.
 
Type in variabledata into the Named Data Set Name field, and select the Hypersonic SQL data source.
 

 
Select the Next button. To view the available tables and columns in this database, select the Details… button in the SQL Parameters group. The dialog will show the available tables in a tree structure – you can click on the ‘+’ tree nodes to see the individual columns.
 

 
Click OK, and type in select * from expensetable to the SQL edit box. Select the Finish button. This will close the dialog and open the data editor.
 
Next, in the editor’s SQL group, change the query to read:

select Expenses,FIELDS,YR2004 from expensetable

Then, in the Variables group, click on the Add button. In the dialog that appears, set FIELDS as the Name, and QTR104 as the Default.
 

 
Click on OK. This will add the variable and execute the query. The default value is substituted for FIELDS, and the three columns are shown.
 

 
Next, we will adjust the SQL statement to vary the rows. Change the SQL query to read:

select Expenses,FIELDS,YR2004 from expensetable where Expenses like ‘THEEXPENSE’

In the Variables group, click on the Add button. In the dialog that appears, set THEEXPENSE as the Name, and % as the Default.

Create a Database Driven Menu NDS

This step creates a Named Data Set that we will use later to populate a menu. This NDS will be driven from data in the database.
 
Bring up the data wizard. Name the file expenselabels and select Hypersonic SQL as the data source.
Select Next, and then type in:

select expenses from expensetable

Uncheck the Include Column Names checkbox. Select Finish.
 

Create a Manual Menu NDS

Sometimes it is easier to simply key in a menu’s options rather than configure a database request to do so. This NDS will be done using a simple manual NDS.
Bring up the data wizard. Name the file timeperiods and select Manual Data Entry as the data source.
 

 
Select Next. In the data table provided, enter in the following data.

 
Click Finish.
 

Create a Chart using Variable Data

Select the chart wizard icon. Set the chart name to be bar. Choose 3D Bar as the chart type.
 

 
Click Finish.
Now, let’s bind in the data. Select the Data Source Binding tab at the bottom of the Bar Chart 3D editor.

Select Bar Values from the tree control on the left, and select variabledata.ndx from the Data Source menu. Set the second and third column to Bar Set, and check the Row 1 checkbox. Also, check the Process Row‐Major checkbox.

 
Now, select the Bar Labels node from the tree control on the left, and again, select variabledata.ndx from the Data Source menu. Set the second and third columns to Bar Labels and check the Row 0 checkbox. Again, check the Process Row‐Major checkbox.
 

 
Click on the Presentation tab at the bottom of the Bar Chart 3D editor and change the following properties:

• In the Titles group, enter the following into the Text field: THEEXPENSE cost for FIELDS

• In the Barchart Properties group, enter 50 in the 3D Depth drop down menu.
• Select the Bars node from the tree control on the left.
• In the Bar Sets group, under the Bar Set 1 tab, click on the Color button to bring up the Color Dialog. Select a color for the bars. Click OK when done.

Create a Table using Variable Data

Select the table wizard icon. Set the table name to be table and click Next. Set the Data Source to variabledata.ndx. Click on the Finish button.
 
In the Table Properties group, change the Table Style to basictableright. Click on the style icon . Uncheck the Autosize checkbox for Table Width in the Table Content group, and set the size to 400 px. Click OK.
 
Select the Column Definitions node from the tree control at the left, and click the Add button twice to create definitions for columns 0 and 1.
 
Select the COLUMN_1 tab. Set the Number/Date Formatting menu to dollarsandcents. Click on the Add button. Notice how the definition for Column 2 inherited the configuration from the column 1 definition.
 

Create the Report Page

Select the page wizard icon. Set the page name to be page and select Finish.
 
Drag the bar.cdx file from the NetCharts Designer Project Navigator onto the Page Layout panel. A resource menu dialog will appear. Click on the variables tab for the configuration parameters for the variables defined in the chart’s data source. In the THEEXPENSE Value text field, enter in Air.
 

 
Select OK. The page will update, and the chart title will reflect the default assignment to the variable.
 

 
Next, drag the table.tbl file onto the page layout panel, overtop of the icon representing the chart. A Layout Orientation dialog will appear. Click the Vertical radio button.
 

 
A Edit Dynamic Table Properties dialog will appear. Click on the variables tab to show the variables defined in the table’s data source. In the THEEXPENSE Value text field, enter in Air.
 

 
Click OK, the page should now show a chart and a table with the default data.
 

Add the Menus

From the Page Elements palette on the left of the page editor, drag an HTML Form Element to the page layout. The target area will become black. So drag the HTML Form Element until the line above the icon representing the chart becomes a solid black line running the length of the
 

 
A dialog will appear, select Drop Down Menu, click on the Menu tab, and then set the following fields:

• Select FIELDS from the Page Variable dropdown menu. This identifies the variable that the menu will change.
• Select timeperiods.ndx from the Options NDX menu. This specifies from where the list of menu items will come.
• Set the Default Value to be QTR104
• Allow the default selection of The Current Page from the Menu Target menu to remain. When the menu is activated, this page will be executed again with the menu selection.
• Check the Pass Page Variables check box.
• Set the Label text field to Time Period(s):
   
  

Select OK. The menu will be added to the top of the page.
 
Drag another HTML Form Element to the page editor, drop it over the first one. Allow the Horinzontal selection in the Layout Orientation menu to remain, and select Drop Down Menu. Set the following fields in the Menu properties tab:

• Select THEEXPENSE from the Page Variable dropdown menu.
• Select expenselabels.ndx from the Options NDX menu
• Set the Default Value to be Air
• Allow the default selection of The Current Page from the Menu Target menu to remain.
• Check the Pass Page Variables check box.
• Set the Label text field to Expense Type:
   
  

Click OK. The report will now be shown. Test by selecting different menu options.
 

 
This project can be exported if desired, following the same export instructions described in the Five Minute Tutorial.