ChartDirector 6.0 (ASP/COM/VB Edition)

Dual Y-Axis




This example demonstrates a chart with two independent y-axis.

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 put at the edges of the plot area.

By default, a data set will bind to the primary y-axis. This can be modified by using DataSet.setUseYAxis or DataSet.setUseYAxis2.

The y-axes in this example are of different colors. This is achieved by using Axis.setColors.

Source Code Listing

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

' The data for the chart
data0 = Array(0.05, 0.06, 0.48, 0.1, 0.01, 0.05)
data1 = Array(100, 125, 265, 147, 67, 105)
labels = Array("Jan", "Feb", "Mar", "Apr", "May", "Jun")

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

' Set the plot area at (50, 20) and of size 200 x 130 pixels
Call c.setPlotArea(50, 20, 200, 130)

' Add a title to the chart using 8pt Arial Bold font
Call c.addTitle("Independent Y-Axis Demo", "arialbd.ttf", 8)

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

' Add a title to the primary (left) y axis
Call c.yAxis().setTitle("Packet Drop Rate (pps)")

' Set the axis, label and title colors for the primary y axis to red (0xc00000) to match the first
' data set
Call c.yAxis().setColors(&Hc00000, &Hc00000, &Hc00000)

' Add a title to the secondary (right) y axis
Call c.yAxis2().setTitle("Throughtput (MBytes)")

' set the axis, label and title colors for the primary y axis to green (0x008000) to match the
' second data set
Call c.yAxis2().setColors(&H008000, &H008000, &H008000)

' Add a line layer to for the first data set using red (0xc00000) color with a line width to 3
' pixels
Call c.addLineLayer(data0, &Hc00000).setLineWidth(3)

' Add a bar layer to for the second data set using green (0x00C000) color. Bind the second data set
' to the secondary (right) y axis
Call c.addBarLayer(data1, &H00c000).setUseYAxis2()

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

[Windows Version (in Visual Basic)] vbdemo\dualyaxis.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(0.05, 0.06, 0.48, 0.1, 0.01, 0.05)
    Dim data1()
    data1 = Array(100, 125, 265, 147, 67, 105)
    Dim labels()
    labels = Array("Jan", "Feb", "Mar", "Apr", "May", "Jun")

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

    ' Set the plot area at (50, 20) and of size 200 x 130 pixels
    Call c.setPlotArea(50, 20, 200, 130)

    ' Add a title to the chart using 8pt Arial Bold font
    Call c.addTitle("Independent Y-Axis Demo", "arialbd.ttf", 8)

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

    ' Add a title to the primary (left) y axis
    Call c.yAxis().setTitle("Packet Drop Rate (pps)")

    ' Set the axis, label and title colors for the primary y axis to red (0xc00000) to match the
    ' first data set
    Call c.yAxis().setColors(&Hc00000, &Hc00000, &Hc00000)

    ' Add a title to the secondary (right) y axis
    Call c.yAxis2().setTitle("Throughtput (MBytes)")

    ' set the axis, label and title colors for the primary y axis to green (0x008000) to match the
    ' second data set
    Call c.yAxis2().setColors(&H008000, &H008000, &H008000)

    ' Add a line layer to for the first data set using red (0xc00000) color with a line width to 3
    ' pixels
    Dim lineLayer As LineLayer
    Set lineLayer = c.addLineLayer(data0, &Hc00000)
    Call lineLayer.setLineWidth(3)

    ' tool tip for the line layer
    Call lineLayer.setHTMLImageMap("", "", "title='Packet Drop Rate on {xLabel}: {value} pps'")

    ' Add a bar layer to for the second data set using green (0x00C000) color. Bind the second data
    ' set to the secondary (right) y axis
    Dim barLayer As BarLayer
    Set barLayer = c.addBarLayer(data1, &H00c000)
    Call barLayer.setUseYAxis2()

    ' tool tip for the bar layer
    Call barLayer.setHTMLImageMap("", "", "title='Throughput on {xLabel}: {value} MBytes'")

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

    ' include tool tip for the chart
    viewer.ImageMap = c.getHTMLImageMap("clickable")

End Sub