ChartDirector 7.0 (ASP/COM/VB Edition)

Surface Chart (3)




This example demonstrates using deep perspective. It also demonstrates surface grid lines of different line styles.

Source Code Listing

[Web Version (in ASP)] aspdemo\surface3.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 = ' Sin(x * x / 128 - y * y / 256 + 3) * Cos(x / 4 + 1 - Exp(y / 8)) 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) = Sin(x * x / 128.0 - y * y / 256.0 + 3) * _ Cos(x / 4.0 + 1 - Exp(y / 8.0)) Next Next ' Create a SurfaceChart object of size 750 x 600 pixels Set c = cd.SurfaceChart(750, 600) ' Add a title to the chart using 20 points Times New Roman Italic font Call c.addTitle("Surface Energy Density ", "Times New Roman Italic", 20) ' Set the center of the plot region at (380, 260), and set width x depth x height to 360 x 360 x 270 ' pixels Call c.setPlotRegion(380, 260, 360, 360, 270) ' Set the elevation and rotation angles to 30 and 210 degrees Call c.setViewAngle(30, 210) ' Set the perspective level to 60 Call c.setPerspective(60) ' Set the data to use to plot the chart Call c.setData(dataX, dataY, dataZ) ' Spline interpolate data to a 80 x 80 grid for a smooth surface Call c.setInterpolation(80, 80) ' Use semi-transparent black (c0000000) for x and y major surface grid lines. Use dotted style for x ' and y minor surface grid lines. majorGridColor = &Hc0000000 minorGridColor = c.dashLineColor(majorGridColor, cd.DotLine) Call c.setSurfaceAxisGrid(majorGridColor, majorGridColor, minorGridColor, minorGridColor) ' Set contour lines to semi-transparent white (80ffffff) Call c.setContourColor(&H80ffffff) ' Add a color axis (the legend) in which the left center is anchored at (665, 280). Set the length ' to 200 pixels and the labels on the right side. Call c.setColorAxis(665, 280, cd.Left, 200, cd.Right) ' Set the x, y and z axis titles using 12 points Arial Bold font Call c.xAxis().setTitle("X Title<*br*>Placeholder", "Arial Bold", 12) Call c.yAxis().setTitle("Y Title<*br*>Placeholder", "Arial Bold", 12) Call c.zAxis().setTitle("Z Title Placeholder", "Arial Bold", 12) ' Output the chart Set viewer = cd.WebChartViewer(Request, "chart1") Call viewer.setChart(c, cd.SVG) %> <!DOCTYPE html> <html> <head> <title>Surface Chart (3)</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;"> Surface Chart (3) </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\surface3.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 ' = Sin(x * x / 128 - y * y / 256 + 3) * Cos(x / 4 + 1 - Exp(y / 8)) 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) = Sin(x * x / 128.0 - y * y / 256.0 + 3) _ * Cos(x / 4.0 + 1 - Exp(y / 8.0)) Next Next ' Create a SurfaceChart object of size 750 x 600 pixels Dim c As SurfaceChart Set c = cd.SurfaceChart(750, 600) ' Add a title to the chart using 20 points Times New Roman Italic font Call c.addTitle("Surface Energy Density ", "timesi.ttf", 20) ' Set the center of the plot region at (380, 260), and set width x depth x height to 360 x 360 x ' 270 pixels Call c.setPlotRegion(380, 260, 360, 360, 270) ' Set the elevation and rotation angles to 30 and 210 degrees Call c.setViewAngle(30, 210) ' Set the perspective level to 60 Call c.setPerspective(60) ' Set the data to use to plot the chart Call c.setData(dataX, dataY, dataZ) ' Spline interpolate data to a 80 x 80 grid for a smooth surface Call c.setInterpolation(80, 80) ' Use semi-transparent black (c0000000) for x and y major surface grid lines. Use dotted style ' for x and y minor surface grid lines. Dim majorGridColor As Long majorGridColor = &Hc0000000 Dim minorGridColor As Long minorGridColor = c.dashLineColor(majorGridColor, cd.DotLine) Call c.setSurfaceAxisGrid(majorGridColor, majorGridColor, minorGridColor, minorGridColor) ' Set contour lines to semi-transparent white (80ffffff) Call c.setContourColor(&H80ffffff) ' Add a color axis (the legend) in which the left center is anchored at (665, 280). Set the ' length to 200 pixels and the labels on the right side. Call c.setColorAxis(665, 280, cd.Left, 200, cd.Right) ' Set the x, y and z axis titles using 12 points Arial Bold font Call c.xAxis().setTitle("X Title<*br*>Placeholder", "arialbd.ttf", 12) Call c.yAxis().setTitle("Y Title<*br*>Placeholder", "arialbd.ttf", 12) Call c.zAxis().setTitle("Z Title Placeholder", "arialbd.ttf", 12) ' Output the chart Set viewer.Picture = c.makePicture() End Sub