multisymbolline.cfm
Back to Chart Graphics
<![CDATA[
<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;
}
// In this example, the data points are unevenly spaced on the x-axis
dataY = Array(4.7, 4.7, 6.6, 2.2, 4.7, 4.0, 4.0, 5.1, 4.5, 4.5, 6.8, 4.5, 4, 2.1, 3,
2.5, 2.5, 3.1);
dataX = Array(CreateDate(1999, 7, 1), CreateDate(2000, 1, 1), CreateDate(2000, 2, 1),
CreateDate(2000, 4, 1), CreateDate(2000, 5, 8), CreateDate(2000, 7, 5),
CreateDate(2001, 3, 5), CreateDate(2001, 4, 7), CreateDate(2001, 5, 9),
CreateDate(2002, 2, 4), CreateDate(2002, 4, 4), CreateDate(2002, 5, 8),
CreateDate(2002, 7, 7), CreateDate(2002, 8, 30), CreateDate(2003, 1, 2),
CreateDate(2003, 2, 16), CreateDate(2003, 11, 6), CreateDate(2004, 1, 4));
// Data points are assigned different symbols based on point type
pointType = Array(0, 1, 0, 1, 2, 1, 0, 0, 1, 1, 2, 2, 1, 0, 2, 1, 2, 0);
// Create a XYChart object of size 600 x 300 pixels, with a light purple (ffccff)
// background, black border, 1 pixel 3D border effect and rounded corners.
c = cd.XYChart(600, 300, "0xffccff", "0x000000", 1);
c.setRoundedFrame();
// Set the plotarea at (55, 58) and of size 520 x 195 pixels, with white (ffffff)
// background. Set horizontal and vertical grid lines to grey (cccccc).
c.setPlotArea(55, 58, 520, 195, "0xffffff", -1, -1, "0xcccccc", "0xcccccc");
// Add a legend box at (55, 30) (top of the chart) with horizontal layout. Use 10 pts
// Arial Bold Italic font. Set the background and border color to Transparent.
c.addLegend(55, 30, False, "Arial Bold Italic", 10).setBackground(cd.Transparent);
// Add a title box to the chart using 15 pts Times Bold Italic font. The text is
// white (ffffff) on a purple (400040) background, with soft lighting effect from the
// right side.
c.addTitle("Multi-Symbol Line Chart Demo", "Times New Roman Bold Italic", 15,
"0xffffff").setBackground("0x400040", -1, cd.softLighting(cd.Right));
// Set the y axis label format to display a percentage sign
c.yAxis().setLabelFormat("{value}%");
// Set axis titles to use 9pt Arial Bold Italic font
c.yAxis().setTitle("Axis Title Placeholder", "Arial Bold Italic", 9);
c.xAxis().setTitle("Axis Title Placeholder", "Arial Bold Italic", 9);
// Set axis labels to use Arial Bold font
c.yAxis().setLabelStyle("Arial Bold");
c.xAxis().setLabelStyle("Arial Bold");
// We add the different data symbols using scatter layers. The scatter layers are
// added before the line layer to make sure the data symbols stay on top of the line
// layer.
// We select the points with pointType = 0 (the non-selected points will be set to
// NoValue), and use yellow (ffff00) 15 pixels high 5 pointed star shape symbols for
// the points. (This example uses both x and y coordinates. For charts that have no x
// explicitly coordinates, use an empty array as dataX.)
c.addScatterLayer(dataX, cd.ArrayMath(dataY).selectEQZ(pointType, cd.NoValue).result(
), "Point Type 0", cd.StarShape(5), 15, "0xffff00");
// Similar to above, we select the points with pointType - 1 = 0 and use green (ff00)
// 13 pixels high six-sided polygon as symbols.
c.addScatterLayer(dataX, cd.ArrayMath(dataY).selectEQZ(cd.ArrayMath(pointType).sub(1
).result(), cd.NoValue).result(), "Point Type 1", cd.PolygonShape(6), 13,
"0x00ff00");
// Similar to above, we select the points with pointType - 2 = 0 and use red (ff0000)
// 13 pixels high X shape as symbols.
c.addScatterLayer(dataX, cd.ArrayMath(dataY).selectEQZ(cd.ArrayMath(pointType).sub(2
).result(), cd.NoValue).result(), "Point Type 2", cd.Cross2Shape(), 13,
"0xff0000");
// Finally, add a blue (0000ff) line layer with line width of 2 pixels
layer = c.addLineLayer(dataY, "0x0000ff");
layer.setXData(dataX);
layer.setLineWidth(2);
// Output the chart
chart1URL = c.makeSession(GetPageContext(), "chart1");
// Include tool tip for the chart
imageMap1 = c.getHTMLImageMap("", "", "title='{x|mmm dd, yyyy}: {value}%'");
</cfscript>
<html>
<body style="margin:5px 0px 0px 5px">
<div style="font-size:18pt; font-family:verdana; font-weight:bold">
Multi-Symbol Line Chart
</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#" usemap="##map1" border="0" />
<map name="map1">#imageMap1#</map>
</cfoutput>
</body>
</html>
]]>