4D Surface Chart

[Web Version (in ASP)] aspdemo\surface4d.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(-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 SurfaceChart object of size 460 x 460 pixels, with white (ffffff) background and grey
    ' (888888) border.
    Set c = cd.SurfaceChart(460, 460, &Hffffff, &H888888)

    ' Add a color axis at the top center of the chart, with labels at the bottom side
    Set cAxis = c.setColorAxis(c.getWidth() / 2, 10, cd.Top, 250, cd.Bottom)

    ' If the color is based on the z-values, the color axis will synchronize with the z-axis. (The
    ' Axis.syncAxis can be used to disable that.) Otherwise, the color axis will auto-scale
    ' independently. In the latter case, we set the tick spacing to at least 20 pixels.
    Call cAxis.setTickDensity(20)

    ' Set flat color axis style
    Call cAxis.setAxisBorder(cd.Transparent, 0)

    If chartIndex = 0 Then
        ' The default is to use the Z values to determine the color.
        Call cAxis.setTitle("Color based on Z", "Arial Bold", 15)
        Call c.setData(dataX, dataY, dataZ)
    ElseIf chartIndex = 1 Then
        ' ChartDirector supports using an extra value (called W value) to determine the color.
        Call cAxis.setTitle("Color based on W", "Arial Bold", 15)

        ' Use random W values
        Set r = cd.RanSeries(5)
        dataW = r.get2DSeries(UBound(dataX) + 1, UBound(dataY) + 1, 0.5, 9.5)
        Call c.setData2(dataX, dataY, dataZ, dataW)
    ElseIf chartIndex = 2 Then
        ' We can set the W values to the X coordinates. The color will then be determined by the X
        ' coordinates.
        Call cAxis.setTitle("Color based on X", "Arial Bold", 15)
        ReDim colorX(UBound(dataZ))
        For yIndex = 0 To UBound(dataY)
            For xIndex = 0 To UBound(dataX)
                colorX(yIndex * (UBound(dataX) + 1) + xIndex) = dataX(xIndex)
            Next
        Next
        Call c.setData2(dataX, dataY, dataZ, colorX)
    Else
        ' We can set the W values to the Y coordinates. The color will then be determined by the Y
        ' coordinates.
        Call cAxis.setTitle("Color based on Y", "Arial Bold", 15)
        ReDim colorY(UBound(dataZ))
        For yIndex = 0 To UBound(dataY)
            For xIndex = 0 To UBound(dataX)
                colorY(yIndex * (UBound(dataX) + 1) + xIndex) = dataY(yIndex)
            Next
        Next
        Call c.setData2(dataX, dataY, dataZ, colorY)
    End If

    ' Set the center of the plot region at (230, 250), and set width x depth x height to 240 x 240 x
    ' 170 pixels
    Call c.setPlotRegion(230, 250, 240, 240, 170)

    ' Set the plot region wall thichness to 3 pixels
    Call c.setWallThickness(3)

    ' Set the elevation and rotation angles to 45 degrees
    Call c.setViewAngle(45, 45)

    ' Set the perspective level to 20
    Call c.setPerspective(20)

    ' Spline interpolate data to a 50 x 50 grid for a smooth surface
    Call c.setInterpolation(50, 50)

    ' Add the axis titles
    Call c.xAxis().setTitle("X-Axis", "Arial Bold", 10)
    Call c.yAxis().setTitle("Y-Axis", "Arial Bold", 10)
    Call c.zAxis().setTitle("Z Axis", "Arial Bold", 10)

    ' Output the chart
    Call viewer.setChart(c, cd.SVG)
End Sub

' This example includes 4 charts
Dim viewers(3)
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>4D Surface 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;">
        4D Surface 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 are the chart images ****** -->
    <%
        For i = 0 To Ubound(viewers)
            Call Response.Write(viewers(i).renderHTML())
            Call Response.Write(" ")
        Next
    %>
</body>
</html>