Multi-Shape Bar Chart

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

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

' The data for the bar chart
data0 = Array(100, 125, 245, 147)
data1 = Array(85, 156, 179, 211)
data2 = Array(97, 87, 56, 267)
labels = Array("1st Quarter", "2nd Quarter", "3rd Quarter", "4th Quarter")

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

' Add a title to the chart using 14pt Arial Bold Italic font
Call c.addTitle("Annual Product Revenue", "Arial Bold Italic", 14)

' Set the plot area at (50, 60) and of size 500 x 240. Use two alternative background colors (f8f8f8
' and ffffff)
Call c.setPlotArea(50, 60, 500, 240, &Hf8f8f8, &Hffffff)

' Add a legend box at (55, 22) using horizontal layout, with transparent background
Call c.addLegend(55, 22, False).setBackground(cd.Transparent)

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

' Draw the ticks between label positions (instead of at label positions)
Call c.xAxis().setTickOffset(0.5)

' Add a multi-bar layer with 3 data sets and 9 pixels 3D depth
Set layer = c.addBarLayer2(cd.Side, 9)
Call layer.addDataSet(data0, -1, "Product A")
Call layer.addDataSet(data1, -1, "Product B")
Call layer.addDataSet(data2, -1, "Product C")

' Set data set 1 to use a bar shape of a 6-pointed star
Call layer.setBarShape(cd.StarShape(6), 0)

' Set data set 2 to use a bar shapre of a 6-sided polygon
Call layer.setBarShape(cd.PolygonShape(6), 1)

' Set data set 3 to use an X bar shape
Call layer.setBarShape(cd.Cross2Shape(), 2)

' Add a title to the y-axis
Call c.yAxis().setTitle("Revenue (USD in millions)")

' Add a title to the x axis
Call c.xAxis().setTitle("Year 2005")

' 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='{dataSetName}: {xLabel} Revenue = {value} millions'")
%>

<!DOCTYPE html>
<html>
<head>
    <title>Multi-Shape Bar 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;">
        Multi-Shape Bar 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\multishapebar.cls

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

    Dim cd As New ChartDirector.API

    ' The data for the bar chart
    Dim data0()
    data0 = Array(100, 125, 245, 147)
    Dim data1()
    data1 = Array(85, 156, 179, 211)
    Dim data2()
    data2 = Array(97, 87, 56, 267)
    Dim labels()
    labels = Array("1st Quarter", "2nd Quarter", "3rd Quarter", "4th Quarter")

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

    ' Add a title to the chart using 14pt Arial Bold Italic font
    Call c.addTitle("Annual Product Revenue", "arialbi.ttf", 14)

    ' Set the plot area at (50, 60) and of size 500 x 240. Use two alternative background colors
    ' (f8f8f8 and ffffff)
    Call c.setPlotArea(50, 60, 500, 240, &Hf8f8f8, &Hffffff)

    ' Add a legend box at (55, 22) using horizontal layout, with transparent background
    Call c.addLegend(55, 22, False).setBackground(cd.Transparent)

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

    ' Draw the ticks between label positions (instead of at label positions)
    Call c.xAxis().setTickOffset(0.5)

    ' Add a multi-bar layer with 3 data sets and 9 pixels 3D depth
    Dim layer As BarLayer
    Set layer = c.addBarLayer2(cd.Side, 9)
    Call layer.addDataSet(data0, -1, "Product A")
    Call layer.addDataSet(data1, -1, "Product B")
    Call layer.addDataSet(data2, -1, "Product C")

    ' Set data set 1 to use a bar shape of a 6-pointed star
    Call layer.setBarShape(cd.StarShape(6), 0)

    ' Set data set 2 to use a bar shapre of a 6-sided polygon
    Call layer.setBarShape(cd.PolygonShape(6), 1)

    ' Set data set 3 to use an X bar shape
    Call layer.setBarShape(cd.Cross2Shape(), 2)

    ' Add a title to the y-axis
    Call c.yAxis().setTitle("Revenue (USD in millions)")

    ' Add a title to the x axis
    Call c.xAxis().setTitle("Year 2005")

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

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

End Sub