Section 9: NetCharts Server Chart Engine Explained

NetCharts Server’s chart engine is a high-performance, multithreaded system that can quickly combine data and chart parameters to generate interactive graphs.

This section provides an in-depth look at the chart rendering engine, some key features, its parameter set, and ways to optimize the presentation and performance of the chart displays.

NOTE: For a listing of all available CDL parameters and attributes, please consult the CDL Reference Guide available in online.

Chart Definition Language (CDL)
NetCharts Server, like all of Visual Mining charting products, uses Chart Definition Language, or CDL, to describe the look and behavior of chart elements.

CDL Basics

CDL is a collection of plain text parameters that describe a chart. In the most general form, CDL parameters are presented in a name=value style syntax, easily written and understood. Parameter names come from a defined set of CDL names, such as Background, Header, DataSet1, and so on. The value consists of one or more attributes.

Attributes are single primitive values that can be combined to form a complete value for a CDL parameter. For example,

Background = (Color, BorderType, BorderWidth, “ImageURL”, ImageFormat, BorderColor);

In the above example, the parameter Background has 6 attributes. Those attributes are Color, BorderType, BorderWidth, ImageURL, ImageFormat, and BorderColor. An example of using the Background parameter would be:

Background = (white, RAISED, 2);

In this case, the background of the chart would be white, with a 2-pixel raised border. In this case, the last three attributes are optional.

CDL Statement Types

There are five basic types of CDL statements:
Single Value – The parameter attribute is set to a single value.
Example: 

GraphType = STACKED;

List Value – The parameter attribute is set to a variable length comma-delimited list:
Example: 

DataSet1 = 12,40,20,43,59;

Tuple Value – The parameter attribute is set to a parenthesized list of comma-delimited values. Each tuple has a fixed maximum number of values.
Example: 

Header = (“My Header”, black, “sansserif”, 10);

Tuple List – A list of tuples.
Example: 

BubbleSet1 = (10,23,45),(93,23,45),(93,44,53);

Vtuple – A tuple with a variable number of values.
Example: 

DialTicLabels = (“dial1”,”0”,”2”,”4”,”8”,”10”);

CDL Syntax

There are only a few syntax rules:

  • With the exception of NDS parameters (explained later), the order of the parameters in a file does not matter.
  • If multiple parameters of the same name are used, the last one received (or at the bottom of the file) takes precedence.
  • String values can be quoted using single or double quotes as long as they are matched.
  • Parameter attributes are separated with a comma.
  • Multiple parameters may be on the same line in a file, but all must end with a semicolon.
  • A pound sign (#) indicates the start of a comment. All other text on that line is ignored.

CDL Named Data Set (NDS) Reference

Named Data Sets (NDS) are special NetCharts Server files that can be used to retrieve chart parameters. CDL allows the specification and on-the-fly configuration of these files. NDS CDL parameters are a combination of the configuration parameters and the assignment parameter.

NOTE: The NDS parameters NdsRate and NdsClientWait are often found in CDL files but are not used in most cases. They are intended to manage real-time data communication between a client side Java applet and the server.

NdsParams = (“rowFilter”, “1*”), (“columnFilter”, “1*”), (“orderBy”, “COLUMN”), (“level”, “BarsNDSlevel”);
DataSet1 = NDS “data.ndx”;

As the NetCharts engine processes CDL and finds an instance of the NdsParams parameter, it next looks for a parameter whose attribute contains the NDS keyword. Once found, it invokes the NDS engine to request the data, and passes along any name-value pairs specified in the NdsParams parameter.

Active Labels for Drilldown

Active Labels are a special kind of CDL parameter that specify the graph’s behavior when the user moves the mouse over the given area, or clicks on the given area. In NetCharts, virtually every area of the graph can have an independent active label. This means that you can have popups on all data elements, titles, grids, background area, legend items, labels, annotations, and so on. Each of those items can be independently configured to have a unique behavior. The basic structure of an Active Label parameter is a three element “tuple”. The tuple’s three elements are popup label, drilldown URL, and drilldown target. Below are a few examples of Active Labels use.

HeaderActiveLabel = (“Click here to go to Visual Mining”,”https://visualmining.com”, “vmwin”);

This would show the popup “Click here to go to Visual Mining” when the user moved the mouse over the header (top title). If the Header was then clicked, a new browser window named vmwin would open, and the URL for Visual Mining would be fetched.

ActiveLabels1 = (“Normal”), (“Normal”), (“Exception”, “javascript:showException(‘3’)”), (“Normal”);

This type of active label uses a tuple list that corresponds with a data list. So, if this were a bar chart, rolling over bar 1, 2, or 4 would show “Normal”. Rolling over bar 3 would display “Exception”, and if bar 3 were clicked, it would activate the showException javascript method and pass the string “3” to it.

NOTE: The CDL Reference Guide can be used to look up the appropriate parameter name for active labels.

NetCharts Server provides default active labels for all data elements. If the chart is created with an image and image map, rollover labels will be available in the chart, and any defined active labels will be activated when the user clicks on them. If the call to create the chart uses the toolkit API and specifies a defaultHREF, then the HREF will be called by default when the user selects any data item.

CDX Behavior

CDX, also known as dynamic CDL, is an easy way to modify the contents of a CDL file on-the-fly. When the caller requests the chart, they provide a list of name-value pairs. For each name in the list, the NetCharts Server replaces all instances of that name in the CDL file with the associated value. After the replacement, the chart is rendered. CDX is explained in detail in the Dynamic Data Access Explained section.

Chart Types

There are 19 basic chart types, each with hundreds of configurable parameters. A sampling of the various charts and some styles is shown here, but many more can be seen in the Chart Gallery section of the NetCharts Server Example page.

NOTE: Stripcharts, not shown here, are supported in NetCharts Server and are used to display streaming data. This type of application is better served with our NetCharts Applets or NetCharts Pro products.

 

Chart Type Example
Line charts plot Y-axis data, usually over a given time or range on the X-axis. The NetCharts line chart supports logarithmic scales, area fills, multiple Y scales, 2-D, and different line styles. dev
Bar charts allow easy association between onedimensional data and a corresponding label. Our barchart supports many different configurations including column, stacked, and row mode. dev
Bubble charts provide a clean way to plot 3 dimensions on two axes. The size of a bubble symbol can be scaled according to the data. dev
The XY chart is designed for two-dimensional data. Data can be drawn with or without connecting lines in many different styles and scales. dev
The Combo chart is made for displaying line and bar data simultaneously. It provides numerous styling methods. Data can be separated into different scales or overlaid. dev
Pie charts are perfect for showing relative percentages within a data set. NetCharts pie charts support a variety of labeling and presentation characteristics. dev
Radar charts can be used to show and compare related data. Each radial axis represents an independent scale. dev
The Dial chart shows one or more scalar values. Dials have many configurable parameters to define sectors, dial hands, and multiple dials. They are most often used to show discrete values relative to a given scale. dev
Time charts are utilized to show a resource’s availability over a given time period. dev
Diagram charts are a collection of nodes and edges. Each node can have a text annotation and/or associated image. dev
Stock charts are designed to display market data, but they are versatile enough to be used for a variety of chart needs. Stock charts support stock symbols, lines and line symbols, and bars. dev
Box charts are typically used to display statistical information. There are a number of modes available including Standard, EDA, Gaussian, and Ten- Ninety. dev
Polar charts utilize polar coordinates and allow the specification of data coordinates in degrees and radians. dev
Map charts allow polygons of any shape over any portion of any image to become hot spots for navigation, and/or display roll over information dev
The Strip chart is most often used as an applet, where values are updated dynamically. Timebased, or up to the minute data, represented by lines and/or bars scrolling across the graph are ideal uses for these charts. dev
Multi-Pie charts offer all the features and advantages of Pie charts with the additional capability of showing multiple vectors of data on one chart. dev
Heatmaps are ideal for showing stock information or any collection of data where a gradient color scheme showing relative distance from specified extremes can be plotted. dev
Pareto charts provide an ordered bar chart from highest to lowest, and a cumulative percentage via a line above. A given value’s contribution to a whole is intuitively diagramed. dev
Histogram charts analyze data distributions by grouping and binning. Users can specify histogram bin ranges or number of bins and can display raw data or percentage distributions. dev

 
The Server Generated Image (SGI)
When a chart is requested from NetCharts Server, and the special assgi CDX variable is set to true, NetCharts Server will return the chart as a Server Generated Image, or SGI object. The SGI typically contains at least the chart image and image map elements. By default, all of the toolkits will automatically request SGI objects and then convert the SGI into HTML for display.

SGI Object

When in object form, a Server Generated Image is represented by thenetcharts.server.api.ServerGeneratedImage class for Java/JSP applications, and by theNetChartsServer.ServerGeneratedImage class for .NET/ASP. In either form, the SGI has a built-in ability to serialize and deserialize itself into an XML-based representation. This allows the Server Generated Image objects to be portable across platforms, languages and technologies.

Property Description
altText The alternate text of the image.
chartFile The chart template used to produce the ServerGeneratedImage.
dwellAlignment The alignment of the dwelllabel
dwellBorderSize The border size of the dwelllabel.
dwellColor The color of the dwelllabel.
dwellFont The font of the dwelllabel.
dwellFontColor The font color of the dwelllabel.
dwellFontSize The font size of the dwelllabel.
encodingScheme The encoding scheme of the image data.
error Any errors generating the chart.
height The height of the image.
image The encoded image data.
loadError The error (if any) occurring during a load.
map The MapElement array.
mapName The ID of the map.
mimeType The mime type of the encoded image.
uniqueID The unique ID of the ServerGeneratedImage
width The width of the image.

 

SGI Document Type Definition (DTD)

<?xml version=”1.0″ ?>
<!ELEMENT server.chart (map?, image)>
<!ELEMENT map (area+)>
<!ATTLIST map
name CDATA #IMPLIED
>
<!ELEMENT area EMPTY>
<!ATTLIST area
shape (RECT | POLYGON) #REQUIRED
coords CDATA #REQUIRED
label CDATA #IMPLIED
href CDATA #IMPLIED
selectedItemIndex CDATA #IMPLIED
selectedItemParam CDATA #IMPLIED
selectedItemLabels CDATA #IMPLIED
>
<!ELEMENT image (#PCDATA)>
<!ATTLIST image
mimetype CDATA #REQUIRED
chartFile CDATA #IMPLIED
width CDATA #IMPLIED
height CDATA #IMPLIED
dwellcolor CDATA #IMPLIED
dwellfontcolor CDATA #IMPLIED
dwellfontsize CDATA #IMPLIED
dwellfont CDATA #IMPLIED
encoding CDATA #REQUIRED
altText CDATA #IMPLIED
>