Section 4: Building a Data Source-Aware Chart Application

In the previous example, Building a Simple Chart Application, data was assumed to have been retrieved from an external source, and then passed into the chart via CDX parameters. In this example, we will introduce NetCharts Server’s Named Data Set (NDS) feature to directly retrieve and process data from a data source (in this example, a sample JDBC database). We will use a variable value to demonstrate dynamic data retrieval.

Step 1 – Create a Project

The first step to build a chart 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

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

Select the New button above the Project List table.

Enter a new project name, NDS Project and click the CREATE button.

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

Step 2 – Getting Access to Data

Because data can be stored and displayed in so many different ways, proper configuration of data sources may be a time-consuming step. A later chapter, Dynamic Data Access, details the various data configurations that NetCharts Server supports and should be used as a reference for specific data environments.

The goal of this step is to set up the configuration to the backend data source, and extract a table of data that contains the information necessary to build the chart.

For the purposes of this tutorial, we will access a simple JDBC-enabled demo database that was provided with the installation.

Getting Data from a JDBC Source

This example uses a HyperSonic SQL (HSQL) database.

Select the NEW button above the Project Files panel.
Enter the name data in the name field.
Select Data/NDS from the Type menu.
Select 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.

NOTE: This wizard does not support all of the data sources that NetCharts Server supports. See the Dynamic Data Access chapter for information on configuring other sources.

Type THELEVEL into the Variables field. We will use this variable to control how much of the data is shown. Type 0 into the Default Values field. This will be used as the default for testing.
Allow the default selection of Examples to remain assigned in the DB Name menu.
Leave the check for Include Column Names. This will include the column names as the first row of the output.
Click on the DETAILS button. This will show the tables available in this database. Close the details window when done.
Enter in the following into the SQL text area:

select * from PageHitTable where “Server 1 Hits” > THELEVEL and “Server 2
Hits” > THELEVEL and “Server 3 Hits” > THELEVEL
Select the TEST button. The data should appear as shown below:
Close the test dialog.
Set the Date Format menu to Jan-02. This will format the data to show the month and the two digit year. If desired, click on the TEST button and note that the dates are now formatted.
Set the Key field of the Data Cache (Optional) panel to MyDataItem-THELEVEL. This will cause data to be written to the cache, but with a name that changes when the threshold changes.
Set the LifeSpan value to 3 (seconds).
Set the aggregate Function to [None].
Leave the Sort on Column text field blank.
Click the DONE button from the Named Data Set Design page.

Step 3 – Create and Edit CDL Chart Template

A Chart Definition Language (CDL) template is an ASCII-text file that contains parameters that describe the charts appearance, and possibly external data sources.

Rarely will developers need to write a CDL file from scratch. There are three options for creating CDL files:

Use the Developer Console’s Chart Wizard – The Developer Console provides a form-based interface to create a CDL template. The Chart Wizard is geared mostly for connecting to data sources.
Use NetCharts Designer – Visual Mining’s NetCharts Designer product may be used to design a chart and save the CDL to the project.
Copy a Template from the Gallery – The NetCharts Server example set includes the Chart
Gallery, which is a collection of over 100 templates.

For this tutorial we will use the Developer Console’s Chart Form.

Create a New Chart and Integrate Data Using the Chart Wizard

From the Project Files list in our NDS Project, select NEW.
Type ndschart.cdx into the name field. Set the Type menu set to Chart. Click CREATE.
This will display the Chart Design Page.
Set Title to Server Load
Set Color Table to Earthy. The color table defines the default colors that data sets will use.
Set Type to Bar, Width to 500, Height to 300, Legend to Right.
Now we will begin to integrate the data. In the Data Parameters section, select data.ndx from the Data Source menu next to the Bars prompt. This indicates that the bar sets are to use the data.ndx NDS file as the data source.
The data.ndx data source contains both numeric and non-numeric data. We will have to filter out the non-numeric data in order to populate the bar sets. Click the DEFINE button. This will display the NDS Filter window.
Uncheck Col 0, and Row 0. Only the checked rows and columns will be used for bar sets. When configured as shown here, click the Save button.
Note that the save process writes the filter information into the Columns and Rows text fields.
Select data.ndx from the Data Source menu next to the AxisLabels prompt. This indicates that the axis labels are to use the data.ndx NDS file as the data source.
We will use the date information in column 0 for the axis labels, so we will have to filter out all other information in order to populate the axis labels. click the DEFINE button for the axis labels. This will display the NDS Filter window.
Click DESELECT COLUMNS. This will uncheck all columns but the first. Uncheck Row 0. Click Save.
Select data.ndx from the Data Source menu next to the Legend Data Parameter. This indicates that the Legend items are to use the data.ndx NDS file as the data source.
We will use the column names in row 0 for the legend items, so we will have to filter out all other information.
Click the DEFINE button for the legend. This will display the NDS Filter window.
Click DESELECT ROWS. This will uncheck all rows but the first. Uncheck Col 0.
Select the SAVE button.
Ensure that the Row-Major checkbox is selected next to the Legend Data Parameter. This will cause the data to be read left-to-right instead of top-to-bottom.
CLICK the Test button. A chart will be displayed as shown here:
Recall that this chart is using a Named Data Set (NDS) that has a variable THELEVEL. You can test behavior from this window by passing in THELEVEL=somevalue in the Query string parameters area of the test window. So, for example, entering in: THELEVEL=1400 would produce the following display:
Close the test window.
Click DONE on the chart design page.

Step 4 – Integrate Chart into JSP/ASP/.NET/Other Environment

NetCharts Server provides native JSP support as well as integration into other J2EE application servers, . NET and other web servers.

Integrate the Chart into a NetCharts Server JSP Environment

From the Project Files page, Click the NEW button.
Type ndspage into the name field. Select Page/JSP from the Type menu. Click the CREATE button. This will start the JSP wizard.
We use the wizard since it will write a sample template that we can use as a base for our JSP.
Select ndschart.cdx from the Include Sample Chart Code for: and click the DONE button.
The new JSP is now in the list of project files.
Select the Edit icon next to the ndspage.jsp file. This will invoke the editor.
Find the line in ndspage.jsp that says:

// chartHashtable1.put(“VariableName”,”VariableValue”);Replace it with the following lines:

String THELEVEL = request.getParameter(“THELEVEL”);
if (THELEVEL == null)
THELEVEL = “100”;

chartHashtable1.put(“THELEVEL”, THELEVEL);
This hashtable is used to pass the CDX parameters into the chart request.
Find the line in ndspage.jsp that says:

<H3>Charts</H3>

Replace it with:

<form>
Level: <input type=”textfield” name=”THELEVEL”>
value=”<%=THELEVEL%>”/>
</form>
Click the SAVE button.
Note the URL link at the top right of the editor, just under the blue banner. That URL represents how ordinary browser clients can access this JSP. It should look like:

http://localhost:8001/projects/NDS Project/ndspage.jsp
Select the URL, note that the JSP window appears in a separate browser window.
Experiment by changing the level value. Recall that the level value gets passed into the chart request. The chart request then passes the level down to the data request. The level is replaced in the SQL statement to get the appropriate data (or from the appropriate cache entry). Note that in this example, if the values are over 873, no data will be returned.

Integrate the Chart into a Third-Party JSP Environment (e.g. WebLogic, WebSphere, JBoss/Tomcat, etc.)

If you’ve already installed the Java/JSP toolkit, skip to step 3.

Select the Java/JSP API Toolkit link from the left panel, underneath API Toolkits. Install the
Java/JSP Toolkit off of the Developer page.
Download the package into your remote environment. Follow the download instructions.
Create a JSP in your remote environment called ndspage.jsp. Add the following lines to the JSP replacing NETCHARTS_SERVERNAME with the machine name that you created the chart on:

<%@ page import=”java.util.*” %>
<%@ page import=”netcharts.server.api.*” %>
<%
NSWebToolKit toolKit = new
NSWebToolKit(NETCHARTS_SERVERNAME, 8001,”NDS Project”);
Hashtable chartHashtable1 = new Hashtable();
String THELEVEL = request.getParameter(“THELEVEL”);if (THELEVEL == null)
THELEVEL = “100”;

chartHashtable1.put(“THELEVEL”, THELEVEL);
String chart1 = null;
try {
chart1 = toolKit.getChartAsImageAndMap(“ndschart.cdx”,chartHashtable1, request, false,”javascript:doSelection()”);
} catch (Exception ex){
chart1 = netcharts.server.util.Util.formatForHtml(ex.getMessage());
}
%>
<HTML>
<HEAD>
<SCRIPT>
<!— default handler for chart clicks —>
function doSelection(index, param, value, labelarray){
var arraycontent = “”;
for (var i=0; i < labelarray.length; i++)
arraycontent = arraycontent + “Array[“+i+”]: “+labelarray[i]+”\n”;

window.alert(“Parameter: “+param+”\nIndex: “+ index+”\nValue: “+value+”\n”+arraycontent);
}
</SCRIPT>
</HEAD>
<BODY>
<form>
Level: <input type=”textfield” name=”THELEVEL”
value=”<%=THELEVEL%>”/>
</form>
<%=NSWebToolKit.getRolloverJavaScript()%>
<%=chart1%><br>
</BODY>
</HTML>

Integrate the Chart into ASP

If you’ve already installed the ASP toolkit, skip to step 5.

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.
Create an ASP in your remote environment called ndspage.asp. Add the following lines to
the ASP:

<html>
<body>
<%
Dim toolKit, chartHashTable, level
Set toolKit = Server.CreateObject(“NetChartsServer.NSToolKit”)
Set chartHashTable = Server.CreateObject(“NetChartsServer.Hashtable”)
toolKit.setProject “NDS Project”THELEVEL = Request.QueryString(“THELEVEL”)

if (Len(THELEVEL) = 0) then
THELEVEL = “100”
end if

chartHashTable.putValue “type”, “PNG”
chartHashTable.putValue “THELEVEL”, THELEVEL

Dim chart
chart = toolKit.getChartAsImageAndMap(“ndschart.cdx”, chartHashTable)
%>
<form>
Level: <input type=”textfield” name=”THELEVEL”
value=”<%=THELEVEL%>”/>
</form>

<%=toolKit.getRolloverJavaScript%>
<%=chart%>

<%
Set chartHashTable = Nothing
Set toolKit = Nothing
Set chart = Nothing
%>
</body>
</html>
Request ndspage.asp. If configured properly, the chart is shown in the page.