ChartDirector 7.0 (ASP/COM/VB Edition)

Surface Wireframe

          

This example demonstrates the rectangular and triangular wireframes of a surface at different interpolation levels, configured using SurfaceChart.setShadingMode and SurfaceChart.setInterpolation.

Source Code Listing

[Web Version (in ASP)] aspdemo\surfacewireframe.asp
<%@ language="vbscript" %> <% Set cd = CreateObject("ChartDirector.API") ' This script can draw different charts depending on the chartIndex Sub createChart(viewer, chartIndex) ' The x and y coordinates of the grid dataX = Array(-2, -1, 0, 1, 2) dataY = Array(-2, -1, 0, 1, 2) ' The values at the grid points. In this example, we will compute the values using the formula z ' = square_root(15 - x * x - y * y). 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) = Sqr(15 - x * x - y * y) Next Next ' Create a SurfaceChart object of size 380 x 340 pixels, with white (ffffff) background and grey ' (888888) border. Set c = cd.SurfaceChart(380, 340, &Hffffff, &H888888) ' Demonstrate various wireframes with and without interpolation If chartIndex = 0 Then ' Original data without interpolation Call c.addTitle("5 x 5 Data Points<*br*>Standard Shading", "Arial Bold", 12) Call c.setContourColor(&H80ffffff) ElseIf chartIndex = 1 Then ' Original data, spline interpolated to 40 x 40 for smoothness Call c.addTitle("5 x 5 Points - Spline Fitted to 40 x 40<*br*>Standard Shading", _ "Arial Bold", 12) Call c.setContourColor(&H80ffffff) Call c.setInterpolation(40, 40) ElseIf chartIndex = 2 Then ' Rectangular wireframe of original data Call c.addTitle("5 x 5 Data Points<*br*>Rectangular Wireframe") Call c.setShadingMode(cd.RectangularFrame) ElseIf chartIndex = 3 Then ' Rectangular wireframe of original data spline interpolated to 40 x 40 Call c.addTitle("5 x 5 Points - Spline Fitted to 40 x 40<*br*>Rectangular Wireframe") Call c.setShadingMode(cd.RectangularFrame) Call c.setInterpolation(40, 40) ElseIf chartIndex = 4 Then ' Triangular wireframe of original data Call c.addTitle("5 x 5 Data Points<*br*>Triangular Wireframe") Call c.setShadingMode(cd.TriangularFrame) Else ' Triangular wireframe of original data spline interpolated to 40 x 40 Call c.addTitle("5 x 5 Points - Spline Fitted to 40 x 40<*br*>Triangular Wireframe") Call c.setShadingMode(cd.TriangularFrame) Call c.setInterpolation(40, 40) End If ' Set the center of the plot region at (200, 170), and set width x depth x height to 200 x 200 x ' 150 pixels Call c.setPlotRegion(200, 170, 200, 200, 150) ' Set the plot region wall thichness to 5 pixels Call c.setWallThickness(5) ' Set the elevation and rotation angles to 20 and 30 degrees Call c.setViewAngle(20, 30) ' Set the data to use to plot the chart Call c.setData(dataX, dataY, dataZ) ' Output the chart Call viewer.setChart(c, cd.SVG) End Sub ' This example includes 6 charts Dim viewers(5) For i = 0 To Ubound(viewers) Set viewers(i) = cd.WebChartViewer(Request, "chart" & i) Call createChart(viewers(i), i) Next %> <!DOCTYPE html> <html> <head> <title>Surface Wireframe</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 Wireframe </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 are the chart images ****** --> <% For i = 0 To Ubound(viewers) Call Response.Write(viewers(i).renderHTML()) Call Response.Write(" ") Next %> </body> </html>

[Windows Version (in Visual Basic)] vbdemo\surfacewireframe.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(-2, -1, 0, 1, 2) Dim dataY() dataY = Array(-2, -1, 0, 1, 2) ' The values at the grid points. In this example, we will compute the values using the formula z ' = square_root(15 - x * x - y * y). 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) = Sqr(15 - x * x - y * y) Next Next ' Create a SurfaceChart object of size 380 x 340 pixels, with white (ffffff) background and grey ' (888888) border. Dim c As SurfaceChart Set c = cd.SurfaceChart(380, 340, &Hffffff, &H888888) ' Demonstrate various wireframes with and without interpolation If chartIndex = 0 Then ' Original data without interpolation Call c.addTitle("5 x 5 Data Points<*br*>Standard Shading", "arialbd.ttf", 12) Call c.setContourColor(&H80ffffff) ElseIf chartIndex = 1 Then ' Original data, spline interpolated to 40 x 40 for smoothness Call c.addTitle("5 x 5 Points - Spline Fitted to 40 x 40<*br*>Standard Shading", _ "arialbd.ttf", 12) Call c.setContourColor(&H80ffffff) Call c.setInterpolation(40, 40) ElseIf chartIndex = 2 Then ' Rectangular wireframe of original data Call c.addTitle("5 x 5 Data Points<*br*>Rectangular Wireframe") Call c.setShadingMode(cd.RectangularFrame) ElseIf chartIndex = 3 Then ' Rectangular wireframe of original data spline interpolated to 40 x 40 Call c.addTitle("5 x 5 Points - Spline Fitted to 40 x 40<*br*>Rectangular Wireframe") Call c.setShadingMode(cd.RectangularFrame) Call c.setInterpolation(40, 40) ElseIf chartIndex = 4 Then ' Triangular wireframe of original data Call c.addTitle("5 x 5 Data Points<*br*>Triangular Wireframe") Call c.setShadingMode(cd.TriangularFrame) Else ' Triangular wireframe of original data spline interpolated to 40 x 40 Call c.addTitle("5 x 5 Points - Spline Fitted to 40 x 40<*br*>Triangular Wireframe") Call c.setShadingMode(cd.TriangularFrame) Call c.setInterpolation(40, 40) End If ' Set the center of the plot region at (200, 170), and set width x depth x height to 200 x 200 x ' 150 pixels Call c.setPlotRegion(200, 170, 200, 200, 150) ' Set the plot region wall thichness to 5 pixels Call c.setWallThickness(5) ' Set the elevation and rotation angles to 20 and 30 degrees Call c.setViewAngle(20, 30) ' Set the data to use to plot the chart Call c.setData(dataX, dataY, dataZ) ' Output the chart Set viewer.Picture = c.makePicture() End Sub

© 2021 Advanced Software Engineering Limited. All rights reserved.