In this section we will explain how drill-down behavior is implemented in NetCharts Server, and provide
an example of its use.

Drill-down is a generic term that refers to a hyperlink on a chart or a table that provides additional detail, or related information about the selected item. For example, if you click on a bar, or pie slice, the chart may be replaced with specific information about that bar or slice. If you click on a table cell value, it may bring you to another page displaying a textual description. Drill-down is essentially a navigation tool that allows point-and-click traversal of related data.

In NetCharts Server, drill-down is enabled by specifying a target URL for a data item. When data items are activated, the URL is called and passed information about the selected item. The URL target can then take the appropriate action.

Drill Down Options

NetCharts Server makes it easy to drill-down on virtually any chart data or text item.

The defaultHREF

The API ToolKit allows specification of the defaultHREF when charts are requested from the NetCharts Server. This identifies the URL that should be called whenever a data item is selected. The URL can be a JSP or ASP page, the same page hosting the given chart, a JavaScript method, or any other valid URL.

Active Labels

All chart items have an associated Active Label. The Active Label parameter is made up of one or more “tuples” containing the popup label to be displayed, the URL to activate when the data item is selected, and the target window in which the URL should appear.

Table Columns and Column Headers TargetURL

Each column and column header of a table can be specified with a unique URL. If the URL includes any of the keywords DATA_VARIABLE, ROW_VARIABLE, COLUMN_VARIABLE, ROW_HEADER_VARIABLE or COLUMN_HEADER_VARIABLE, these values will be replaced at runtime with that cell’s data value, row number, column number, row header, and column header, respectively.

The following example shows yearly cost information by region. The user can select a region for monthly detail information.

Step 1 – Create a Project

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 Drilldown Project and click the CREATE button.

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

Step 2 – Create a Data Source

For this example, we will use a demo JDBC data source accessed via Named Data Set (NDS).

Getting Data from an JDBC Source

This example uses a HyperSonic SQL (HSQL) database.

• Click 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 HSQL from the Type menu. Note the other types available from this wizard.

• In the HSQL Parameters section, Leave the check box checked for Include Column Names. This will include the column names as the first row of the output.
• Click the DETAILS button. This will show the tables available in this data source. Close the details window when done.
• Enter the following into the SQL text area:
   

  select * from GeneralCosts where CostType = ‘Salary and Benefits’

• Click the TEST button. The data should appear as shown below. Note the All row at the bottom, and the AllActual column at the far right (scroll to the right):
   
  
   
• Close the test dialog.
• Select DONE from the Named Data Set Design page.

Step 3 – Create the Charts

We will first create the top-level, or master chart.

Create the Master Chart

• From the Project Files list in our Drilldown Project, click NEW.
• Type masterchart.cdx into the name field. Set the Type menu set to Chart. Click CREATE. This will display the Chart Design Page.
• Set Title to Salary And Benefits
• Set Type to Pie, Width to 400, Height to 200
• Set Color Table to Chill. The color table defines the default colors that data sets will use.
• Now we will begin to integrate the data. Click data.ndx from the Data Source menu next to the Slices Data Parameter. This indicates that the slices are to use the data.ndx NDS file as the data source. The data.ndx data source contains more data than we need to populate the pie chart’s slices. We will have to filter the data. Click the DEFINE button. This will display the NDS Filter window. Click DESELECT COLUMNS, all columns will be unchecked except for Col 0.Uncheck Col 0, then scroll to the right, and check Col 38 (AllActual). Uncheck Row 0 andRow 6. Select the TEST button. The test results should appear as shown here:
   
  
   
• Close the NDS test window. Click SAVE on the NDS Filter window.
• Select data.ndx from the Data Source menu next to the Slice Labels Data Parameter. This indicates that the slice labels are to use the data.ndx NDS file as the data source.
• The data.ndx data source contains more data than we need to populate the pie chart’s slice labels.
• We will have to filter the data. Select the DEFINE button. This will display the NDS Filter window. Click DESELECT COLUMNS, all columns will be unchecked except for Col 0.
• Uncheck Row 0 and Row 6. Select SAVE on the NDS Filter window.
• Uncheck 3D Effect from the Piechart Parameters panel of the Chart Design Wizard.
• Click the TEST button. The chart should appear as shown here:
   
  
   
• Close the chart test window, and select DONE in the Chart Design wizard.

To make the labels look a little better, we will directly modify the CDL parameters.

• Select the Edit icon next to the masterchart.cdx listing in the Project Files List. This will invoke the
  editor. Add the following line:
   

  SliceFormat = (FLOAT, “$%,.2f”);

• Click TEST. The labels should now be formatted. Close the test window.
• Next, let’s provide a CDX variable for the SlicePos parameter. This will allow us to highlight a particular slice as being selected. Add the line:
   

  SlicePos = SELECTED;

• Note that SELECTED is a CDX variable that will be used to indicate which slice is currently selected. If you attempt to test now, the chart will fail unless you provide a value for SELECTED.
• Select DONE on the page editor.

Create the Detail Chart

This detail line chart is somewhat different from other charts that we have created. We will be reading the data from left to right in row-major order, and only one row at a time. We will create the chart and then use a variable value to change the row.

Note that we will be using the same NDS file that the master chart is using.

• From the Project Files list in our Drilldown Project, click NEW.
• Type detailchart.cdx into the name field. Set the Type menu set to Chart. Click CREATE. This will display the Chart Design Page.
• Set Type to Line, Width to 400, Height to 200.
• Set Title to Salary And Benefits (Monthly)
• Set Color Table to Chill. The color table defines the default colors that data sets will use.
• Now we will begin to integrate the data. Select data.ndx from the Data Source menu next to the Lines Data Parameter. This indicates that the line is to use the data.ndx NDS file as the data source.
• The data.ndx data source needs to be filtered properly. Click the DEFINE button. This will display the NDS Filter window. Click RESET, this will clear out previously defined filters.
• Click DESELECT COLUMNS. Uncheck Col 0. Select the columns with a Month name appended to Actual – columns 2, 5, 8, 11, 14, 17, 20, 23, 26, 29, 32 and 35. Uncheck all rows except Row 1. This will allow us to use one row just for testing. Click SAVE.
• Check the Row-Major box next to the Lines Data Parameter. This indicates that the data should be read left to right. This is an important distinction here, since otherwise 12 LineSets would be created, each with just one value in it.
• Set LineLabels data source to None.
• Click TEST. The chart should appear.
• Close the test window and click DONE.

Now we will provide the bottom tic labels. We could read these from a database as well, but it is
just as easy to “hardcode” them in this case.

• Select the Edit icon next to the detailchart.cdx item. Find the BottomLabels1 parameter. Replace with the following:
   

  BottomLabels1 = Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec;

• Now we will put in a variable for the row index. Find this parameter:
   

  NdsParams = (“rowFilter”, “1”), (“columnFilter”, “2,5,8,11,14,17,20,23,26,29,32,35”), (“orderBy”, “ROW”);

  Replace it with:
   

  NdsParams = (“rowFilter”, “THEROW”), (“columnFilter”, “2,5,8,11,14,17,20,23,26,29,32,35”), (“orderBy”, “ROW”);

• Let’s put a variable in the header. Find the parameter that looks like:

  Header = (“Salary And Benefits (Monthly)”,black,”sansserif”,12,0);

  and replace it with:
   

  Header = (“Salary And Benefits (Monthly) For THELOCATION Division(s)”,black,”sansserif”,12,0);

• Click TEST. An error will occur since the rowFilter variable has not been replaced. Add the following text to the query string parameter at the top of the test window:
   

  THEROW=2&THELOCATION=European

• After you click TEST again, a chart like the one below should be shown:
   
  
   
• Close the test window and click DONE.

Step 4 – Integrate Drill-Down Behavior

At this point, the pieces of our simple drill down application have been built and are ready to be tied together.

Integrate the Chart into a JSP Environment
 

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

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

• Next, start the code block. We will get the location parameter, meaning the region whose details we are interested in. The parameter value is a number that we will use to index into our data.
   

  <%
  String location= request.getParameter(“location”);
  int locationIndex = 5; // All
  try {
  locationIndex = Integer.parseInt(location);
  } catch (Exception ex){
  locationIndex = 5;
  }

• Create an instance of the NSWebToolKit that points to the project.
   

  NSWebToolKit toolKit = new NSWebToolKit(“Drilldown Project”);

• Create the master chart with the code below. Note that we construct a CDL parameter on the fly for the pie chart’s SlicePos parameter. SlicePos represents a slice’s position relative to the center of the pie. A position of ‘0’ indicates the slice is in the center. A position of .5 means the slice is positioned halfway between the pie center and the outside of the pie. We will “explode” a slice to indicate that it has been selected, by setting the slice position for the selected slice to “.1”, or one tenth away from center.
   

  String masterchart = null;
  try {
  Hashtable params = new Hashtable();
  StringBuffer sb = new StringBuffer();
  int MAXSLICES = 5;
   
  for (int i=0; i < MAXSLICES; i++){
  if (i > 0) sb.append(“,”);
  if (i == locationIndex)
  sb.append(“.1”); // explode the slice one tenth.
  else
  sb.append(“0”); // slice is not exploded
  }
   
  params.put(“SELECTED”,sb.toString());
  masterchart = toolKit.getChartAsImageAndMap(“masterchart.cdx”, params, request, false, “javascript:doSelection(‘masterchart’)”);
  } catch (Exception ex){
  masterchart = “Can’t create chart:”+netcharts.server.util.Util.formatForHtml(ex.getMessage());
  }

• Get a vector of the data. We will use this vector to look up the appropriate location name for the given row. That name will be used in the detail chart’s title.
   

  Vector data = null;
  Hashtable dataparams = new Hashtable();
  dataparams.put(“rowFilter”,”0*”);
  dataparams.put(“columnFilter”,”0″);
   
  try {
  data = toolKit.getNDSDataAsVector(“data.ndx”,dataparams);
  } catch (Exception ex){
  String msg = “Can’t get data “+ex.getMessage();
  %>
   
  <%=msg%>
   
  <%
  return;
  }

   

• Set up the variables for use within the detail chart. Note that we increment the row index because the first row in the data set is column names.
   

  locationIndex++; // increment to skip the column name
  String locationName = (String)data.elementAt(locationIndex);
  Hashtable detailparams = new Hashtable();
  detailparams.put(“THEROW”,locationIndex+””);
  detailparams.put(“THELOCATION”,locationName);

• Create the detail chart and end the code block:
   

  String detailchart = null;
   
  try {
  detailchart = toolKit.getChartAsImageAndMap(“detailchart.cdx”, detailparams, request, false,
  “javascript:doSelection(‘detailchart’)”);
  } catch (Exception ex){
  detailchart = “Can’t create detail chart:” + netcharts.server.util.Util.formatForHtml(ex.getMessage());
  }
  %>

• Put in the HTML head and the JavaScript drilldown handler function. Note that the first three function arguments, index, param, value, labelarray are automatically passed when the user selects a chart data item. The last parameter, whichchart, is the one we defined in our toolkit.getChartAsImageAndMap methods above.
   

  <HTML>
  <HEAD>
  <SCRIPT>
  <!— default handler for chart clicks —>
  function doSelection(index, param, value, labelarray, whichchart){
  if (whichchart == “masterchart”)
  window.location=”ddpage.jsp?location=”+index;
  }
  </SCRIPT>
  </HEAD>

• Add the rollover JavaScript. In situations where more than one chart is on the page, only one copy of the JavaScript should be written to the output by utilizing this method. Note that the call to getRolloverJavaScript must be within the <body> section of the HTML document.
   

  <BODY>
  <%=NSWebToolKit.getRolloverJavaScript()%>

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

  <%=masterchart%>
  <%=detailchart%>
  </BODY>
  </HTML>

• Click TEST. Experiment by selecting different pie slices. The test window should appear as shown here (if Asian is selected):
   
  
   

• Close the test window and click DONE when finished.

Integrate the Chart 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.
• Run the NetCharts Server ToolKit Configuration application from the Start menu and configure the default server and port.
• Create an ASP in your remote environment called ddpage.asp. Add the following lines to the ASP:
   

  <html>
  <head>
  <script>
  function doSelection(index, param, labelarray, value, whichchart){
  if (whichchart == “masterchart”)
  window.location = “ddpage.asp?location=”+index;
  }
  </script>
  </head>
  <body>
  <%
  Dim toolKit, masterHash, detailHash, location, dataHash
  Set toolKit = Server.CreateObject(“NetChartsServer.NSToolKit”)
  Set masterHash = Server.CreateObject(“NetChartsServer.Hashtable”)
  Set dataHash = Server.CreateObject(“NetChartsServer.Hashtable”)
  Set detailHash = Server.CreateObject(“NetChartsServer.Hashtable”)
  toolKit.setProject “Drilldown Project”
   
  location = Request.QueryString(“location”)
   
  Dim selection
  Dim locationIndex
   
  ‘ Determine the selected slice (if any)
  if (len(location) = 0) then
  locationIndex = 5
  else
  locationIndex = cint(location)
  end if
   
  selection = “”
   
  ‘ Set up the value for the SlicePos CDL parameter
  for i = 0 to 5
  if i > 0 then
  selection = selection & “,”
  end if
   
  if i = locationIndex then
  selection = selection & “.1”
  else
  selection = selection & “0”
  end if
  next
   
  ‘ Create the pie chart
  masterHash.putValue “SELECTED”, selection
  Dim masterchart
  masterchart = toolKit.getChartAsImageAndMap(“masterchart.cdx”, masterHash, “javascript:doSelection(‘masterchart’)”)
   
  ‘ Get the list of location names and extract the currently
  ‘ selected name. We will use the name in the linechart title.
  dataHash.putValue “rowFilter”, “0*”
  dataHash.putValue “columnFilter”, “0”
   
  Dim rs
  Set rs = toolKit.getNDSData(“data.ndx”,dataHash)
   
  for i = 0 to locationIndex
  rs.moveNext
  next
   
  Dim locationName
  locationName = rs.fields.item(0)
  locationIndex = locationIndex + 1
   
  detailHash.putValue “THEROW”, locationIndex & “”
  detailHash.putValue “THELOCATION”, locationName
   
  Dim detailchart
  detailchart = toolKit.getChartAsImageAndMap(“detailchart.cdx”,detailHash, “javascript:doSelection(‘detailchart’)”)
  %>
   
  <%=toolKit.getRolloverJavaScript()%>
  <%=masterchart%>
  <%=detailchart%>
   
  <%
  Set masterHash = Nothing
  Set detailHash = Nothing
  Set toolKit = Nothing
  Set masterchart = Nothing
  Set detailchart = Nothing
  %>
   
  </body>
  </html>

• Request ddpage.asp. If configured properly, the chart is shown in the page.

Integrate the Chart 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 ddpage.aspx. Add three Literal objects to the WebForm named çlientScrip, masterChart and detailedChart and layout the charts in a vertical fashion. Add the following script to the HTML portion of the WebForm:
   

  <script>
  function doSelection(index, param, labelarray, value, whichchart){
  if (whichchart == “masterchart”)
  window.location = “ddpage.asp?location=”+index;
  }
  </script>

• Then add the following lines to the Page_Load method of the code behind page:
   

  Dim toolkit As NetChartsServer.NSWebToolKit = New
  NetChartsServer.NSWebToolKit(“Drilldown Project”, “localhost”, 8001)
  Dim masterHash As Hashtable = New Hashtable
  Dim dataHash As Hashtable = New Hashtable
  Dim detailHash As Hashtable = New Hashtable
   
  ‘ Determine the selected slice (if any)
  Dim location As String = Request.Params.Item(“location”)
  Dim locationIndex As Integer = 5
   
  If Not (location Is Nothing) Then
  locationIndex = location
  End If
   
  ‘ Set up the value for the SlicePos CDL parameter
  Dim selection As String = “”
   
  For i As Integer = 0 To 5
  If (i > 0) Then
  selection = selection & “,”
  End If
   
  If (i = locationIndex) Then
  selection = selection & “.1”
  Else
  selection = selection & “0”
  End If
  Next
   
  ‘ Create the pie chart
  masterHash.Add(“SELECTED”, selection)
   
  Try
  masterChart.Text = toolkit.getChartAsImageAndMap(“masterchart.cdx”, masterHash,”javascript:doSelection(‘masterchart’)”, False, Request.ApplicationPath & “/getncsimage.aspx”)
  Catch nce As NetChartsServer.NSToolKitException
  masterChart.Text = nce.Message
  End Try
   
  ‘ Get the list of location names and extract the currently
  ‘ selected name. We will use the name in the linechart title.
  dataHash.Add(“rowFilter”, “1*”)
  dataHash.Add(“columnFilter”, “0”)
   
  Dim dt As DataTable = toolkit.getNDSData(“data.ndx”, dataHash)
  Dim locationName As String = dt.Rows(locationIndex).Item(0)
   
  ‘ Create the line chart
  locationIndex = locationIndex + 1
   
  detailHash.Add(“THEROW”, locationIndex)
  detailHash.Add(“THELOCATION”, locationName)
   
  Try
  detailedChart.Text = toolkit.getChartAsImageAndMap(“detailchart.cdx”, detailHash, “javascript:doSelection(‘detailchart’)”, False, Request.ApplicationPath & “/getncsimage.aspx”)
  Catch nce As NetChartsServer.NSToolKitException
  detailedChart.Text = nce.Message
  End Try
   
  clientScript.Text = toolkit.getRolloverJavaScript()

• Request ddpage.aspx. If configured properly, the chart is shown in the page.