Step 1 - Create a chart instance

NetCharts Pro offers two options for creating a chart instance. The first option involves using a set of static methods on NFGraph, the superclass of all chart classes. These methods take in CDL, create an instance of the appropriate chart class, and configure that chart using the CDL parameters. The second option involves constructing the specific chart class and then optionally configuring it by providing CDL parameters. By creating a reusable base chart template in CDL, developers can define the styling elements of the chart that generally do not change between chart instances. These styling elements typically include colors, fonts, backgrounds, and grids.

Option 1 - The static methods of NFGraph can create charts from templates represented as File objects, Input Stream objects, URL's or strings of CDL. The methods will examine the provided chart template, construct the appropriate chart class, and configure it using the template.

• public static NFGraph getGraphFromTemplate(InputStream templateStream)

• public static NFGraph getGraphFromTemplate(File templateFile)

• public static NFGraph getGraphFromTemplate(URL templateURL)

• public static NFGraph getGraphFromTemplate(String template)

The following sample code demonstrates creating a bar chart from a base chart template that is stored on disk:

NFBarchart chart = null;
try {
    chart = (NFBarchart) NFGraph.getGraphFromTemplate(new File("barchart.cdl"));
    ...

Option 2 - Charts can be constructed directly and then configured using CDL. The following sample code demonstrates creating a bar chart and configuring it using CDL:

NFBarchart chart = new NFBarchart();
chart.initializeFromString("Background=(grey); LeftTics=(ON,black,'Arial',12); BottomTics=(ON,black,'Arial',12);");
...

Step 2 - Set the dynamic elements of the chart

Once the chart has been created and configured with the styling elements of the chart, it can be populated with data. Typically, the program will interrogate a data source to obtain the data and then add it to the chart. The following sample code demonstrates adding data points, bar labels, and the header to a bar chart:

// Get the data
ResultSet rs = ...;

// Set the chart header
NFTitle header = chart.getHeader();
header.setText("Northeast Sales");
chart.setHeader(header);

// Add the data and labels to the chart
NFBarSeries barSeries = chart.getBarSeries();
NFBarSet barSet = new NFBarSet();
NFVector barLabels = new NFVector();
while(rs.next()) {
    barSet.addElement(new Double(rs.getDouble("value")));
    barLabels.addElement(rs.getString("name"));
}
barSeries.setElementAt(barSet, 0);
chart.setBarSeries(barSeries);
chart.setDataLabels(barLabels);

Step 3 - Output the chart for the browser to view

Once the chart has been completely configured, the final step is to render the chart as an image for the browser to present. The most common image types are PNG (for raster output) and SVG (for vector output). The

netcharts.pro.util.NFServletUtil

The following sample code demonstrates rendering a chart as a PNG image within a JSP page or Servlet. This code also produces HTML that presents the image and includes an image map that provides support for hover, rollover, and drilldown on the image:

NFRasterPageParams rasterPageParams = new NFRasterPageParams(NFRasterPageParams.MIME_TYPE_PNG);
String theChartHtml = NFServletUtil.getPage(request, chart, rasterPageParams);
response.getWriter().print(theChartHtml);

This code produces output that looks like:

<script type="text/javascript">
// <![CDATA[
RasterConfigs['2210665067'] = new RasterInteraction('2210665067');
...
// ]]>
</script>
<div id="imgWrapper2210665067" style="position:relative;display:inline-block;*display:inline;">
    <img src="getresource?image=2210665067" border="0" style="z-index:0;"/>
    <img id="overlay2210665067"  usemap="#2210665067" src="getresource?image=2210665067" class="imgOverlay" useMap="#chartMap"/>
    <map id="map2210665067" name="2210665067">
    ...

The following sample code demonstrates rendering a chart as a SVG image within a JSP page of Servlet. This code also produces HTML that presents the image in any HTML 5 compliant web browser. Support for hover, rollover, and drilldown are included within the SVG image itself:

NFSVGPageParams svgPageParameters = new NFSVGPageParams();
String theChartHtml = NFServletUtil.getPage(request, chart, svgPageParameters);
response.getWriter().print(theChartHtml);

This code produces output that looks like:

<!--[if IE]>
<object src="getresource?image=2721256202" classid="image/svg+xml" width="400" height="300">
<![endif]-->
<!--[if !IE]>-->
<object data="getresource?image=2721256202" type="image/svg+xml" width="400" height="300">
<!--<![endif]-->
</object>