Using NetCharts Designer with NetCharts Pro

Introduction

While NetCharts Designer was created primarily to support NetCharts Server, it can also be used to simplify the creation of chart templates for use with NetCharts Pro. NetCharts Designer can produce and export RCDL files. RCDL stands for “Resolved CDL” where the NetCharts Designer template is converted to fully resolved Visual Mining’s Chart Definition Language. RCDL files contain chart templates that have no dependency on NetCharts Server and the template can be used directly by NetCharts Pro.

How To Use NetCharts Designer with NetCharts Pro

The following steps demonstrate how to use NetCharts Designer to create and test a NetCharts Pro applet.
 
1. Open NetCharts Designer and select the File -> New -> Project menu item.
 
usingNCDwithNCP_1
 

2. In the Project Wizard type MyProject then click Finish.
 
usingNCDwithNCP_2
 

3. With the project highlighted, select the File -> New -> Chart menu item.
 
usingNCDwithNCP_3
 

4. In the Chart Wizard, select and highlight the Bar chart type, enter MyBarChart in the Chart Name text box and click Finish. You now have a bar chart with default styling and sample data.

NOTE: At this point you may want to customize the styling of your chart template a little further.

 
usingNCDwithNCP_4
 

5. Highlight the MyBarChart.cdx template in the MyProject project, right-click the file and select Export.
 
usingNCDwithNCP_5
 

6. In the Export window, select Visual Mining Chart Export (PNG, PDF, RCDL, etc.) and click Next.
 
usingNCDwithNCP_6
 

7. In the Chart Export Wizard, locate the Export Type dropdown and scroll to the bottom last option to select Resolved CDL.
 
usingNCDwithNCP_7
 

8. Uncheck the Save to Directory option, check the Save to Project checkbox and click Finish.
 
usingNCDwithNCP_8
 

9. You will now have two files in the project, MyBarChart.cdx and MyBarChart.rcdl.
 
usingNCDwithNCP_9
 

We will revisit NetCharts Designer in a moment but first we will prepare a web server to host the web page presenting the chart. For this example we will use a Microsoft IIS Server but any web server can be used. This first step will be to make available the NetCharts Pro Applets library via a Virtual Directory.
 

10. To create the Virtual Directory, you will need to perform the following steps:

  • Open the Administrative Tools Control Panel and open the Internet Information Services (IIS) panel.

    •  

  • In the IIS window, expand the local computer directory icon.

    •  

  • Expand the Web Sites directory and select the Default Web Site.

    •  

  • With the Default Web Site highlighted, right-click and select New -> Virtual Directory….

    •  

  • In the Virtual Directory Creation Wizard, click Next.

    •  

  • In the Alias text box enter pro7classes and click Next.

    •  

  • In the Directory box, browse down to the applets directory within the NetCharts Pro 7.1 installation (e.g.C:\Program Files\Visual Mining\NetCharts Pro 7.1\applets) and click Next.

    •  

  • Leave the default Access Permissions, click Next and then click Finish.

 
11. Finally we will create the .html web page that will present the chart. The chart will be included using an applet parameter and the CDL of the newly created chart template we made earlier in NetCharts Designer. In a plain text editor such as Notepad create a new file and paste in the following HTML parameters:

<html>
<head><title>NetCharts Designer Chart in NetCharts Pro</title><head>
<body>

<applet name="Barchart"
code=netcharts.apps.NFBarchartApp
codebase="../../../../applets"
archive=ncp-core.jar
width=600 height=300>
<param name=NFParamScript value=’

‘>
</applet>

</body>
</html>

12. Save the page as MyApplet.html inside the root folder of the IIS hosted website (e.g. C:\Inetpub\wwwroot).

13. Note how the default codebase of the applet is: “../../../../applets”. So the codebase will need to be changed to use pro7classes which is the Virtual Directory we created earlier. The updated codebase should now appear as below.

<html>
<body>

<applet name="Barchart"
code="netcharts.apps.NFBarchartApp"
codebase="pro7classes"
archive=ncp-core.jar
width=600 height=300>
<param name=NFParamScript value=’

‘>
</applet>

</body>
</html>

 

Now let’s go back to NetCharts Designer.
 

14. Right-click the MyBarChart.rcdl file, select the Open With menu item and then select the Text Editor option to view the Resolved CDL in a plain text editor inside NetCharts Designer.
 
usingNCDwithNCP_10
 

15. Copy the entire CDL content of the MyBarChart.rcdl file, from ChartType = BARCHART; at the top all the way down to BarSymbol = (BAR, );. One option is to use the Select All feature (Ctrl-A).
 
usingNCDwithNCP_11
 

16. Go back to your plain text editor with the open MyApplet.html web page and paste in the copied CDL content as the value of the NFParamScript attribute so that it will appear like this:

<html>
<body>

<applet name="Barchart"
code=netcharts.apps.NFBarchartApp
codebase="pro7classes"
archive=ncp-core.jar
width=600 height=300>
<param name=NFParamScript value=’
ChartType = BARCHART;
ChartName = "NetCharts Barchart";
ChartSize = (500,300);
BottomDrawMinorTics = "ON";
BottomScale = (null, null, null);
BarSpotlights = (, , CENTER, 0, 0, 0, 0, -1);
RightTicLayout = (AUTO, 1, 2);
DataLegendGridLine = (BOTH, SOLID, 1);
LeftColor = xc0c0c0_127;
LegendBox = (, NONE, 1, , TILE, , ROUND, ROUND, ROUND, ROUND, );
NumberFormat = (".", ",", 3);
LegendItemBorder = (NONE, 1, );
Background = (, NONE, 4, , TILE, , SQUARE, SQUARE, SQUARE, SQUARE, );
LeftDrawMinorTics = "ON";
DwellAnimationStyle = HIGHLIGHT;
RightScale = (null, null, null);
BottomTics = ("", x000000_178, "Arial Plain", 10, 0, CENTER, , CENTER);
LegendAxis = ("BOTTOM", "LEFT");
LeftAxisTitleBox = (, NONE, 1, , TILE, , ROUND, ROUND, ROUND, ROUND, );
BottomMargins = (0, 0);
BottomMajorTicColor = white;
Bar3DDepth = 0;
AntiAlias = "ON";
BarTopFillPattern = (NONE, , , );
MetaData = ("DEFAULT_STYLE", "DefaultLabelFont");
GridLine = (BOTH, SOLID, 1);
DwellAnimationHighlightFill = xffffff_102;
DwellLabel = ("", black, "Arial", 10, 0, CENTER);
BarHighlights = (GRADIENTHORIZONTAL, xffffff_80, xffffff_0, 0.0010, 0.0010, 0.0010, 0.0010, -1, -1, "SQUARE_0.0", "SQUARE_0.0", "SQUARE_0.0", "SQUARE_0.0"), (GRADIENTHORIZONTAL, xffffff_0, x000000_80, 0.0010, -0.09, 0.0010, -0.09, -0.09, -1, "SQUARE_0.0", "SQUARE_0.0", "SQUARE_0.0", "SQUARE_0.0");
Grid = (xefefef_127, , xefefef_127, , TILE);
LeftMajorTicColor = white;
DataSets = ("DataSet1", , BAR, 4, FILLED);
DataSet1 = 10, 20, 12, 15, 5, 10;
DataLegend = "OFF";
BarBorder = (NONE, 1, );
BottomAxisTitle = ("", x000000_178, "Arial Plain", 10, 0, CENTER, CENTER);
BarLabels = "Label1", "Label2", "Label3", "Label4", "Label5", "Label6";
HeaderBox = (, NONE, 1, , TILE, , ROUND, ROUND, ROUND, ROUND, );
LeftTicLayout = (AUTO, 1, 2);
BottomTicLayout = (AUTO, 1, 2);
Header = ("", x000000_178, "Arial Plain", 10, 0, CENTER, CENTER, "OFF");
BarWidth = 70;
RightTics = (, x000000_178, "Arial Plain", 10, 0, CENTER, , CENTER);
ColorTable = x0a9696, xfec619, x94c209, xcc7138, xd64646, x8e468e, xfb2f99, xb8e0ff, xcae78f, xf1aab2, xa29c65, x604300, x339276, x64bcb7;
GridAxis = ("BOTTOM", "LEFT");
LeftScale = (null, null, null);
LeftFormat = (DECIMAL, "###,###.###", null, null);
LeftTics = ("", x000000_178, "Arial Plain", 10, 0, CENTER, , CENTER);
BottomMinorTicColor = white;
BarFillPattern = (NONE, , , );
BottomAxisTitleBox = (, NONE, 1, , TILE, , ROUND, ROUND, ROUND, ROUND, );
BottomColor = xc0c0c0_127;
TopTics = (, x000000_178, "Arial Plain", 10, 0, CENTER, , CENTER);
LeftMinorTicColor = white;
DwellLabelBox = (xffffff_229, BOX, 1, , TILE, grey, SQUARE, SQUARE, SQUARE, SQUARE, white);
TopScale = (null, null, null);
Legend = ("OFF", x000000_178, "Arial Plain", 10, 0, CENTER);
BarDropShadow = (x000000_110, 0.01, 0.0090, 0.02);
DataLegendGrid = (xc0c0c0_89, white, white, , TILE);
BuildAnimationEnabled = "OFF";
BarRightFillPattern = (NONE, , , );
BarValueLabelBox = (, NONE, 1, , TILE, , ROUND, ROUND, ROUND, ROUND, );
BackgroundFillPattern = (NONE, , , );
LeftAxisTitle = ("", x000000_178, "Arial Plain", 10, 0, CENTER, CENTER);
GraphLayout = VERTICAL;
LeftMargins = (0, 0);
BarCorners = ("ROUND_0.1", "ROUND_0.1", "ROUND_0.1", "ROUND_0.1");
BarValueLabel = ("", x000000_178, "Arial Plain", 10, 0, CENTER);
BottomFormat = (DECIMAL, "###,###.###", null, null);
DwellAnimationHighlightBorderStyle = (SOLID, 1, grey);
TopTicLayout = (AUTO, 1, 2);
BarSymbol = (BAR, );
‘>
</applet>

</body>
</html>

Save the MyApplet.html web page with the newly added CDL params of the chart template.
 

17. Finally, open the page in a web browser by entering the following URL:http://localhost/MyApplet.html. The BarChart applet should display as shown below.
 
usingNCDwithNCP_Final
 

NOTE: You may have to accept the permission to allow a Java Virtual Machine to run based on your browser settings.