<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;
}
//
// Data to draw the chart. In this demo, the data buffer will be filled by a random data generator.
// In real life, the data is probably stored in a buffer (eg. a database table, a text file, or some
// global memory) and updated by other means.
//
// We use a data buffer to emulate the last 240 samples.
sampleSize = 240;
dataSeries1 = ArrayNew(1);
dataSeries2 = ArrayNew(1);
dataSeries3 = ArrayNew(1);
timeStamps = ArrayNew(1);
// Our pseudo random number generator
firstDate = DateAdd("s", - sampleSize, Now());
for (i = 0; i LT sampleSize; i = i + 1) {
timeStamps[i + 1] = DateAdd("s", i, firstDate);
p = Second(timeStamps[i + 1]) + Minute(timeStamps[i + 1]) * 60 + Hour(timeStamps[i + 1]) * 3600;
dataSeries1[i + 1] = Cos(p * 2.1) * 10 + 1 / (Cos(p) * Cos(p) + 0.01) + 20;
dataSeries2[i + 1] = 100 * Sin(p / 27.7) * Sin(p / 10.1) + 150;
dataSeries3[i + 1] = 100 * Cos(p / 6.7) * Cos(p / 11.9) + 150;
}
// Create an XYChart object 600 x 320 pixels in size
c = cd.XYChart(600, 320);
// Set the plotarea at (55, 60) and of size 520 x 235 pixels with transparent background and border.
// Enable both horizontal and vertical grids by setting their colors to grey (cccccc). Set clipping
// mode to clip the data lines to the plot area.
c.setPlotArea(55, 60, 520, 235, -1, -1, cd.Transparent, "0xcccccc", "0xcccccc");
c.setClipping();
// Add a title to the chart using dark grey (0x333333) 20pt Arial Bold font
c.addTitle("Realtime Chart with Snapshot", "Arial Bold", 20, "0x333333");
// Add a legend box at the top of the plot area using horizontal layout. Use 10pt Arial Bold font,
// transparent background and border, and line style legend icon.
b = c.addLegend(55, 30, False, "Arial Bold", 10);
b.setBackground(cd.Transparent, cd.Transparent);
b.setLineStyleKey();
// Set the x and y axis stems to transparent and the label font to 10pt Arial
c.xAxis().setColors(cd.Transparent);
c.yAxis().setColors(cd.Transparent);
c.xAxis().setLabelStyle("Arial", 10);
c.yAxis().setLabelStyle("Arial", 10);
// Add y-axis title using 12pt Arial font
c.yAxis().setTitle("Y-Axis Title Placeholder", "Arial", 12);
// For the automatic x and y axis labels, set the minimum spacing to 75 and 30 pixels.
c.xAxis().setTickDensity(75);
c.yAxis().setTickDensity(30);
// Set the x-axis label format
c.xAxis().setLabelFormat("{value|hh:nn:ss}");
// Create a line layer to plot the lines
layer = c.addLineLayer2();
// The x-coordinates are the timeStamps.
layer.setXData(timeStamps);
// The 3 data series are used to draw 3 lines. Here we put the latest data values as part of the
// data set name, so you can see them updated in the legend box.
layer.addDataSet(dataSeries1, "0xff0000", c.formatValue(dataSeries1[ArrayLen(dataSeries1)],
"Alpha: {value|2}"));
layer.addDataSet(dataSeries2, "0x00cc00", c.formatValue(dataSeries2[ArrayLen(dataSeries2)],
"Beta: {value|2}"));
layer.addDataSet(dataSeries3, "0x0000ff", c.formatValue(dataSeries3[ArrayLen(dataSeries3)],
"Gamma: {value|2}"));
// Check if is download request
if (IsDefined("URL.download")) {
fname = "demo_" & c.formatValue(timeStamps[ArrayLen(timeStamps)], "yyyymmddhhnnss");
if (URL.download EQ "pdf") {
// Output in PDF and stream as attachment
chart1URL = c.makeSession(GetPageContext(), "chart1", cd.PDF, fname & ".pdf", true);
} else {
// Output in PNG and stream as attachment
chart1URL = c.makeSession(GetPageContext(), "chart1", cd.PNG, fname & ".png", true);
}
}
else
// Output the chart
chart1URL = c.makeSession(GetPageContext(), "chart1");
// Stream chart directly to browser
GetPageContext().forward("getchart.cfm?" & chart1URL);
</cfscript> |
