Simple Area Chart

This example demonstrates the basic steps in creating area charts.

Create an XYChart object using XYChart.XYChart.
Specify the plot area of the chart using XYChart.setPlotArea. The plot area is the rectangle bounded by the x and y axes. You should leave some margin on the outside of the plot area for axis labels, chart titles, etc.
Specify the labels on the x-axis using Axis.setLabels.
An area chart may contain many points and therefore many x-axis labels. In this example, Axis.setLabelStep is used to specify showing only a subset of the labels on the x-axis to avoid over-crowding.
Add an area layer and specify the data for the area using XYChart.addAreaLayer.
Assign the chart to the WebChartViewer using WebChartViewer.setChart, and insert it to the web page using WebChartViewer.renderHTML. (ASP version)
Generate the chart image using BaseChart.makePicture and assign it to the ChartViewer using ChartViewer.Picture. (VB version)
Generate tool tips for the chart using BaseChart.getHTMLImageMap.

[Web Version (in ASP)] aspdemo\simplearea.asp

<%@ language="vbscript" %>
<%
Set cd = CreateObject("ChartDirector.API")

' The data for the area chart
data = Array(30, 28, 40, 55, 75, 68, 54, 60, 50, 62, 75, 65, 75, 89, 60, 55, 53, 35, 50, 66, 56, _
    48, 52, 65, 62)

' The labels for the area chart
labels = Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", _
    "15", "16", "17", "18", "19", "20", "21", "22", "23", "24")

' Create a XYChart object of size 250 x 250 pixels
Set c = cd.XYChart(250, 250)

' Set the plotarea at (30, 20) and of size 200 x 200 pixels
Call c.setPlotArea(30, 20, 200, 200)

' Add an area chart layer using the given data
Call c.addAreaLayer(data)

' Set the labels on the x axis.
Call c.xAxis().setLabels(labels)

' Display 1 out of 3 labels on the x-axis.
Call c.xAxis().setLabelStep(3)

' 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='Hour {xLabel}: Traffic {value} GBytes'")
%>

<!DOCTYPE html>
<html>
<head>
    <title>Simple Area 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;">
        Simple Area 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\simplearea.cls

Public Sub createChart(viewer As Object, chartIndex As Integer)

    Dim cd As New ChartDirector.API

    ' The data for the area chart
    Dim data()
    data = Array(30, 28, 40, 55, 75, 68, 54, 60, 50, 62, 75, 65, 75, 89, 60, 55, 53, 35, 50, 66, _
        56, 48, 52, 65, 62)

    ' The labels for the area chart
    Dim labels()
    labels = Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", _
        "15", "16", "17", "18", "19", "20", "21", "22", "23", "24")

    ' Create a XYChart object of size 250 x 250 pixels
    Dim c As XYChart
    Set c = cd.XYChart(250, 250)

    ' Set the plotarea at (30, 20) and of size 200 x 200 pixels
    Call c.setPlotArea(30, 20, 200, 200)

    ' Add an area chart layer using the given data
    Call c.addAreaLayer(data)

    ' Set the labels on the x axis.
    Call c.xAxis().setLabels(labels)

    ' Display 1 out of 3 labels on the x-axis.
    Call c.xAxis().setLabelStep(3)

    ' Output the chart
    Set viewer.Picture = c.makePicture()

    'include tool tip for the chart
    viewer.ImageMap = c.getHTMLImageMap("clickable", "", _
        "title='Hour {xLabel}: Traffic {value} GBytes'")

End Sub