In this section we will build a simple chart application using the NetCharts Server Developer Console as our primary interface. This tutorial demonstrates a chart application that gets its data dynamically when the chart is called.
 

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

If NetCharts Server is on another machine or port, use the appropriate server name in place of localhost, and/or the appropriate port number.

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 in the new project name, call it “MyFirstProject” and select the Create button. A new, empty project is created. The browser is now showing the Project Files panel.
 

 

Step 2 – Create and Edit CDL Chart Template

 
A Chart Definition Language (CDL) template is an ASCII text file that contains parameters that describe the chart’s 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:

1. Use the Developer Console’s Chart Wizard – The Developer Console provides a form-based wizard to create a CDL template. The wizard is geared mostly for connecting to data sources (which we will do in later tutorials)
2. Use NetCharts Designer – Visual Mining’s NetCharts Designer product may be used to design a chart and then save it to the project.
3. Copy a Template from the Gallery – The NetCharts Server example set includes the Chart Gallery, which has over 100 templates to base a chart on.

For this tutorial we will use a template provided.

Create a New Chart from the Gallery

From the Project Files panel, select the New button.

Type gallerychart.cdx into the name field. Leave the Type menu set to Any. Select Create. This will cause a blank chart file to be created. gallerychart.cdx will now appear in the Project Files list. UsingAny instead of Chart in the Type menu bypassed the chart wizard and provided an empty file of the correct type.

Select the Edit icon next to gallerychart.cdx. This will invoke the editor for this file. It will appear blank.

Copy and paste the following CDL contents into the gallerychart.cdx editor. Note that the CDL is a collection of name=value pairs that define the chart.

ChartType = BARCHART;
ChartName = “barGradientFill”;
ChartSize = (450,300);
 
MetaData = (“description”,”Barchart with gradient color fill, grid with vertical and horizontal lines, title and legend”),(“tags”, “Barchart,barGradientFill,Animation,Showcase”), (“title”, “Gradient fill”);
 
GraphType = STACK;
StackLabel = ITEM;
 
Header = (“Basic Bar”, black, “Arial”, 12, 0, CENTER, CENTER);
HeaderBox = (, , 1, , TILE, );
 
Grid = (black_30,null,black_0,null,TILE);
GridAxis = (BOTTOM,LEFT);
GridLine = (HORIZONTAL,SOLID,1);
 
DwellLabel = (“”,black,”Arial Plain”,10,0);
DwellLabelBox = (gray,RAISED,1,null,TILE,black);
 
LeftScale = (0,,);
LeftTics = (“ON”,black_180,”Arial”,10,0,null);
LeftMargins = (0,10);
LeftColor1 = black_0;
LeftMajorTicColor = black_30;
 
BottomTics = (“ON”,black_180,”Arial”,10,0,null);
BottomMajorTicColor = black_30;
BottomColor = black_0;
BottomTicLayout = (AUTO,0,1);
BottomMargins = (10,10);
 
BarWidth = 70;
Bar3DDepth = 0;
BarFillPattern = (GRADIENTCENTERHORIZONTAL, xADDA4C,x212D0E);
BarBorder = (SOLID,1,black_0);
BarLabels = “2006”,”2007″,”2008″,”2009″,”2010″,”2011″;
 
DataSet1 = 190000,200000,180000,190000,185000,170000;
DataSets = (“Issued”,NULL,BAR,4,FILLED);
DataAxis = (BOTTOM,LEFT),(BOTTOM,LEFT);
 
BarCorners = (SQUARE,SQUARE,SQUARE,SQUARE);
BarDropShadow = (black, 5, 5, 15);
BarHighlights = (GRADIENTHORIZONTAL, white_100, black_0, 0, .1, 0,0, .5, 300, SQUARE);
BarAnimationStyle = GROW;
 
LegendAnimationStyle = FADE;
GridAnimationStyle = FADE;
LabelAnimationStyle = FADE;

 
The editor should appear as shown here:
 

 
Select the Test button. This will save the template and then display the chart test window.

Close the chart test window.

Close the edit panel by selecting the Done button.

Make Other Chart Edits as Necessary

Select the CDL Reference (HTML) link from the control panel, on the left. This will bring up the CDL Reference manual in a separate browser window. Select Bar Chart from the Chart Type menu. Note that bar chart parameters specific to bar charts are shown in the main page, and that the CDL Parameters menu contains a list of all CDL parameters available for the bar chart. Close the CDL Reference window.
 

Step 3 – Use CDX Variables to Get Data into the Chart

 
An easy way to get data into a chart is to use CDX variables. CDX is a nickname for “eXtendible CDL”, where CDL refers to the Chart Definition Language. CDX allows the chart to be dynamically modified at run time, just before the chart is rendered.

CDX works by taking variable name-value pairs that are passed to the chart, and replacing each instance of the variable name in the CDX file with the provided value.

A Simple CDX Test

From the Project File list, select the Test icon (a ball) next to the gallerychart.cdx file. This will bring up the test dialog.

Enter Title=My New Chart into the Query String Parameters text field, and select the Test button.
 

 
Note that the chart now shows the chart header text as “My New Chart”. This is because we told the chart engine to replace any instance of the text “Title” in the gallerychart.cdx file with “My New Chart”. After the replacement, the chart is rendered.

Now add another parameter by setting the contents of the Query String Parameters text field toTitle=My New Chart&2006=Jan-06. Parameters are delimited in query strings thru the use of the ampersand character. Select Test. Note that the first bar’s label now says “Jan-06”.

Close the test dialog.

Configure Data Parameters with CDX Variables

Select the Edit icon next to the gallerychart.cdx file. The page editor will be shown with the CDL contents.

Find the BarLabels parameter. Set it as follows:

BarLabels = THELABELS;

 
This effectively creates a new CDX variable called THELABELS.

Find the DataSet1 parameter. Set it as follows:

DataSet1 = THEDATA;

This creates another new CDX variable called THEDATA. Again, make sure the semicolon is at the end of the line.

Select the Test button. The chart generation will initially fail because now the CDL file is expecting to receive valid CDL replacement values for THELABELS and THEDATA. Since those values were not passed, the CDL is not valid and thus a CDL parsing error appears.

Set the contents of the Query String Parameters text field as

THELABELS=Monday,Tuesday,Wednesday,Thursday&THEDATA=45,18,29,30

Select the Test button. The chart will appear as shown here:
 

 
You may wish to experiment with changing the label values, the data values, or adding other CDX variables.

When finished, close the test window, and then select the Done button on the editor.

Default values for CDX variables can be defined in a file called gallerychart.variables. This file can be created and placed in the same directory as gallerychart.cdx. If the chart is requested without values for the variables, the values from gallerychart.variables will be used. This allows NetCharts Server to generate a chart even if the chart request does not contain values for the variables in the chart. The content of gallerychart.variables might look like

THELABELS=Label,Label,Label,Label
THEDATA=10,10,10,10

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

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

Integrate the Chart into a NetCharts Server JSP Environment

From the Project Files page, select the New button.

Type chartpage into the name field. Select Page/JSP from the Type menu. Select the Create button. This will start the JSP wizard.

We use the wizard since it will create a sample template from which we will base our JSP. Selectgallerychart.cdx from the Include Sample Chart Code for: and select the Done button. The new JSP is now in the list of project files.

Select the Edit icon next to the chartpage.jsp file. This will invoke the page editor. Find the line inchartpage.jsp that says:

// chartHashtable1.put(“VariableName”,”VariableValue”);

Modify the line and add one so it looks like:

chartHashtable1.put(“THELABELS”,”Monday,Tuesday,Wednesday,Thursday”);
chartHashtable1.put(“THEDATA”,”45,18,29,30″);

This hashtable is used to pass the CDX parameters into the chart request.

Select the Test button. The JSP test window will appear containing the chart. Close the JSP test window.

Note the URL link at the top right of the page editor, just under the blue Navigation Panel. That URL represents how ordinary browser clients can access this JSP. It should look like:

http://localhost:8001/projects/MyFirstProject/chartpage.jsp

Select the URL, note that the JSP window appears in a separate browser window.

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

Select the Java/JSP Toolkit link from the Developers Console Control Panel, underneath “API Toolkits” in the Content Panel on the left.

Download the package. Follow the installation instructions to install this toolkit into your chosen web application development environment. Create a JSP in your web application development environment called chartpage.jsp. Add the following lines to the JSP, replacing NETCHARTS_SERVERNAME with the machine name where NetCharts Server is installed:

<%@ page import=”java.util.*” %>
<%@ page import=”netcharts.server.api.*” %>
 
<%
NSWebToolKit toolKit = new NSWebToolKit(NETCHARTS_SERVERNAME,8001,”MyFirstProject”);
Hashtable chartHashtable1 = new Hashtable();
chartHashtable1.put(“THELABELS”,”Monday,Tuesday,Wednesday, Thursday”);
chartHashtable1.put(“THEDATA”,”45,18,29,30″);
String chart1 = null;
chart1 = toolKit.getChartAsImageAndMap(“gallerychart.cdx”,
chartHashtable1, request, false, “javascript:doSelection()”);
%>
 
<HTML>
<HEAD>
<SCRIPT>
<!— default handler for chart clicks —>
function doSelection(index, param, value){
window.alert(“Parameter”+param+”,index “+index+”, value “+value);
}
</SCRIPT>
</HEAD>
<BODY>
<!— Charts —->
<H3>Charts</h3>
<%=NSWebToolKit.getRolloverJavaScript ()%>
<%=chart1%>
</BODY>
</HTML>

Deploy the JSP and downloaded JAR files using the application development method specified
by your application server. Make sure to add the following lines to your web.xml deployment
file:

<servlet>
<servlet-name>getimage</servlet-name>
<servlet-class>netcharts.server.imagewriter.ImageWriter</servlet-class>
</servlet>
 
<servlet-mapping>
<servlet-name>getimage</servlet-name>
<url-pattern>/getimage</url-pattern>
</servlet-mapping>

Access the JSP via your application server. If configured properly, the chart will appear in the page.

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 chartpage.asp. Add the following lines to the ASP:

<%
Dim toolKit, myHashTable
Set toolKit = Server.CreateObject(“NetChartsServer.NSToolKit”)
Set myHashTable = Server.CreateObject(“NetChartsServer.Hashtable”)
toolKit.setProject “MyFirstProject”
%>
 
<%=toolKit.getRolloverJavaScript()%>
 
<%
myHashTable.putValue “type”, “PNG”
myHashTable.putValue “THELABELS”, “Monday,Tuesday,Wednesday,Thursday”
myHashTable.putValue “THEDATA”, “45,18,29,30”
%>
 
<%=toolKit.getChartAsImageAndMap(“gallerychart.cdx”, myHashTable)%>
<%=session(“mimetype”)%>
 
<%
Set toolKit = Nothing
%>

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

Integrate the Chart into .NET

Select the .NET 2.x Toolkit and Controls 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 chartpage.aspx. Add two Literal objects to the WebForm named çlientScript and theChart. Then add the following lines to the Page_Load method of the code behind page:

Dim toolkit As NetChartsServer.NSWebToolKit =
New NetChartsServer.NSWebToolKit(“MyFirstProject “, “localhost”, 8001)
Dim hashtable As Hashtable = New Hashtable
hashtable.Add(“type”, “PNG”)
hashtable.Add(“THELABELS”, “Monday,Tuesday,Wednesday,Thursday”)
hashtable.Add(“THEDATA”, “45,18,29,30”)
 
Try
theChart.Text = toolkit.getChartAsImageAndMap(“gallerychart.cdx”, hashtable, “”, False, Request.ApplicationPath & “/getncsimage.aspx”)
 
Catch nce As NetChartsServer.NSToolKitException
theChart.Text = nce.Message
End Try
 
clientScript.Text = toolkit.getRolloverJavaScript()

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

Integrate the Chart into Other Environments

Create a file called chartpage.html.

Add the following line to the .html, replacing NETCHARTS_SERVERNAME with the machine name that you created the chart on:

<img src=”http://NETCHARTS_SERVERNAME:8001/projects/MyFirstProject/gallerychart.cdx?
type=PNG&THELABELS=Monday,Tuesday,Wednesday,Thursday&THEDATA=45,18,29,30″>

Select chartpage.html, and the chart appears.