ChartDirector 6.0 (ASP/COM/VB Edition)

Multiple Axes




This example demonstrates using 4 y-axes in a chart.

The 4 axes are the default primary and secondary y-axes at the left and right edges of the plot area, and two other y-axes added using XYChart.addAxis.

Layer.setUseYAxis and Layer.setUseYAxis2 are used to bind the line layers to the axes. Axis.setTitle and TextBox.setAlignment are used to set the axis titles and put them on the top of the axes. Axis.setColors is used to set the axis colors to be the same as the corresponding line layers for easy matching.

Source Code Listing

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

' Data for the chart
data0 = Array(1700, 3900, 2900, 3800, 4100, 4600, 2900, 4100, 4400, 5700, 5900, 5200, 3700, 3400, _
    5100, 5600, 5600, 6000, 7000, 7600, 6300, 6700, 7500, 6400, 8800)
data1 = Array(500, 550, 670, 990, 820, 730, 800, 720, 730, 790, 860, 800, 840, 680, 740, 890, 680, _
    790, 730, 770, 840, 820, 800, 840, 670)
data2 = Array(46, 68, 35, 33, 38, 20, 12, 18, 15, 23, 30, 24, 28, 15, 21, 26, 46, 42, 38, 25, 23, _
    32, 24, 20, 25)
data3 = Array(0.84, 0.82, 0.82, 0.38, 0.25, 0.52, 0.54, 0.52, 0.38, 0.51, 0.46, 0.29, 0.5, 0.55, _
    0.47, 0.34, 0.52, 0.33, 0.21, 0.3, 0.25, 0.15, 0.18, 0.22, 0.14)

' Labels for the 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 600 x 360 pixels. Use a vertical gradient color from sky blue
' (aaccff) to white (ffffff) as background. Set border to grey (888888). Use rounded corners. Enable
' soft drop shadow.
Set c = cd.XYChart(600, 360)
Call c.setBackground(c.linearGradientColor(0, 0, 0, c.getHeight(), &Haaccff, &Hffffff), &H888888)
Call c.setRoundedFrame()
Call c.setDropShadow()

' Add a title box to the chart using 15pt Arial Bold Italic font. Set top margin to 16 pixels.
Set title = c.addTitle("Multiple Axes Demonstration", "arialbi.ttf", 15)
Call title.setMargin2(0, 0, 16, 0)

' Set the plotarea at (100, 80) and of size 400 x 230 pixels, with white (ffffff) background. Use
' grey #(aaaaa) dotted lines for both horizontal and vertical grid lines.
Call c.setPlotArea(100, 80, 400, 230, &Hffffff, -1, -1, c.dashLineColor(&Haaaaaa, cd.DotLine), -1)

' Add a legend box with the bottom center anchored at (300, 80) (top center of the plot area). Use
' horizontal layout, and 8 points Arial Bold font. Set background and border to transparent.
Set legendBox = c.addLegend(300, 80, False, "arialbd.ttf", 8)
Call legendBox.setAlignment(cd.BottomCenter)
Call legendBox.setBackground(cd.Transparent, cd.Transparent)

' 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)

' Add a title to the x-axis
Call c.xAxis().setTitle("Hour of Day")

' Add a title on top of the primary (left) y axis.
Call c.yAxis().setTitle("Power<*br*>(Watt)").setAlignment(cd.TopLeft2)
' Set the axis, label and title colors for the primary y axis to red (c00000) to match the first
' data set
Call c.yAxis().setColors(&Hcc0000, &Hcc0000, &Hcc0000)

' Add a title on top of the secondary (right) y axis.
Call c.yAxis2().setTitle("Load<*br*>(Mbps)").setAlignment(cd.TopRight2)
' Set the axis, label and title colors for the secondary y axis to green (00800000) to match the
' second data set
Call c.yAxis2().setColors(&H008000, &H008000, &H008000)

' Add the third y-axis at 50 pixels to the left of the plot area
Set leftAxis = c.addAxis(cd.Left, 50)
' Add a title on top of the third y axis.
Call leftAxis.setTitle("Temp<*br*>(C)").setAlignment(cd.TopLeft2)
' Set the axis, label and title colors for the third y axis to blue (0000cc) to match the third data
' set
Call leftAxis.setColors(&H0000cc, &H0000cc, &H0000cc)

' Add the fouth y-axis at 50 pixels to the right of the plot area
Set rightAxis = c.addAxis(cd.Right, 50)
' Add a title on top of the fourth y axis.
Call rightAxis.setTitle("Error<*br*>(%)").setAlignment(cd.TopRight2)
' Set the axis, label and title colors for the fourth y axis to purple (880088) to match the fourth
' data set
Call rightAxis.setColors(&H880088, &H880088, &H880088)

' Add a line layer to for the first data set using red (c00000) color, with a line width of 2 pixels
Set layer0 = c.addLineLayer(data0, &Hcc0000, "Power")
Call layer0.setLineWidth(2)

' Add a line layer to for the second data set using green (00c0000) color, with a line width of 2
' pixels. Bind the layer to the secondary y-axis.
Set layer1 = c.addLineLayer(data1, &H008000, "Load")
Call layer1.setLineWidth(2)
Call layer1.setUseYAxis2()

' Add a line layer to for the third data set using blue (0000cc) color, with a line width of 2
' pixels. Bind the layer to the third y-axis.
Set layer2 = c.addLineLayer(data2, &H0000cc, "Temperature")
Call layer2.setLineWidth(2)
Call layer2.setUseYAxis(leftAxis)

' Add a line layer to for the fourth data set using purple (880088) color, with a line width of 2
' pixels. Bind the layer to the fourth y-axis.
Set layer3 = c.addLineLayer(data3, &H880088, "Error Rate")
Call layer3.setLineWidth(2)
Call layer3.setUseYAxis(rightAxis)

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

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

    Dim cd As New ChartDirector.API

    ' Data for the chart
    Dim data0()
    data0 = Array(1700, 3900, 2900, 3800, 4100, 4600, 2900, 4100, 4400, 5700, 5900, 5200, 3700, _
        3400, 5100, 5600, 5600, 6000, 7000, 7600, 6300, 6700, 7500, 6400, 8800)
    Dim data1()
    data1 = Array(500, 550, 670, 990, 820, 730, 800, 720, 730, 790, 860, 800, 840, 680, 740, 890, _
        680, 790, 730, 770, 840, 820, 800, 840, 670)
    Dim data2()
    data2 = Array(46, 68, 35, 33, 38, 20, 12, 18, 15, 23, 30, 24, 28, 15, 21, 26, 46, 42, 38, 25, _
        23, 32, 24, 20, 25)
    Dim data3()
    data3 = Array(0.84, 0.82, 0.82, 0.38, 0.25, 0.52, 0.54, 0.52, 0.38, 0.51, 0.46, 0.29, 0.5, _
        0.55, 0.47, 0.34, 0.52, 0.33, 0.21, 0.3, 0.25, 0.15, 0.18, 0.22, 0.14)

    ' Labels for the 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 600 x 360 pixels. Use a vertical gradient color from sky blue
    ' (aaccff) to white (ffffff) as background. Set border to grey (888888). Use rounded corners.
    ' Enable soft drop shadow.
    Dim c As XYChart
    Set c = cd.XYChart(600, 360)
    Call c.setBackground(c.linearGradientColor(0, 0, 0, c.getHeight(), &Haaccff, &Hffffff), _
        &H888888)
    Call c.setRoundedFrame()
    Call c.setDropShadow()

    ' Add a title box to the chart using 15pt Arial Bold Italic font. Set top margin to 16 pixels.
    Dim title As ChartDirector.TextBox
    Set title = c.addTitle("Multiple Axes Demonstration", "arialbi.ttf", 15)
    Call title.setMargin2(0, 0, 16, 0)

    ' Set the plotarea at (100, 80) and of size 400 x 230 pixels, with white (ffffff) background.
    ' Use grey #(aaaaa) dotted lines for both horizontal and vertical grid lines.
    Call c.setPlotArea(100, 80, 400, 230, &Hffffff, -1, -1, c.dashLineColor(&Haaaaaa, cd.DotLine), _
        -1)

    ' Add a legend box with the bottom center anchored at (300, 80) (top center of the plot area).
    ' Use horizontal layout, and 8 points Arial Bold font. Set background and border to transparent.
    Dim legendBox As LegendBox
    Set legendBox = c.addLegend(300, 80, False, "arialbd.ttf", 8)
    Call legendBox.setAlignment(cd.BottomCenter)
    Call legendBox.setBackground(cd.Transparent, cd.Transparent)

    ' 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)

    ' Add a title to the x-axis
    Call c.xAxis().setTitle("Hour of Day")

    ' Add a title on top of the primary (left) y axis.
    Call c.yAxis().setTitle("Power<*br*>(Watt)").setAlignment(cd.TopLeft2)
    ' Set the axis, label and title colors for the primary y axis to red (c00000) to match the first
    ' data set
    Call c.yAxis().setColors(&Hcc0000, &Hcc0000, &Hcc0000)

    ' Add a title on top of the secondary (right) y axis.
    Call c.yAxis2().setTitle("Load<*br*>(Mbps)").setAlignment(cd.TopRight2)
    ' Set the axis, label and title colors for the secondary y axis to green (00800000) to match the
    ' second data set
    Call c.yAxis2().setColors(&H008000, &H008000, &H008000)

    ' Add the third y-axis at 50 pixels to the left of the plot area
    Dim leftAxis As Axis
    Set leftAxis = c.addAxis(cd.Left, 50)
    ' Add a title on top of the third y axis.
    Call leftAxis.setTitle("Temp<*br*>(C)").setAlignment(cd.TopLeft2)
    ' Set the axis, label and title colors for the third y axis to blue (0000cc) to match the third
    ' data set
    Call leftAxis.setColors(&H0000cc, &H0000cc, &H0000cc)

    ' Add the fouth y-axis at 50 pixels to the right of the plot area
    Dim rightAxis As Axis
    Set rightAxis = c.addAxis(cd.Right, 50)
    ' Add a title on top of the fourth y axis.
    Call rightAxis.setTitle("Error<*br*>(%)").setAlignment(cd.TopRight2)
    ' Set the axis, label and title colors for the fourth y axis to purple (880088) to match the
    ' fourth data set
    Call rightAxis.setColors(&H880088, &H880088, &H880088)

    ' Add a line layer to for the first data set using red (c00000) color, with a line width of 2
    ' pixels
    Dim layer0 As LineLayer
    Set layer0 = c.addLineLayer(data0, &Hcc0000, "Power")
    Call layer0.setLineWidth(2)

    ' Add a line layer to for the second data set using green (00c0000) color, with a line width of
    ' 2 pixels. Bind the layer to the secondary y-axis.
    Dim layer1 As LineLayer
    Set layer1 = c.addLineLayer(data1, &H008000, "Load")
    Call layer1.setLineWidth(2)
    Call layer1.setUseYAxis2()

    ' Add a line layer to for the third data set using blue (0000cc) color, with a line width of 2
    ' pixels. Bind the layer to the third y-axis.
    Dim layer2 As LineLayer
    Set layer2 = c.addLineLayer(data2, &H0000cc, "Temperature")
    Call layer2.setLineWidth(2)
    Call layer2.setUseYAxis(leftAxis)

    ' Add a line layer to for the fourth data set using purple (880088) color, with a line width of
    ' 2 pixels. Bind the layer to the fourth y-axis.
    Dim layer3 As LineLayer
    Set layer3 = c.addLineLayer(data3, &H880088, "Error Rate")
    Call layer3.setLineWidth(2)
    Call layer3.setUseYAxis(rightAxis)

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

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

End Sub