3D Scatter Axis Types

[File: cfdemo/threedscatteraxis.cfm]
<cfscript>

// ChartDirector for ColdFusion API Access Point
cd = CreateObject("java", "ChartDirector.CFChart");

// A utility to allow us to create arrays with data in one line of code
function Array() {
    var result = ArrayNew(1);
    var i = 0;
    for (i = 1; i LTE ArrayLen(arguments); i = i + 1)
        result[i] = arguments[i];
    return result;
}


// The x coordinates for the 2 scatter groups
dataX = Array(CreateDate(2011, 9, 1), CreateDate(2011, 9, 2), CreateDate(2011, 9, 3), CreateDate(
    2011, 9, 4), CreateDate(2011, 9, 5), CreateDate(2011, 9, 6), CreateDate(2011, 9, 7), CreateDate(
    2011, 9, 8), CreateDate(2011, 9, 9), CreateDate(2011, 9, 10), CreateDate(2011, 9, 11));

// The y and z coordinates for the first scatter group
dataY0 = Array(0.4, 0.2, 0.5, 0.4, 0.7, 1.3, 1.1, 1.0, 0.6, 0.4, 0.5);
dataZ0 = Array(43, 38, 33, 23.4, 28, 36, 34, 47, 53, 45, 40);

// The y and z coordinates for the second scatter group
dataY1 = Array(1.4, 1.0, 1.8, 1.9, 1.5, 1.0, 0.6, 0.7, 1.2, 1.7, 1.5);
dataZ1 = Array(46, 41, 33, 37, 28, 29, 34, 37, 41, 52, 50);

// Instead of displaying numeric values, labels are used for the y-axis
labelsY = Array("Low", "Medium", "High");

// Create a ThreeDScatterChart object of size 760 x 520 pixels
c = cd.ThreeDScatterChart(760, 520);

// Add a title to the chart using 18 points Arial font
c.addTitle("3D Scatter Chart Axis Types", "Arial", 18);

// Set the center of the plot region at (385, 270), and set width x depth x height to 480 x 240 x
// 240 pixels
c.setPlotRegion(385, 270, 480, 240, 240);

// Set the elevation and rotation angles to 30 and -10 degrees
c.setViewAngle(30, -10);

// Add a legend box at (380, 40) with horizontal layout. Use 9pt Arial Bold font.
b = c.addLegend(380, 40, False, "Arial Bold", 9);
b.setAlignment(cd.TopCenter);
b.setRoundedCorners();

// Add a scatter group to the chart using 13 pixels red (ff0000) glass sphere symbols, with dotted
// drop lines
g0 = c.addScatterGroup(dataX, dataY0, dataZ0, "Alpha Series", cd.GlassSphere2Shape, 13, "0xff0000");
g0.setDropLine(c.dashLineColor(cd.SameAsMainColor, cd.DotLine));

// Add a scatter group to the chart using 13 pixels blue (00cc00) cross symbols, with dotted drop
// lines
g1 = c.addScatterGroup(dataX, dataY1, dataZ1, "Beta Series", cd.Cross2Shape(), 13, "0x00cc00");
g1.setDropLine(c.dashLineColor(cd.SameAsMainColor, cd.DotLine));

// Set x-axis tick density to 50 pixels. ChartDirector auto-scaling will use this as the guideline
// when putting ticks on the x-axis.
c.xAxis().setTickDensity(50);

// Set the y-axis labels
c.yAxis().setLabels(labelsY);

// Set label style to Arial bold for all axes
c.xAxis().setLabelStyle("Arial Bold");
c.yAxis().setLabelStyle("Arial Bold");
c.zAxis().setLabelStyle("Arial Bold");

// Set the x, y and z axis titles using deep blue (000088) 15 points Arial font
c.xAxis().setTitle("Date/Time Axis", "Arial Italic", 15, "0x000088");
c.yAxis().setTitle("Label<*br*>Based<*br*>Axis", "Arial Italic", 15, "0x000088");
c.zAxis().setTitle("Numeric Axis", "Arial Italic", 15, "0x000088");

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

</cfscript>
<html>
<body style="margin:5px 0px 0px 5px">
<div style="font-size:18pt; font-family:verdana; font-weight:bold">
    3D Scatter Axis Types
</div>
<hr style="border:solid 1px #000080" />
<cfoutput>
<div style="font-size:9pt; font-family:verdana; margin-bottom:1.5em">
    <a href='viewsource.cfm?file=#CGI.SCRIPT_NAME#'>View Source Code</a>
</div>
<img src="getchart.cfm?#chart1URL#" />
</cfoutput>
</body>
</html>