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.
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.
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.
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.
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. | ![]() |
Bar charts allow easy association between onedimensional data and a corresponding label. Our barchart supports many different configurations including column, stacked, and row mode. | ![]() |
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. | ![]() |
The XY chart is designed for two-dimensional data. Data can be drawn with or without connecting lines in many different styles and scales. | ![]() |
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. | ![]() |
Pie charts are perfect for showing relative percentages within a data set. NetCharts pie charts support a variety of labeling and presentation characteristics. | ![]() |
Radar charts can be used to show and compare related data. Each radial axis represents an independent scale. | ![]() |
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. | ![]() |
Time charts are utilized to show a resource’s availability over a given time period. | ![]() |
Diagram charts are a collection of nodes and edges. Each node can have a text annotation and/or associated image. | ![]() |
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. | ![]() |
Box charts are typically used to display statistical information. There are a number of modes available including Standard, EDA, Gaussian, and Ten- Ninety. | ![]() |
Polar charts utilize polar coordinates and allow the specification of data coordinates in degrees and radians. | ![]() |
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 | ![]() |
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. | ![]() |
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. | ![]() |
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. | ![]() |
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. | ![]() |
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. | ![]() |
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
>