Cold Fusion Line Graph Examples - different property settings for csDrawGraph

This page shows a number of line graphs created using the csDrawGraph COM object in Cold Fusion. The properties have been varied to show the sort of effects possible.

Default properties, except the size is reduced to fit more examples on the page. Axis and legend position as well as axis length are changed to suit the size. A single line is defined using two points (0,0) and (30,30). The legend has been removed.

The same data is used as above. This time the legend is shown, the x and y axes are labelled, the grid is visible and the numbers on the x-axis are turned round. The width of the graph line is increased to 2 pixels.

XAxisText = "X Axis"
YAxisText = "Y axis"
LineWidth = 2
XValuesVertical = false
ShowGrid = true

This time a second line is added. The graduations on both axes have been specified as 5. The grid lines are solid and coloured light grey.

ShowGrid = true
GridColor = "aaaaaa"
GridStyle = 0
YGrad = 5
XGrad = 5

The background colour (white) is now transparent. The points are visible and are shown with a filled circle. The box around the legend is removed.

Transparent = true
ShowLegendBox = false
PointStyle = 1
PointSize = 4

This has three lines plotted. The background colour is light grey. The background colour for the legend and the plot area colour are left as white to allow them to stand out.

ShowGrid = true
GridStyle = 0
PointStyle = 1
BGColor = "eeeeee"
AxisTextBGColor = "eeeeee"

This graph uses the YOffset property to limit the values displayed on the y-axis. The values on the x-axis have been substituted with text labels using the AddXValue method, and setting UseXAxisLabels to true.

YGrad = 10
YTop = 160
XGrad = 1
XTop = 3
YOffset = 100
UseXAxisLabels = true
AddXValue 0, "Jan"
AddXValue 1, "Feb"
AddXValue 2, "Mar"
AddXValue 3, "Apr"

This graph shows the points without joining them. It has negative x-values and the x-axis has been extended accordingly.

MaxX = 170
MaxY = 120
XAxisNegative = 85
ShowLine = false
PointStyle = 1
PointSize = 4
YGrad = 5
XGrad = 10

There are also examples available of Bar Charts, Stacked Bar Charts and Pie Charts.

Download csDrawGraph here.