Many reporting applications, even those showing graphical information, have requirements to display tabular data. NetCharts Server’s built-in ability to produce data tables is a useful feature that can save considerable development time. This section provides an example of building and customizing a table, and integrating the table into a page.

Step 1 – Create a Project

The first step to build a table application is to create a NetCharts Server Project. A project is a repository for files created as part of the application.

Creating a Project

Open a browser window, and go to the NetCharts Server Developer Console. The URL, if you are on the same machine as the NetCharts Server installation, is:

http://localhost:8001/Developer/index.jsp

If the NetCharts Server is on another machine or port, use the appropriate server name and port number for that remote machine.

The Developer Console’s main page displays the Project List, which represents a list of all the projects available on this machine.

Click the NEW button above the Project List table.

Enter in the new project name, call it Table Project and select the CREATE button.

A new, empty project is created. The browser is now showing the Project Files panel.

Step 2 – Getting Data

Tables conveniently use the same data sources as charts. For this example, we will pull data from a flat file data source.

Getting Data from a CSV/Flat File Source

• Select the NEW button above the Project Files panel.
• Enter the name data in the name field.
• Select Data/NDS from the Type menu.
• Click the CREATE button. The Named Data Set Design wizard is shown.
• Select CSV/Flat File from the Type menu.
• The only entry in the Filename menu is Other. Normally, this menu is populated with files found in the project. Since we’ve just created the project, the menu only contains Other. Other indicates that the file should be found outside of the project and requires a valid URL. Put:
   

  http://NETCHARTS_SERVERNAME:8001/sampledata/WebSiteStats.csv

  into the text field below it, replacing NETCHARTS_SERVERNAME appropriately. Leave the default of a comma character (,) a double quote character(“) and a carriage return (\n) in the String Delimiter fields. Click TEST. The test window should appear as shown here:
   
  
   

• Close the test window. Enter comma, double quote, and percent sign characters ,”% into the
  Ignore Characters field. Test and confirm that commas, quotes, and percents are removed. Close
  the test window and click DONE on the NDS wizard.
   
  
   

Using the transposeData NDS Directive

Sometimes the data is easier to work with if the data is “rotated”. In this case, each column represents a date, and contains a number of independently scaled metrics. We will rotate the data so that each column represents a single metric.

• Click the Edit icon next to the data.ndx item in the Project Files list. The page editor will appear with the NDS file loaded.
• Add the line transposeData=true to the bottom of the editor.
• Click TEST, the window should appear rotated as shown here.
   
  
   
• When finished, close the test window.

Displaying Aggregate Data

Next, we will perform aggregation on the data to show an average of all of the numeric fields. We want to show an average, but we also want to include the raw data in the output.

• Add the following lines to the data.ndx file:

   
  aggregateFunction=AVG
  aggregateLabel=Average
  aggregateInclude=RAWDATA

   

• Click TEST. The aggregate data is shown as a row at the bottom.
   
  
   
• Close the test window and click DONE to close the page editor.

Step 3 – Create the Table

Now that we have data, we can create our table to display it.

Creating the Table

• Click the NEW button above the Project Files panel.
• Enter the name table in the name field.
• Select Table from the Type menu.
• Click the CREATE button. The Table wizard is shown.
• Select Plain from the Table Style menu.
• Select data.ndx from the Data menu. This specifies that this table’s data should come from the NDS file we just created.
• Click TEST. The table test window will appear showing the data.
• Close the test window and then click DONE to close the Table wizard. We will edit the table configuration directly using the page editor.
• Click on the Edit icon next to the table.tbl item in the Project Files list. This will invoke the page editor for the table we just created.

Editing the Table

• When a table is generated using the table wizard, many of the table’s configurable parameters are written to the file but commented out or set to default values. Use this opportunity to look through the file and see the parameters available. A full list of table parameters is also readily available via the Table Parameters link on the left side of the Developer Console.
• Find the tableCaption parameter. If required, uncomment the line by removing the ‘#’. Change from Table Title to Web Site Statistics
• If required, uncomment the tableCaptionStyle parameter.
• Find the alternateRowClass parameter. Uncomment the line.
• Find the firstRowIsColumnNames. Set to false.
• Click TEST, the table appears as shown here.
   
  
   

Editing Column Styles

Column styles are edited by naming the column in the columnNames parameter and then joining that name with a tag to identify column-specific attributes. Feel free to Test as we go along to see how these changes affect the display.

• Find the columnNames parameter. Uncomment. Since we will not be using indexed column names (which allow specification of any given column index), we will replace the existing line with the one shown here:

   
  ColumnNames=column1 column2 column3 column4 column5 column6 column7 column8 column9 column10 column11 column12 column13 column14 column15 column16

   

• Our first step is to create column titles that are shorter than those in the data. This will improve the look of the layout. Add the following lines (just below the columnNames parameter)

   
  column1Label=Report Date
  column2Label=Home Page Hits
  column3Label=Site Hits
  column4Label=Page Views
  column5Label=Doc Views
  column6Label=User Sessions
  column7Label=US Sessions
  column8Label=Intl Sessions
  column9Label=UI Sessions
  column10Label=Avg Hits/Day
  column11Label=Avg Views/Day
  column12Label=Avg Sess/Day
  column13Label=Linger Time
  column14Label=Unique Users
  column15Label=1 Time Users
  column16Label=1+ Time Users

   
  
   

• Remove the old column labels by skipping the first row in the data. Add:
   
  tableDataRowFilter=1*
   
  
   
• The next step is to format the column data. We’ll use the format and formatType parameters. Column 1 is a date and does not require any formatting.
• Columns 2-6 are integer columns. We will use a C-language sprintf style %,d format which means to show integer data with separating commas. Add the lines:

   
  
  column2FormatType=INTEGER
  column2Format= %,d
  column3FormatType=INTEGER
  column3Format= %,d
  column4FormatType=INTEGER
  column4Format= %,d
  column5FormatType=INTEGER
  column5Format= %,d
  column6FormatType=INTEGER
  column6Format= %,d

• Columns 7-9 are percentage columns. We’ll use a C-language sprintf style %.2f% format. This indicates that a floating point number should be shown with a two digit mantissa followed by a percent sign. Add the following lines:

   
  column7FormatType=FLOAT
  column7Format= %.2f%
  column8FormatType=FLOAT
  column8Format= %.2f%
  column9FormatType=FLOAT
  column9Format= %.2f%

   

• The next three columns we will use the CUSTOMDECIMAL format. This is another way of specifying numeric data, this time by using Java-language formatting. The principle advantage of the Java-language style is the ability to specify alternative formats for negative numbers. Add the following:

   
  column10FormatType=CUSTOMDECIMAL
  column10Format= ,##0;-,##0
  column11FormatType=CUSTOMDECIMAL
  column11Format= ,##0;-,##0
  column12FormatType=CUSTOMDECIMAL
  column12Format= ,##0;-,##0

   

• Because it is a set of time values and needs no formatting, we’ll skip column 13, and format columns 14 thru 16 as follows:

   
  column14FormatType=CUSTOMDECIMAL
  column14Format= ,##0;-,##0
  column15FormatType=CUSTOMDECIMAL
  column15Format= ,##0;-,##0
  column16FormatType=CUSTOMDECIMAL
  column16Format= ,##0;-,##0

   
  
   

• The next step is to give the column labels a style. For each of our columns, we will add a style parameter for the column labels. Note that specifying the width of a column in the column header effectively sets the width for the entire

   
  column.column1LabelStyle=text-align:right;font-weight:bold
  column2LabelStyle=text-align:right;font-weight:bold
  column3LabelStyle=text-align:right;font-weight:bold;width:50
  column4LabelStyle=text-align:right;font-weight:bold
  column5LabelStyle=text-align:right;font-weight:bold
  column6LabelStyle=text-align:right;font-weight:bold
  column7LabelStyle=text-align:right;font-weight:bold
  column8LabelStyle=text-align:right;font-weight:bold
  column9LabelStyle=text-align:right;font-weight:bold
  column10LabelStyle=text-align:right;font-weight:bold
  column11LabelStyle=text-align:right;font-weight:bold
  column12LabelStyle=text-align:right;font-weight:bold
  column13LabelStyle=text-align:right;font-weight:bold
  column14LabelStyle=text-align:right;font-weight:bold
  column15LabelStyle=text-align:right;font-weight:bold
  column16LabelStyle=text-align:right;font-weight:bold

   
  
   

• Our next step is to provide styles for the column data. Add the following lines:

   
  column1Style=text-align:right;background-color:white;fontweight: bold
  column2Style=text-align:right
  column3Style=text-align:right
  column4Style=text-align:right
  column5Style=text-align:right
  column6Style=text-align:right
  column7Style=text-align:right
  column8Style=text-align:right
  column9Style=text-align:right
  column10Style=text-align:right
  column11Style=text-align:right
  column12Style=text-align:right
  column13Style=text-align:right
  column14Style=text-align:right
  column15Style=text-align:right
  column16Style=text-align:right

   
  
   

Editing Row Styles

Row styles are similar to column styles. The rows are specified in the rowNames parameter and then joined with a tag to identify row-specific attributes. The important difference is that rows must be named FIRST, LAST, or ROW_X, where X refers to a row number starting at 0. In our example, we will highlight the last row.

• Find the rowNames parameter. Uncomment and set to LAST. The line should look like:rowNames=LAST
• Next, set the style of the last row by adding the following:

   
  LASTLineBreak=true
  LASTStyle=background:#eeeeee;font-weight:bold;font-size:8pt;

• Click TEST. The table should appear as shown.
   
  
   
• When finished, close the test window and click DONE on the page editor.

Step 4 – Integrate the Table
Integrate the Table into a JSP Environment

• From the Project Files page, click the NEW button.
• Type tablepage.jsp into the name field. Select Any from the Type menu. Click the CREATE button. This will produce a blank file.
• Click the EDIT button next to the tablepage.jsp item.
• Begin by adding the following import lines:

   
  <%@ page import=”java.util.*” %>
  <%@ page import=”netcharts.server.api.*” %>

   

• Next, start the code block and create an instance of the NSWebToolKit that points to the project, replacing NETCHARTS_SERVERNAME with the appropriate machine name and NETCHARTS_PORTNUMBER with the correct port number (8001 by default) if in a remote JSP environment.

   
  <%
  NSWebToolKit toolKit = new NSWebToolKit(“Table Project”);
  // if in remote JSP environment, use this constructor:
  // NSWebToolkit toolKit = new NSWebToolKit(
  // NETCHARTS_SERVERNAME,
  // NETCHARTS_PORTNUMBER,
  // “Table Project”);

• Create the table with the code below. There are two items of note in this code sample. First, the table that we created relies on a style sheet called defaultTableStyle.css. By setting tableResolveStyles to true, all styles will be resolved and included as style attributes. This removes the need to make the stylesheet available. Second, we are dynamically replacing the contents of the tableResolveStyles parameter by passing its replacement value as part of the parameters. All table parameters can be dynamically modified this way:

   
  String wstable = null;
  try {
  Hashtable params = new Hashtable();
  // if in a remote JSP environment add this line:
  // params.put(“tableResolveStyles”,”true”);
  wstable = toolKit.getTable(“table.tbl”, params);
  } catch (Exception ex){
  wstable = “Can’t create table: “+ ex.getMessage();
  }
  // End the code block.
  %>

• Finally, add the table to the page as shown below. Feel free to add your own HTML titles or other content:

   
  <HTML>
  <BODY>
  <%=wstable%>
  </BODY>
  </HTML>

• Save tablepage.jsp.
• If in NetCharts Server JSP environment, select link at top right of page editor to bring up the page. Otherwise, deploy as necessary for your environment. The window should appear as:
   
  
   

Integrate the Table into ASP

• Select the ASP link from the Developer Console’s Control Panel, underneath API Toolkits.
• Download the ASP Toolkit located at the top right of the page.
• Unzip the ncstoolkit.zip file, and then run the ASP Toolkit installation. This will install the files into the NetCharts Server install area in a new directory called “ToolKit”.
• Set up a directory to hold the sample asp files. Note that the getncsimage.asp file, normally installed in C:\InetPub\wwwroot\, must be at the root level of the web directory or virtual directory that the ASP files utilizing the ASP Toolkit are stored in to function properly.
• Create an ASP in your remote environment called tablepage.asp. Add the following lines to the ASP, replacing NETCHARTS_SERVERNAME with the appropriate machine name and NETCHARTS_PORTNUMBER with the correct port number (8001 by default). There are two items of note in this code sample. First, the table that we created relies on a style sheet called defaultTableStyle.css. By setting tableResolveStyles to true, all styles will be resolved and included as style attributes. This removes the need to make the stylesheet available. Second, we are dynamically replacing the contents of the tableResolveStyles parameter by passing its replacement value as part of the parameters. All table parameters can be dynamically modified this way.

   
  <html>
  <body>
  <%
  Dim toolKit, tableHashTable
  Set toolKit = Server.CreateObject(“NetChartsServer.NSToolKit”)
  Set tableHashTable = Server.CreateObject(“NetChartsServer.Hashtable”)
  toolKit.setServerInfo “NETCHARTS_SERVERNAME”, NETCHARTS_PORTNUMBER
  toolKit.setProject “Table Project”
  tableHashTable.putValue “tableResolveStyles”, “true”
  Dim wstable
  wstable = toolKit.getTable(“table.tbl”, tableHashTable)
  %>
  <%=wstable%>
  <%
  Set tableHashTable = Nothing
  Set toolKit = Nothing
  Set chart = Nothing
  %>
  </body>
  </html>

• Request tablepage.asp. If configured properly, the table is shown in the page.

Integrate the Table into .NET

• Select the .NET link from the Developer Console’s Control Panel, underneath API Toolkits.
• Download the .NET Toolkit off of the Developer page.
• Unzip the toolkit and run the installation.
• Set up a directory to hold the sample ASP.NET files. Note that the getncsimage.aspx file (used for chart images) must be at the root level of the web directory or virtual directory that WebForms utilizing the .NET Toolkit are stored in to function properly.
• Create a .NET WebForm in your remote environment called tablepage.aspx. Add a Literal object to the WebForm named theTable. Then add the following lines to the Page_Load method of the code behind page:

   
  Dim toolkit As NetChartsServer.NSToolKit = New
  NetChartsServer.NSToolKit(“Table Project”, “localhost”, 8001)
  Dim hashTable As Hashtable = New Hashtable
   
  ‘ The Hashtable allows for variables to be included with a request.<BR>
  hashTable.Add(“tableResolveStyles”, “true”)
   
  Try
  theTable.Text = toolkit.getTable(“table.tbl”, hashTable)
  Catch nce As NetChartsServer.NSToolKitException
  theTable.Text = nce.Message
  End Try

• Request tablepage.aspx. If configured properly, the table is shown in the page.