When Completed

Your NetCharts Designer perspective will appear like this:
 

Getting Started

Start by closing any open editors. Go to NetCharts Designer’s File menu and select the Close All option.
 
Next, create a new project named FadeProject.

Create the Dataset

From the toolbar click on the New Dataset wizard. Name your new dataset pieData, selectHypersonic SQL from the Data Sources list and click Next.
 
Use the Query Builder and Select the EXPENSETABLE, then select the EXPENSES, QTR104, QTR204, QTR304, and QTR404 columns.
 

 
Click Next and then Finish and Finish again. Five columns of data will be returned:
 

 
Add a variable called varExpense, and give a default value of Air. Next, add a WHERE clause to the SQL query so it reads:

SELECT EXPENSES,QTR104,QTR204,QTR304,QTR404 FROM EXPENSETABLE WHERE EXPENSES = ‘varExpense’

Click the Execute Query button, and your data will now show one row of data under the headers:
 

 
Create another dataset called menuData, and select Hypersonic SQL as the source. Use the ellipses button to enter the following query:

SELECT EXPENSES FROM EXPENSETABLE

Uncheck the Include Column Names check box. Click Finish, and finish up the data wizard. Your output should be a column of Expense categories:
 

Create a simple Pie Chart

From the toolbar click on the Create a New Chart icon. Call it pie, select Pie for the type and click Finish. Confirm the pie chart is 300 pixels high. Enter Quarterly Expenses for varExpense for the Chart Title.
 

Bind Data to the Pie Chart

Click the Data Source Binding tab, and select the Slices tree node. Select pieData.ndx, and checkthe Process Row Major check box. Enter a Column filter of 1-4 and a Row filter of 1.
 
Next, select the SliceLabels tree node. Select pieData.ndx, and check the Process Row Major check box. Enter a Column filter of 1-4 and a Row filter of 0.
 

 
Select the Legend Items tree node, and select pieData.ndx,. Enter a Column filter of 1-4 and a Row filter of 0.
 
Click the Presentation tab, and Select Legend from the tree node. Enable the legend by checkingthe Show Legend check box, place the legend at the bottom, and orient it horizontally. Select the Pie and Slices tree node. In the Label Content group, use the Label Content: drop down to selectPercent as Integer, Data. The Chart will look like this:
 

Create a page with a drop down menu using Ajax

Create a page by clicking on the Create Page icon on the toolbar, and call it page. Drag the pie chartonto the page, and click OK to its resource menu. Right click on the icon representing your chart in the page layout in the editor window. Select Horizontal Alignment from the drop down menu, and select Center.
 

 
Drag an HTML Form Element from the Pallet on the left over the icon representing the chart in the page layout. Select to tile the HTML Form Element vertically in the Layout Orientation Dialog. Select Drop Down Menu from the Select an HTML form Element Dialog:
 

 
Select the Menu tab from the Edit Menu Properties Dialog. With the Page Variable Drop downSelect varExpense. With the Options NDX Drop down, select menuData.ndx. Check the Use First Source Value Check box. Leave the next 3 drop down menus as their default.
 
Here’s the critical part of this exercise: Check the Update without page refresh check box. This enables Ajax.
 
Enter a label instructing users to Select an Expense Category in the label, and use the Location drop down menu to position it above the drown menu. Click OK.
 

Right click on the icon representing the drop down list in the page layout, and horizontally align it in the center of the page.
 
Several items have been added to your Project Navigator:, specifically a scripts folder. Expand the newly added scripts folder. Within you’ll find several model java scripts elements. To view any one of them, right click, select Open With, and select Text Editor. The updaters.js serves as the model for adding the necessary java script that enables Ajax to the generated page.

 

 
Use the drop down on the page, and select different Expense Categories. Watch the chart fade out, and fade in.
 

Additional Styling

Add a table between the chart and the drop down menu. Watch the chart and table update, independently.
 
Alter your Query to include Absolute values of each of the categories, and more user friendly labels for the column names:

SELECT EXPENSES, ABS(QTR104) AS “Quarter 1”, ABS(QTR204) AS “Quarter 2”, ABS(QTR304) AS “Quarter “,
ABS(QTR404) AS “Quarter 4” FROM EXPENSETABLE WHERE EXPENSES = ‘varExpense’

This will allow you to select Entertainment from the drop down, and have a chart generated. Since the values for Entertainment are negative without doing the above, a blank chart is generated.