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.
[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", "Arial Bold", 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
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
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 = cd.WebChartViewer(Request, "chart1")
Call viewer.setChart(c, cd.SVG)
' include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("")
%>
<!DOCTYPE html>
<html>
<head>
<title>Dual Y-Axis</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;">
Dual Y-Axis
</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\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
© 2021 Advanced Software Engineering Limited. All rights reserved.