ChartDirector 6.0 (ASP/COM/VB Edition)

Dual X-Axis




This example demonstrates a chart with two x-axes and two y-axes.

ChartDirector supports arbitrary number of axes. The first two x and y axes are most commonly used and can be retrieved using XYChart.xAxis, XYChart.xAxis2, XYChart.yAxis and XYChart.yAxis2. These axes are by default positioned at the edges of the plot area.

The key features demonstrated in this example are:

Source Code Listing

[Web Version (in ASP)] aspdemo\dualxaxis.asp
<%@ language="vbscript" %>
<%
Set cd = CreateObject("ChartDirector.API")

' The data for the chart
data0 = Array(42, 49, 33, 38, 51, 46, 29, 41, 44, 57, 59, 52, 37, 34, 51, 56, 56, 60, 70, 76, 63, _
    67, 75, 64, 51)
data1 = Array(50, 55, 47, 34, 42, 49, 63, 62, 73, 59, 56, 50, 64, 60, 67, 67, 58, 59, 73, 77, 84, _
    82, 80, 84, 98)

' The labels for the bottom x axis. Note the "-" means a minor tick.
labels0 = Array("0<*br*>Jun 4", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", _
    "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "0<*br*>Jun 5")

' The labels for the top x axis. Note that "-" means a minor tick.
labels1 = Array("Jun 3<*br*>12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", _
    "Jun 4<*br*>0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12")

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

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

' Add a title to the primary (left) y axis
Call c.yAxis().setTitle("US Dollars")

' Set the tick length to -4 pixels (-ve means ticks inside the plot area)
Call c.yAxis().setTickLength(-4)

' Add a title to the secondary (right) y axis
Call c.yAxis2().setTitle("HK Dollars (1 USD = 7.8 HKD)")

' Set the tick length to -4 pixels (-ve means ticks inside the plot area)
Call c.yAxis2().setTickLength(-4)

' Synchronize the y-axis such that y2 = 7.8 x y1
Call c.syncYAxis(7.8)

' Add a title to the bottom x axis
Call c.xAxis().setTitle("Hong Kong Time")

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

' Display 1 out of 3 labels on the x-axis. Show minor ticks for remaining labels.
Call c.xAxis().setLabelStep(3, 1)

' Set the major tick length to -4 pixels and minor tick length to -2 pixels (-ve means ticks inside
' the plot area)
Call c.xAxis().setTickLength2(-4, -2)

' Set the distance between the axis labels and the axis to 6 pixels
Call c.xAxis().setLabelGap(6)

' Add a title to the top x-axis
Call c.xAxis2().setTitle("New York Time")

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

' Display 1 out of 3 labels on the x-axis. Show minor ticks for remaining labels.
Call c.xAxis2().setLabelStep(3, 1)

' Set the major tick length to -4 pixels and minor tick length to -2 pixels (-ve means ticks inside
' the plot area)
Call c.xAxis2().setTickLength2(-4, -2)

' Set the distance between the axis labels and the axis to 6 pixels
Call c.xAxis2().setLabelGap(6)

' Add a line layer to the chart with a line width of 2 pixels
Call c.addLineLayer(data0, -1, "Red Transactions").setLineWidth(2)

' Add an area layer to the chart with no area boundary line
Call c.addAreaLayer(data1, -1, "Green Transactions").setLineWidth(0)

' Output the chart
Response.ContentType = "image/png"
Response.BinaryWrite c.makeChart2(cd.PNG)
Response.End
%>

[Windows Version (in Visual Basic)] vbdemo\dualxaxis.cls
Public Sub createChart(viewer As Object, chartIndex As Integer)

    Dim cd As New ChartDirector.API

    ' The data for the chart
    Dim data0()
    data0 = Array(42, 49, 33, 38, 51, 46, 29, 41, 44, 57, 59, 52, 37, 34, 51, 56, 56, 60, 70, 76, _
        63, 67, 75, 64, 51)
    Dim data1()
    data1 = Array(50, 55, 47, 34, 42, 49, 63, 62, 73, 59, 56, 50, 64, 60, 67, 67, 58, 59, 73, 77, _
        84, 82, 80, 84, 98)

    ' The labels for the bottom x axis. Note the "-" means a minor tick.
    Dim labels0()
    labels0 = Array("0<*br*>Jun 4", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", _
        "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "0<*br*>Jun 5")

    ' The labels for the top x axis. Note that "-" means a minor tick.
    Dim labels1()
    labels1 = Array("Jun 3<*br*>12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", _
        "23", "Jun 4<*br*>0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12")

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

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

    ' Add a title to the primary (left) y axis
    Call c.yAxis().setTitle("US Dollars")

    ' Set the tick length to -4 pixels (-ve means ticks inside the plot area)
    Call c.yAxis().setTickLength(-4)

    ' Add a title to the secondary (right) y axis
    Call c.yAxis2().setTitle("HK Dollars (1 USD = 7.8 HKD)")

    ' Set the tick length to -4 pixels (-ve means ticks inside the plot area)
    Call c.yAxis2().setTickLength(-4)

    ' Synchronize the y-axis such that y2 = 7.8 x y1
    Call c.syncYAxis(7.8)

    ' Add a title to the bottom x axis
    Call c.xAxis().setTitle("Hong Kong Time")

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

    ' Display 1 out of 3 labels on the x-axis. Show minor ticks for remaining labels.
    Call c.xAxis().setLabelStep(3, 1)

    ' Set the major tick length to -4 pixels and minor tick length to -2 pixels (-ve means ticks
    ' inside the plot area)
    Call c.xAxis().setTickLength2(-4, -2)

    ' Set the distance between the axis labels and the axis to 6 pixels
    Call c.xAxis().setLabelGap(6)

    ' Add a title to the top x-axis
    Call c.xAxis2().setTitle("New York Time")

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

    ' Display 1 out of 3 labels on the x-axis. Show minor ticks for remaining labels.
    Call c.xAxis2().setLabelStep(3, 1)

    ' Set the major tick length to -4 pixels and minor tick length to -2 pixels (-ve means ticks
    ' inside the plot area)
    Call c.xAxis2().setTickLength2(-4, -2)

    ' Set the distance between the axis labels and the axis to 6 pixels
    Call c.xAxis2().setLabelGap(6)

    ' Add a line layer to the chart with a line width of 2 pixels
    Call c.addLineLayer(data0, -1, "Red Transactions").setLineWidth(2)

    ' Add an area layer to the chart with no area boundary line
    Call c.addAreaLayer(data1, -1, "Green Transactions").setLineWidth(0)

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

    'include tool tip for the chart
    viewer.ImageMap = c.getHTMLImageMap("clickable", "", _
        "title='{dataSetName} HKT Jun {=3.5+{x}/24|0} {={x}%24}:00 (NYT Jun {=3+{x}/24|0} " & _
        "{=({x}+12)%24}:00) HKD {={value}*7.8} (USD {value})'")

End Sub