ChartDirector 6.1 (Java 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

[JSP Version] jspdemo/multiaxes.jsp
<%@page import="ChartDirector.*" %>
<%
// Data for the chart
double[] data0 = {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};
double[] data1 = {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};
double[] data2 = {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};
double[] data3 = {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
String[] labels = {"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.
XYChart c = new XYChart(600, 360);
c.setBackground(c.linearGradientColor(0, 0, 0, c.getHeight(), 0xaaccff, 0xffffff), 0x888888);
c.setRoundedFrame();
c.setDropShadow();

// Add a title box to the chart using 15pt Arial Bold Italic font. Set top margin to 16 pixels.
TextBox title = c.addTitle("Multiple Axes Demonstration", "Arial Bold Italic", 15);
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.
c.setPlotArea(100, 80, 400, 230, 0xffffff, -1, -1, c.dashLineColor(0xaaaaaa, Chart.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.
LegendBox legendBox = c.addLegend(300, 80, false, "Arial Bold", 8);
legendBox.setAlignment(Chart.BottomCenter);
legendBox.setBackground(Chart.Transparent, Chart.Transparent);

// Set the labels on the x axis.
c.xAxis().setLabels(labels);

// Display 1 out of 3 labels on the x-axis.
c.xAxis().setLabelStep(3);

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

// Add a title on top of the primary (left) y axis.
c.yAxis().setTitle("Power\n(Watt)").setAlignment(Chart.TopLeft2);
// Set the axis, label and title colors for the primary y axis to red (c00000) to match the first
// data set
c.yAxis().setColors(0xcc0000, 0xcc0000, 0xcc0000);

// Add a title on top of the secondary (right) y axis.
c.yAxis2().setTitle("Load\n(Mbps)").setAlignment(Chart.TopRight2);
// Set the axis, label and title colors for the secondary y axis to green (00800000) to match the
// second data set
c.yAxis2().setColors(0x008000, 0x008000, 0x008000);

// Add the third y-axis at 50 pixels to the left of the plot area
Axis leftAxis = c.addAxis(Chart.Left, 50);
// Add a title on top of the third y axis.
leftAxis.setTitle("Temp\n(C)").setAlignment(Chart.TopLeft2);
// Set the axis, label and title colors for the third y axis to blue (0000cc) to match the third
// data set
leftAxis.setColors(0x0000cc, 0x0000cc, 0x0000cc);

// Add the fouth y-axis at 50 pixels to the right of the plot area
Axis rightAxis = c.addAxis(Chart.Right, 50);
// Add a title on top of the fourth y axis.
rightAxis.setTitle("Error\n(%)").setAlignment(Chart.TopRight2);
// Set the axis, label and title colors for the fourth y axis to purple (880088) to match the fourth
// data set
rightAxis.setColors(0x880088, 0x880088, 0x880088);

// Add a line layer to for the first data set using red (c00000) color, with a line width of 2
// pixels
LineLayer layer0 = c.addLineLayer(data0, 0xcc0000, "Power");
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.
LineLayer layer1 = c.addLineLayer(data1, 0x008000, "Load");
layer1.setLineWidth(2);
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.
LineLayer layer2 = c.addLineLayer(data2, 0x0000cc, "Temperature");
layer2.setLineWidth(2);
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.
LineLayer layer3 = c.addLineLayer(data3, 0x880088, "Error Rate");
layer3.setLineWidth(2);
layer3.setUseYAxis(rightAxis);

// Output the chart
String chart1URL = c.makeSession(request, "chart1");

// Include tool tip for the chart
String imageMap1 = c.getHTMLImageMap("", "", "title='{dataSetName} at hour {xLabel} = {value}'");
%>
<html>
<body style="margin:5px 0px 0px 5px">
<div style="font-size:18pt; font-family:verdana; font-weight:bold">
    Multiple Axes
</div>
<hr color="#000080">
<div style="font-size:10pt; font-family:verdana; margin-bottom:1.5em">
    <a href="viewsource.jsp?file=<%=request.getServletPath()%>">View Source Code</a>
</div>
<img src='<%=response.encodeURL("getchart.jsp?"+chart1URL)%>'
    usemap="#map1" border="0">
<map name="map1"><%=imageMap1%></map>
</body>
</html>

[Java Version] javademo/multiaxes.java
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import ChartDirector.*;

public class multiaxes implements DemoModule
{
    //Name of demo program
    public String toString() { return "Multiple Axes"; }

    //Number of charts produced in this demo
    public int getNoOfCharts() { return 1; }

    //Main code for creating charts
    public void createChart(ChartViewer viewer, int chartIndex)
    {
        // Data for the chart
        double[] data0 = {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};
        double[] data1 = {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};
        double[] data2 = {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};
        double[] data3 = {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
        String[] labels = {"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.
        XYChart c = new XYChart(600, 360);
        c.setBackground(c.linearGradientColor(0, 0, 0, c.getHeight(), 0xaaccff, 0xffffff), 0x888888)
            ;
        c.setRoundedFrame();
        c.setDropShadow();

        // Add a title box to the chart using 15pt Arial Bold Italic font. Set top margin to 16
        // pixels.
        TextBox title = c.addTitle("Multiple Axes Demonstration", "Arial Bold Italic", 15);
        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.
        c.setPlotArea(100, 80, 400, 230, 0xffffff, -1, -1, c.dashLineColor(0xaaaaaa, Chart.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.
        LegendBox legendBox = c.addLegend(300, 80, false, "Arial Bold", 8);
        legendBox.setAlignment(Chart.BottomCenter);
        legendBox.setBackground(Chart.Transparent, Chart.Transparent);

        // Set the labels on the x axis.
        c.xAxis().setLabels(labels);

        // Display 1 out of 3 labels on the x-axis.
        c.xAxis().setLabelStep(3);

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

        // Add a title on top of the primary (left) y axis.
        c.yAxis().setTitle("Power\n(Watt)").setAlignment(Chart.TopLeft2);
        // Set the axis, label and title colors for the primary y axis to red (c00000) to match the
        // first data set
        c.yAxis().setColors(0xcc0000, 0xcc0000, 0xcc0000);

        // Add a title on top of the secondary (right) y axis.
        c.yAxis2().setTitle("Load\n(Mbps)").setAlignment(Chart.TopRight2);
        // Set the axis, label and title colors for the secondary y axis to green (00800000) to
        // match the second data set
        c.yAxis2().setColors(0x008000, 0x008000, 0x008000);

        // Add the third y-axis at 50 pixels to the left of the plot area
        Axis leftAxis = c.addAxis(Chart.Left, 50);
        // Add a title on top of the third y axis.
        leftAxis.setTitle("Temp\n(C)").setAlignment(Chart.TopLeft2);
        // Set the axis, label and title colors for the third y axis to blue (0000cc) to match the
        // third data set
        leftAxis.setColors(0x0000cc, 0x0000cc, 0x0000cc);

        // Add the fouth y-axis at 50 pixels to the right of the plot area
        Axis rightAxis = c.addAxis(Chart.Right, 50);
        // Add a title on top of the fourth y axis.
        rightAxis.setTitle("Error\n(%)").setAlignment(Chart.TopRight2);
        // Set the axis, label and title colors for the fourth y axis to purple (880088) to match
        // the fourth data set
        rightAxis.setColors(0x880088, 0x880088, 0x880088);

        // Add a line layer to for the first data set using red (c00000) color, with a line width of
        // 2 pixels
        LineLayer layer0 = c.addLineLayer(data0, 0xcc0000, "Power");
        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.
        LineLayer layer1 = c.addLineLayer(data1, 0x008000, "Load");
        layer1.setLineWidth(2);
        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.
        LineLayer layer2 = c.addLineLayer(data2, 0x0000cc, "Temperature");
        layer2.setLineWidth(2);
        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.
        LineLayer layer3 = c.addLineLayer(data3, 0x880088, "Error Rate");
        layer3.setLineWidth(2);
        layer3.setUseYAxis(rightAxis);

        // Output the chart
        viewer.setChart(c);

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

    //Allow this module to run as standalone program for easy testing
    public static void main(String[] args)
    {
        //Instantiate an instance of this demo module
        DemoModule demo = new multiaxes();

        //Create and set up the main window
        JFrame frame = new JFrame(demo.toString());
        frame.addWindowListener(new WindowAdapter() {
            public void windowClosing(WindowEvent e) {System.exit(0);} });
        frame.getContentPane().setBackground(Color.white);

        // Create the chart and put them in the content pane
        ChartViewer viewer = new ChartViewer();
        demo.createChart(viewer, 0);
        frame.getContentPane().add(viewer);

        // Display the window
        frame.pack();
        frame.setVisible(true);
    }
}