Section 1: Five Minute Report

Report generation using NetCharts Designer can be quite simple. This tutorial takes you through the steps of hooking up to a data source, creating a chart, creating a table, putting them both in a page layout and then deploying the results to the web.

NOTE: At the end of this tutorial, the project is deployed to your NetCharts Server. If you do not have a NetCharts Server installed, you can either download it from our website or skip the deployment part of the tutorial.

Getting Started

The first step is to start NetCharts Designer either by clicking on the desktop icon or clicking: Start Menu > Programs > Visual Mining > NetCharts Designer 7.0 > NetCharts Designer. In the default configuration, it has three main panels, the Project Navigator, the Preview Browser, and the Editor Tab Panel also called the Context Specific Editor Panel. It should look something like this when it first appears:
 
designer layout

NOTE: Based on the screen resolution, it is often necessary to re-size the above areas in the NetCharts Navigator perspective. Click and drag on the line separating the Editor Tab Panel from the Project Navigator and Preview Browser to make the Editor Tab Panel take up the bottom 1/3 of the screen.

Creating a Project

All related files, including data access definitions, chart templates, table templates, page layouts, images, and more, are stored in a NetCharts Designer project. To create a new project, select the New Project wizard icon in the taskbar.
 
Optionally, you may delete the Welcome tab from the editor panel as it is no longer needed by clicking on the white “X” on the right hand side of the tab.
 
designer layout
 
Selecting the project icon will cause the Project wizard to appear. Type in the name FastTutorial and select the Finish button. A new project will appear, selected, in the Navigator.

NOTE: The project.css file is used to store predefined and user‐defined styles. Later tutorials will explain and address this feature.

designer layout

Creating a Named Data Set (NDS)

A Named Data Set (NDS) is a data connection object. Once configured it returns a set of data that can be bound to charts and tables. We will create a sample data set here using the built‐in demonstration database. Start by selecting the New NDS wizard icon in the taskbar.
 
designer layout
 
The NDS wizard will appear. Type in data as the Named Data Set Name, and select Hypersonic SQL as the Data Source.
 
NDX Wizard
 
Click the Next button. The second panel will appear. Type in SELECT * FROM PAGEHITTABLE WHERE MONTH BETWEEN ‘2010-01-01’ AND ‘2010-12-31’ in the SQL: text field.
 
NDX Wizard
 
Click the Finish button. An editor is opened in the main panel showing the current NDS configuration, and the preview browser will populate with the results. Configure the date format by selecting MMM‐yy (ex. Jan‐08) from the Date Format menu.
 
NDX Data

Creating a Chart

Now that we have some data to work with, we can create a chart that uses it. Start by selecting the New Chart wizard icon in the taskbar.
 
Chart
 
After the chart wizard appears, type in bar as the Chart Name, and allow the default Chart Type of Bar to remain selected.
 
Chart Wizard
 
Select the Finish button. The bar chart editor is then displayed in the editor panel, and a view of the chart, with default data, is shown in the preview browser.
 
Chart Prefs
 
Next, we need to hook our chart up to some data. Select the Data Source Binding tab at the bottom of the Editor Panel. Select the Bar Values tree node and then select the data.ndx NDS from the Data Source menu. The preview browser will populate with four columns.
 
Note that each column heading in the data table has an associated menu with <off> or Bar Set options. Set the three data columns (the last three of the four) to the Bar Set option, or simply click the Select Columns button. Click the Select Rows button. This will enable those datasets and will cause the chart to update.
 
Chart Data
 
Select the Bar Labels tree node. Again, select the data.ndx NDS from the Data Source menu. This time, by using the drop down menu atop the first column, set only the first data column to the Bar Labels option. Click the Select Rows button. The labels will be shown in the chart.
 
Chart Data
 
Finally, let’s hook up content for the legend items, but please note that it is a little bit different from our first two data connections. Select the Legend Items tree node. Select the data.ndx NDS from the Data Source menu. Set the last three data columns to the Legend Items option (or click on the Select Columns button), but then only check the checkbox next to Row 0. This will cause only data in that row to be used.

NOTE: The Process Row Major checkbox is checked by default in the Legend Items data binding. NetCharts Designer will interpret vectors of data horizontally, where as unchecked, vectors of data are processed vertically. Most results from SQL queries arrange the data in columns. This means the numbers for a related category are stacked vertically, and processed as a series of numbers vertically. However sometimes the series of numbers are arranged horizontally, and need to be processed as a group horizontally.

Chart Data

Creating a Table

Now we’ll create a table of data that shows the same data that’s in the chart. Start by selecting the New Table wizard icon in the taskbar.
 
Chart
 
After the table wizard appears, enter in table as the Table Template Name. Then select the Next button, and then select the Finish button on the second panel. The table editor will appear with the current table in the preview browser.
 
Set the Alternate Row Style to greenbar.
 
Table
 
In the general Table Properties group, next to the Table Style menu, select the style icon, icon. This will launch the style dialog for this property. In the Table Content group, uncheck the Autosize checkbox for Table Width, and set to 400 px – this will match the width of the chart. Select the OK button to close the style dialog.

Creating a Page

Now that we’ve created page elements, let’s arrange them in a page layout. Select the New Page wizard icon in the toolbar.
 
Chart
 
When the wizard appears, enter page in the Page Name field and select the Finish button. A blank page will be created.
Select bar.cdx in the Project Navigator, and drag it onto the Page Layout. Click OK when the Edit Dynamic Chart Properties dialog appears. Then drag table.tbl onto the Page Layout underneath the icon representing your chart. Select OK when the Edit Dynamic Table Properties dialog appears. From the Page Elements Palette, drag a Header object onto the top of the page layout. Type in My Simple Report into the Edit Text dialog, and click OK.
 
Page

Exporting to NetCharts Server

Right click on the Fast Tutorial project in the Project Navigator to bring up the submenu. Select the Export option to launch the Export Wizard.
 
Export
 
From the export wizard, expand the NetCharts Designer group, select the Visual Mining Project Archive option. Select the Next button. On the second wizard panel, specify a local directory to temporarily put the archive.
 
Export
 
Select the Finish button.
 
Next, bring up an internet browser and go to the NetCharts Server administration page, for examplehttp://localhost:8001/Admin/index.jsp. The default login and password is Admin.

NOTE: The exact URL will vary based on where you have installed your NetCharts Server

Select the Project Archive link under the Utilities on the left side of the Admin window.
 
Export
 
Select the Upload button. Browse to the location that you saved the archive to, and select the archive. It will have a name like FastTutorial0110111056.zip. After selecting the Open button on the file dialog, select the Upload button. Click on the here link to begin the installation (it will be done quickly).
 
The project is now exported and available to all users that have access to that NetCharts Server. The URL for all users will be http://servername:8001/projects/FastTutorial/page.jsp
 
Export