When Completed

Your NetCharts Designer perspective will appear like this:
 

 
After selecting the second tab:
 

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 TabbedReport.

Create Data Sets

By now you are pretty familiar with how to set up data sources, so we will create all the data sources we need for this project at once. In each case you will need to click the ellipsis button, type in the query, and then click OK. Please create the following Named Data Sources with the following queries and variables:
 
diversityMenu.ndx

Select DISTINCT ethnicity FROM EMPLOYEE

Uncheck the Include Column Names in Output checkbox.
 
diversityPieData.ndx

SELECT ethnicity,COUNT(*) as total FROM EMPLOYEE WHERE division IN varDivision GROUP BY ethnicity

Click on Add from the Variables group. Type in varDivision for the name with a default value of(‘East’)
 
divisionMenu.ndx

Select DISTINCT division FROM EMPLOYEE

 
Uncheck the Include Column Names in Output checkbox.
 
genderPieData.ndx

SELECT gender,COUNT(*) as total FROM EMPLOYEE WHERE division IN varDivision AND ethnicity IN varEthnicity GROUP BY gender

 
Click on Add from the Variables group. Type in varDivision for the name with a default value of(‘East’)
 
Click Add again and type in varEthnicity for the name with a default value of (‘White/Non Hispanic’)
 
termsHiresData.ndx

SELECT COUNT(*) as total, 75 as handlength FROM employee WHERE varDateType BETWEEN ‘varStartDate’ AND ‘varEndDate’

 
Click on Add from the Variables group. Type in varDateType for the name with a default value ofstart_date
 
Click Add again and type in varEndDate for the name with a default value of 2004-03-01
 
Click Add again and type in varStartDate for the name with a default value of 2004-01-01

Create Charts

Diversity Pie Chart

Select the New Chart wizard icon from the tool bar. After the chart wizard appears, type indiversityPie as the Chart Name, and select Pie as the type, and then click Finish to launch the editor panel.
 

 
Bind the data to the chart. Select the Data Source Binding tab and from the tree control select Slices. Choose diversityPieData for the data source, set the menu above the last column to Slices, and click on the Select Rows button
 

 
Next select Slice Labels from the tree control. Choose diversityPieData for the data source, set the menu above the first column to Slice Labels, and click on the Select Rows button
 

 
Next select Legend Items from the tree control. Choose diversityPieData for the data source, set the menu above the first column to Legend Items, click on the Select Rows button and uncheckProcess Row‐Major
 

 
Click on the Presentation tab and select the top level node (Pie Chart). Under the General Panel set Default Colors to moss. Under Titles group, in the Text: edit box type Diversity By Division. In the same group, click on the pencil icon to the right of the Style dropdown list. Call this new stylechartTitleStyle and click OK. Choose an Arial 12 pt bold font, set the Text Color to gray, set the Align dropdown list to Left, and click OK.
 

 
Next, Choose the Pie and Slices tree node. Under the Slices group, in the Slice border drop down menu, select noline, uncheck Use Default checkboxes next to Minimum Size and Maximum Size and set the Width to 175 and the Height to 175 respectively. Under the Label Content group, in the Label Content dropdown menu, select Percent as Integer.
 

 
Select the Legend tree node. In the Display group, check the Show Legend checkbox. In the Location group, choose Bottom for Location, and choose Horizontal for the Layout and select 2from the Number of Columns drop down menu. In the Display group, click on the pencil icon next to Label Style. Call the style legendStyle and click OK. Give this new style a 10 pt Arial font with aLeft Alignment and click OK
 

 
Gender Pie Chart
Right‐click on the diversityPie.cdx and select Copy. Right‐click on the TabbedReport project and click Paste. A text box will appear to give this chart a new name; call this chart genderPie.cdx.
 

 
Double click on genderPie.cdx. We need to bind the correct data to this chart, so click on the Data Source Binding tab and choose the Slices tree node. Select genderPieData.ndx for the Data Source and ensure that the last column is set to Slices and that Row 1 and Row 2 are checked.
 

 
Next, bind Slice Labels and Legend Items to genderPieData.ndx. Ensure that for Slice Labels the menu for the first column is set to Slice Labels and under Legend Items that it is set to Legend Items. Additionally, make sure that Row 1 and Row 2 are checked.
 

 
Select the Presentation tab. Under the top level Pie Chart node set the Default Colors to vangogh and give this chart a new title of Gender By Division And Ethnicity.
 

 
Terminations and New Hires Dial Chart

Select the New Chart wizard icon from the tool bar. After the chart wizard appears, type in termsHiresDial as the Chart Name, select Dial as the type.
 

 
Click Finish to bring the chart template into the editor panel.
 
Select the Data Source Binding tab, expand the Hand Properties group, and then select Hand Data. Select termsHiresData.ndx for the Data Source. Set the menu over the first column to Hand Value, the menu over the last column to Hand Length, check Process Row‐Major click the check box for row 1. Additionally, for Hand Active Labels, select termsHiresData.ndx, check the Row 1 checkbox and set the menu over the first column to Hand Popups. Float your mouse over the tip of the hand to ensure that the data is being displayed.
 

 
Click on the Presentation tab and select the top level node Dial Chart. Under the General group, change the size of the chart to be 250 x 270. Click on the pencil icon next to Background Style and create a new style called dialBackground. In the style editor, change the Fill Type to solid and choose white for the Background Color. Click OK
 

 
Select the Dials tree node, and under the Basics group, set the Arc Range Start to -140, and the Arc Range Stop to 140. Under the Dial Scale group, set the Dial Scale Minimum to 0, Maximumto 500 and Step to 50. In the Dial Tics group, set the Label Style to arialBold12Pt, Label NumberFormat to basicnumber.
 

 
Select the Sectors tree node, click the X next to the sector tab name Sector3 and Sector2 to remove the green and yellow sectors from the dial. Select Sector1 change the Color to Orange. Set the Dial Sector Start to 0 and Dial Sector Stop to 500.
 

 
Select the Hands tree node. Insure the End Style is set to Needle Button and the End Color to Orange.
 

 
Click on the Variable Binding tab and select the Header Text node under General. Check the HEADERTEXT CDX Variable Name.
 

 
Finally, click on the Presentation tab and under the Dial Chart tree node set the style for Titles to chartStyleTitle
 

Create Pages and HTML Forms

Diversity Page

Go to NetCharts Designer’s File menu and select the Close All option. Create a new page and call it Diversity. Drag and drop the diversityPie.cdx chart onto the Page Layout panel and choose OK when the Dynamic Chart Properties resource menu appears. Next, drag and drop the genderPie.ndx chart on top of the logo representing diversityPie.cdx in the Page Layout panel. When the diversityPie.cdx icon turns a pink color, release the mouse button. A dialog will appear for Layout Orientation, choose Horizontal and click OK and then OK again to the Dynamic Chart Properties resource menu.
 

 
Next, we want to specify the width of the table that the two chart objects reside in. Click on the blue box that surrounds the two charts on the Page Layout Panel so that a black box appears around both objects. Double‐click to bring up the cell properties dialog box. Click on the pencil icon to create a new style called pageCellStyle.
 

 
Uncheck Autosize for Cell Width and set the width to 800 pixels.
 

 
Drag and drop an HTML Form Element above the two charts. When the HTML Form Element dialog appears choose Checkboxes (Single Variable) and click OK
 

 
The Checkbox(es) Properties dialog now appears. Choose the Checkbox(es) tab, selectvarDivision for the Page Variable and divisionMenu.ndx for the Options NDX. Click Add next to the Default values and type in East. Type in Division: for the Label and create a new Style called labelStyle which uses a 12pt bold font and aligns to the left.
 
Click on the Value tab and type in the following for each value:

Click OK to Finish
 

 
Drag and drop another HTML Form Element next to the division checkboxes. When the HTML Form Element dialog appears, choose Multiple Item Select Box
 

 
The Multiple Select Properties dialog now appears. Choose the Multiple Select tab, select varEthnicity for the Page Variable and diversityMenu.ndx for the Options NDX. Click Add next to the Default values and type in African American. Type in Ethnicity: for the Label and select labelStyle for the Style
 
Click on the Value tab and type in the following for each value:

 

 
Click OK to finish.
 
Test to make sure that your page is working by clicking on various Divisions and Ethnicities (hold control down to choose multiple ethnicities) and verifying that the data is changing. You will notice that every time that you click on a checkbox or select a different ethnicity that the page “fires” or posts back to the server. Generally, if you have more than one form element this is not desirable behavior. The way to unwire this auto‐postback functionality is to add a Submit Button to the page. Slowly drag another HTML Form Element from the Page Elements palette to the right of the diversity multiple select box until a black vertical bar appears. Drop the element to the right of diversity multiple select box. When the HTML Form Element dialog appears, choose Submit Button.
 

 
When the Edit Submit Button Properties dialog appears be sure that Pass Page Variables is checked.
 

 
Looking at the page, the form is too spread out across the top of the page. Click on the cell around the three form elements and when it turns black double‐click to bring up the Cell Properties dialog box. Create a new cell style called formCellStyle and give it a fixed width of 400 pixels. After Clicking OK, your page should now look like this:
 

 
Terminations and Hires Page

Create a new page and call it TermsHires. Drag and drop the termsHiresDial.cdx chart onto the Page Layout panel. When the Dynamic Chart Properties dialog appears, select Variables. Set the HEADERTEXT variable to Specify Value and type in New Hires for the value.
 

 
Click OK to finish.
 
Again drag and drop the termsHiresDial.cdx onto the page on top of the other chart. When the chart turns pink, release the mouse and then select OK when the Layout Orientation dialog appears. When the Dynamic Chart Properties dialog appears, select Variables. Set the HEADERTEXT variable to Specify Value and type in Terminations for the value. Also, set the Value for varDateType to end_date. Click OK to Finish.
 

 
Select the blue box around the two charts. When the box turns black, double click on it and select pageCellStyle for the cell style.
 

 
Drag and drop an HTML Form Element from the Page Elements palette onto the Page Layout above the two dial charts. When the HTML Form Element dialog appears, select Text Field and click OK. The Text Properties dialog appears. Choose varStartDate for the Page Variable , 2004-01-01 for the Default Value, type in Start Date: for the Label, and choose labelStyle from the Style drop down.
 

 
Click OK.
 
Drag and drop another HTML Form Element from the Page Elements palette onto the Page Layout on top of the other text field. When the icon turns pink, release the mouse and then select OK when the Layout Orientation dialog appears. Next the HTML Form Element dialog appears. Select Text Field and click OK. The Text Properties dialog appears. Choose varEndDate for the Page Variable , 2004-03-31 for the Default Value, type in End Date: for the Label, and choose labelStyle from the Style drop down.
 

 
Click OK.
 
Drag and drop another HTML Form Element from the Page Elements palette next to the last text field. When the HTML Form Element dialog appears, select Submit Button, and click OK. When the Submit Button Properties dialog appears, make sure that Pass Page Variables is checked.
 

 
Try some different date combinations using the correct date format (YYYY‐MM‐DD) to make sure that your data is changing for the dials. Just like the diversity page, the form is too spread out across the top of the page. Click on the cell around the three form elements and when it turns black double‐click to bring up the Cell Properties dialog box and select formCellStyle. After you click OK., you will notice that the labels are now being displayed on two lines. Click on each of the text field elements and position the label on top by setting Location for the label to top. Additionally, right click on the submit button and set its Vertical Alignment to bottom.
 

 
Creating the Tabbed Layout

Create a new page called MainPage. Drag and drop a Tabbed Reports element onto the Page Layout.
 
Click on the pencil icon next to Tab Style and create a new style called tabStyle. Check Use Borders and set the Frame Dimensions Height to 600 pixels. Under Active Tabs set the Fill Type to SOLID, choose light blue for the color, check all the boxes for borders and padding (set the right and left padding to 20 pixels), and set the font style to Arial 10 pt bold. Under Inactive Tabs, set the Fill Type to solid, choose light grey for the color, check all the boxes for borders and padding (set the right and left padding to 20 pixels), and the set the font style to Arial 10 pt with a normal weight.
 

 
Click OK.
 
Next, add the Diversity tab by clicking on the Add button. Type in Diversity for the Tab Title. Select Diversity.pgl from the Tab Contents menu, and click OK. Click Add again and type in Terminations for the Tab Title, select TermsHires.pgl from the Tab Contents menu and click OK. Finally, click OK to exit the Tabbed Reports Properties dialog. This project can now be exported to NetCharts Server via the Visual Mining Project Export utility described in the Five Minute Report.
 

 
It is possible to orient check boxes Horizontally. Rearrange the HTML controls using Horizontal check boxes.
 
Double click on the icon representing the Check Box HTML Control in the page layout. In the Edit Checkbox(es) Properties dialog, select the Checkbox(es) tab. Select Horizontal from the Orientation drop down menu.
 

 
Drag the Submit icon in the page layout overtop of the Check Box HTML Control icon. When the icon name goes pink, release the mouse button, and tile vertically, but selecting the Vertical radio button in the Layout Orientation dialog. Double click in the space between the box outlining the two chart icons and the box outlining the three HTML Control Icons. Reapply the FormCellStyle in the Edit Cell Properties dialog. The page will look like this: