When Completed

Your NetCharts Designer perspective will appear like this:
 

Getting Started

Start by closing any open editors. Click Close All in NetCharts Designer’s File menu.
 
Next, create a new project named NDXINCLUDEProject.

Create Datasets

To simulate a development/test database and a production database, create two Excel spread sheets called DevDataSource.xls and ProdDataSource.xls respectively (you can download these files by clicking the link).
 
Create DevDataSource.xls, by opening Excel, and cut‐and‐paste the following table into the spread sheet:
 

Create ProdDataSource.xls, by cut‐and‐paste the following table over the spread sheet you created in the previous step:

Import both spread sheets into your NetCharts Designer project. Right‐Click on the Project in the Project Browser, and select Import from the pop‐up menu:
 

Select File System from the Import menu:
 

 
Click the Browse button, and browse to where the two spread sheets were saved:
 

 
Select both spread sheets clicking the check boxes adjacent to their names and click Finish. The two spread sheets will be listed in the project:
 

 
Now, Create Windows System DSN definitions with which an ODBC connection from NetCharts Designer will be used to access the spreadsheets as though they were databases.
 
Click Start >Control Panel > Administrative Tools > Data Sources (ODBC):
 

 
Click the System DSN tab, and then click the Add button on the right:
 

 
Click the Driver do Microsoft Excel (*.xls) line, and then click the Finish button:
 

 
Name the first DSN DevelopmentCarData, and click the Select Workbook button.
 
To correctly get the location of the Excel files, restore NetCharts Designer, and right click on the DevDataSource.xls in the project navigator. Click on Properties in the pop‐up menu.
 

 
Drag your mouse pointer over and highlight the complete path and dataset name near the top of the properties for DevDataSource.xls dialog:
 

 
Press CTRL+C to copy the complete path and file name to the clipboard.
 
Now restore the Select Workbook dialog, and press CTRL+V
 

 
This will place the excel spread sheet from the project sub‐directory under NetCharts Designer in theDatabase Name field. Click OK three times to each of the dialogs in the background.
 
Perform the same procedure, and create a second Windows System DSN for theProdDataSource.xls spread sheet, except, substitute ProductionCarData for DevelopmentCarData from the previous Directions.
 
Create an NDX for the Development data, called DevData.ndx using the system DSN you just created.
 

 
Next select DevelopmentCarData from the Data Source Names (DSNs): listed. In the SQL: section add the following to pull all the data:
 

SELECT * FROM [CarData$]

 

 
The Development Data should show up in the Preview Browser:
 

 
Create another NDX called ProdData.ndx, referencing the Production spread sheet:
 

Create the Data Connection Template

For purposes of this Tutorial, literary license is being taken with the cursory use of the terms “Production” and “Development”. The assumption is both Production and Development databases are available to the Development/test machine on which NetCharts Designer is installed.
 
In practice, this is not necessarily true, and, in that case, the change to the Data Connection Template would have to be performed as an administrator task when the project is imported into the production NetCharts Server. However, in this Tutorial Exercise, please assume access to both databases from NetCharts Designer.
 
The goal of the exercise is to create a single NDX object that returns, first the results shown above from DevData.ndx, and then with a single external change returns the results shown above in ProdData.ndx. Once this is done, multiple NDX objects, similarly created, will all experience the same duality with a single external change.
 
For edification, compare the source of DevData.ndx to ProdData.ndx. Click on the Source tab for both, and examine the differences:
 
DevData.ndx:
 

 
ProdData.ndx:
 

 
The dbName and cacheKey properties have different values on these two NDX files. While the cacheKey property will be different for each object in the project, the dbName property is the focus of this exercise. The simplicity of this exercise requires that we only place dbName in our Data Connection Template. Typically however multiple properties will be defined in the template. Using “DevData.ndx”, highlight all the properties after the two comment lines at the top by dragging your mouse across them all, and type CTRL+C to copy them to the clipboard.
 
Create a Data Connection Template (NDXINCLUDE file). From the File menu, click File > New >Data Connection Template:
 

 
Name the NDX Include file name, DevProdProperties:
 

 
The blank editor for the NDXINCLUDE appears like this:
 

 
Click the Paste from clipboard button at the bottom:
 

 
All of the properties can be used in our ultimate NDX with the exception of the cacheKey. Although a short cut was used to create all the definitions, the Add, Edit and Remove buttons at the bottom of the editor can be used to create/modify these parameters as well. Click the cacheKey property, and click Remove to remove it from our NDXNCLUDE file.
 

 
Create an NDX from the NDXINCLUDE created in the previous step. Click the Create NDX button on the tool bar, call the NDX ActualData.ndx and select MS-Excel as the type and click Next.
 
From the Data Connection Template drop down select the newly created NDXINCLUDE:
 

 
Notice the Data Source Name(DSN) in the Connection group, and the SQL statement in the SQL Parameters group are set to the values from the NDXINCLUDE file. Click Finish.
 
Notice that all the values in the NDX editor that are acquired from the NDXINCLUDE are italicized and/or grey. Properties acquired in their entirety from the NDXINCLUDE file are light grey, properties overridden locally are dark grey, and properties defined locally only are in black.

Create an interesting Radar Chart

Create a radar chart. From the toolbar click the Create a New Chart icon. Call the chart being created carRadar, select Radar for the chart type and click Finish.
 
Make the radar chart 450 pixels high and 450 pixels wide. Enter Compare Cars for the Chart Title, create a ChartTitleStyle that uses a 18 pt bold Arial font. Choose the tealgradient for the Chart Background
 

Bind Data to the Radar Chart

Click the Data Source Binding tab, and select the Lines tree node. Select ActualData.ndx, and check the Process Row Major check box. Enter filters for Column of 1* and Row of 1*
 

 
Select the Axis Titles tree node. Select ActualData.ndx, and check the Process Row Major check box. Enter filters for Column of 1* and Row of 0.
 

 
Select the Legend Items tree node, and select ActualData.ndx, and uncheck the Process Row Majorcheck box. Enter filters for Column of 0 and Row of 1*.
 

 
Click the Presentation tab, Select Legend from the tree node and check Show Legend. Place the legend at the bottom, and orient it horizontally. Explicitly set the number of columns to 4. The Editor will look like this:
 

 
Select Axes from the tree node. For each access set the Style to plain. Next, the first 4 automotive attributes are scaled as a percentage, while the last one is actual values. Set the axis range accordingly. Select Axis 4, and in the Scale group, set the Max value to 30, and the step to 5. Select Axis 5, and in the Scale group, set the Max value to 10, and the step to 1.
 
The Chart will look like this:
 

 
Select Lines from the tree node. In the Line Sets group, click the New Line Set button 8 times to create a total of 9 line sets. Create 9 line set styles called LineSet1Style through LineSet9Style. For LineSet1Style; In the Line Style group, choose a solid line from the drop down, and a color of Redfrom the color chooser. In the Background Fill group, choose a fill type of Solid, a Background Color of Red, with a fade of 80%, from the Symbol group, choose a symbol of a circle from the drop down, a color of Red, a Size of 8 pixels and uncheck Enable Drop Shadow. The editor panel will appear like this:
 

 
Click OK, to see results. Edit the style, and click the copy button at the top. Make 8 more line styles inheriting properties from the LineSet1Style, but using different colors from the color chooser. Then assign the line set style to the corresponding Line Sets. The Chart will appear like this:
 

Create a page with the chart, and change the database assignment

Create a page by clicking on the Create Page icon on the toolbar, and call it page. Drag the radar chart onto the page, the Edit Dynamic Chart Properties dialog box appears, check the Disable Chart Cache check box.
 

 
Click OK.
 
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.
 
Edit the DevProdProperties.ndxinclude file. Select the dbName property, and click the Edit button:
 

 
In the Modify dbName dialog, change the value from “DevelopmentCarData” to “ProductionCarData”. Click OK. Your page should appear like this:
 

 
Please review the Help text on how caching effects the operation of dynamic changes to NDXINCLUDE files.
 
Convince yourself that changing the dbName property in the NDXINCLUDE file creates the same results as binding the chart to either DevData.ndx, or ProdData.ndx. Do this by altering the Data Source by using the drop down menu in the Data Source Binding for the chart.

Additional Styling

Clear all the editors from the NetCharts Designer perspective. Create a Manual Entry NDX calledMutiSelectData.ndx. Select the items from the table below, and type CTRL+C.

 
In the Manual Data Entry Dialog, click the Paste from Clipboard button. Click Finish.
 
Change the Title in the chart to read Compare Sports cars \n not varUnsportyCars
 
Add two properties to the NDXINCLUDE – defaultvalues and variables. EditDevProdProperties.ndxinclude, and click the Add button at the bottom. Add a variable definition by manually creating the two properties that define variables.
 

 
Edit ActualData.ndx, and confirm it inherited the new properties. The Variables group should appear like this:
 

 
You must delete and re‐drag you chart to the page, and your chart should appear like this:
 

 
Edit page.pgl, and drag an HTML Form Element adjacent to the chart until the area immediately to the left is highlighted by a black line.
 

 
This will put your control to the left of the chart on the page layout. Choose Multiple Item Select Box from the drop down, and click OK.
 
In the Properties dialog box, click the Multiple Select tab, and Select varUnsportyCars for the Page variable, MultiSelectData.ndx for the Options NDX, Enter Yugo by clicking the Add button for the default Values. Enter Please Select one or more Unsporty Cars: in the Label, and optionally create a style for the label.
 

 
Click the Value tab. Enter s for the Item Suffix, and , or for the Item Separator.

 

 
Click OK
 
Click some other Unsporty car in the multi Select, and then <alt> click one other Unsporty car in the Multi Select.
 
Your NetCharts Designer will appear like this: