ChartDirector 7.0 (ASP/COM/VB Edition)

Contour Chart

This example demonstrates creating a contour chart.

Source Code Listing

[Web Version (in ASP)] aspdemo\contour.asp
```<%@ language="vbscript" %> <% Set cd = CreateObject("ChartDirector.API") ' The x and y coordinates of the grid dataX = Array(-10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10) dataY = Array(-10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10) ' The values at the grid points. In this example, we will compute the values using the formula z = x ' * sin(y) + y * sin(x). ReDim dataZ((UBound(dataX) + 1) * (UBound(dataY) + 1) - 1) For yIndex = 0 To UBound(dataY) y = dataY(yIndex) For xIndex = 0 To UBound(dataX) x = dataX(xIndex) dataZ(yIndex * (UBound(dataX) + 1) + xIndex) = x * Sin(y) + y * Sin(x) Next Next ' Create a XYChart object of size 600 x 500 pixels Set c = cd.XYChart(600, 500) ' Add a title to the chart using 15 points Arial Bold Italic font Call c.addTitle("z = x * sin(y) + y * sin(x) ", "Arial Bold Italic", 15) ' Set the plotarea at (75, 40) and of size 400 x 400 pixels. Use semi-transparent black (80000000) ' dotted lines for both horizontal and vertical grid lines Call c.setPlotArea(75, 40, 400, 400, -1, -1, -1, c.dashLineColor(&H80000000, cd.DotLine), -1) ' Set x-axis and y-axis title using 12 points Arial Bold Italic font Call c.xAxis().setTitle("X-Axis Title Place Holder", "Arial Bold Italic", 12) Call c.yAxis().setTitle("Y-Axis Title Place Holder", "Arial Bold Italic", 12) ' Set x-axis and y-axis labels to use Arial Bold font Call c.xAxis().setLabelStyle("Arial Bold") Call c.yAxis().setLabelStyle("Arial Bold") ' When auto-scaling, use tick spacing of 40 pixels as a guideline Call c.yAxis().setTickDensity(40) Call c.xAxis().setTickDensity(40) ' Add a contour layer using the given data Set layer = c.addContourLayer(dataX, dataY, dataZ) ' Move the grid lines in front of the contour layer Call c.getPlotArea().moveGridBefore(layer) ' Add a color axis (the legend) in which the top left corner is anchored at (505, 40). Set the ' length to 400 pixels and the labels on the right side. Set cAxis = layer.setColorAxis(505, 40, cd.TopLeft, 400, cd.Right) ' Add a title to the color axis using 12 points Arial Bold Italic font Call cAxis.setTitle("Color Legend Title Place Holder", "Arial Bold Italic", 12) ' Set color axis labels to use Arial Bold font Call cAxis.setLabelStyle("Arial Bold") ' Output the chart Set viewer = cd.WebChartViewer(Request, "chart1") Call viewer.setChart(c, cd.SVG) ' Include tool tip for the chart viewer.ImageMap = c.getHTMLImageMap("", "", _ "title='<*cdml*><*b*>X: {x|2}<*br*>Y: {y|2}<*br*>Z: {z|2}''") ' Output Javascript chart model to support contour chart tooltips viewer.ChartModel = c.getJsChartModel() %> <!DOCTYPE html> <html> <head> <title>Contour Chart</title> <!-- Include ChartDirector Javascript Library to support chart interactions --> <script type="text/javascript" src="cdjcv.js"></script> </head> <body style="margin:5px 0px 0px 5px"> <div style="font:bold 18pt verdana;"> Contour Chart </div> <hr style="border:solid 1px #000080; background:#000080" /> <div style="font:10pt verdana; margin-bottom:1.5em"> <a href="viewsource.asp?file=<%= Request("SCRIPT_NAME") %>">View Chart Source Code</a> </div> <!-- ****** Here is the chart image ****** --> <%= viewer.renderHTML() %> </body> </html>```

[Windows Version (in Visual Basic)] vbdemo\contour.cls
```Public Sub createChart(viewer As Object, chartIndex As Integer) Dim cd As New ChartDirector.API ' The x and y coordinates of the grid Dim dataX() dataX = Array(-10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10) Dim dataY() dataY = Array(-10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10) ' The values at the grid points. In this example, we will compute the values using the formula z ' = x * sin(y) + y * sin(x). ReDim dataZ((UBound(dataX) + 1) * (UBound(dataY) + 1) - 1) Dim yIndex As Long For yIndex = 0 To UBound(dataY) Dim y As Double y = dataY(yIndex) Dim xIndex As Long For xIndex = 0 To UBound(dataX) Dim x As Double x = dataX(xIndex) dataZ(yIndex * (UBound(dataX) + 1) + xIndex) = x * Sin(y) + y * Sin(x) Next Next ' Create a XYChart object of size 600 x 500 pixels Dim c As XYChart Set c = cd.XYChart(600, 500) ' Add a title to the chart using 15 points Arial Bold Italic font Call c.addTitle("z = x * sin(y) + y * sin(x) ", "arialbi.ttf", 15) ' Set the plotarea at (75, 40) and of size 400 x 400 pixels. Use semi-transparent black ' (80000000) dotted lines for both horizontal and vertical grid lines Call c.setPlotArea(75, 40, 400, 400, -1, -1, -1, c.dashLineColor(&H80000000, cd.DotLine), -1) ' Set x-axis and y-axis title using 12 points Arial Bold Italic font Call c.xAxis().setTitle("X-Axis Title Place Holder", "arialbi.ttf", 12) Call c.yAxis().setTitle("Y-Axis Title Place Holder", "arialbi.ttf", 12) ' Set x-axis and y-axis labels to use Arial Bold font Call c.xAxis().setLabelStyle("arialbd.ttf") Call c.yAxis().setLabelStyle("arialbd.ttf") ' When auto-scaling, use tick spacing of 40 pixels as a guideline Call c.yAxis().setTickDensity(40) Call c.xAxis().setTickDensity(40) ' Add a contour layer using the given data Dim layer As ContourLayer Set layer = c.addContourLayer(dataX, dataY, dataZ) ' Move the grid lines in front of the contour layer Call c.getPlotArea().moveGridBefore(layer) ' Add a color axis (the legend) in which the top left corner is anchored at (505, 40). Set the ' length to 400 pixels and the labels on the right side. Dim cAxis As ColorAxis Set cAxis = layer.setColorAxis(505, 40, cd.TopLeft, 400, cd.Right) ' Add a title to the color axis using 12 points Arial Bold Italic font Call cAxis.setTitle("Color Legend Title Place Holder", "arialbi.ttf", 12) ' Set color axis labels to use Arial Bold font Call cAxis.setLabelStyle("arialbd.ttf") ' Output the chart Set viewer.Picture = c.makePicture() End Sub```