by Matt Gray - GUI Computing
A server-side graphing component specifically for IIS…..cool! And, largely speaking, it is cool.
I am sure that at some stage or another ASP developers will find the necessity to graph and using ChartFX/IE is going to be a popular option. Especially if you have used other versions of ChartFX, this will all be very familiar and easy to adjust to - most of the way CFX/IE graphs is exactly the same as its predecessors.
However I didn't find the help to be overly useful - when it came to designing my own x-axis labels, I came unstuck in a big way. For quite a while I didn't think there was a way to achieve this without being unorthodox. It turns out that there is a property to add these labels, but it isn't easy to find in the help (and the component comes with lots of samples too!) In fact, searching for some things would have been extremely tedious unless you knew ChartFX previously, and unless I looked at ChartFX Standard Edition I wouldn't have found this property.
So if you're new to ChartFX entirely, you should expect some learning curve.
Chart FX can be either easy to use or a teeny bit of work - depending on how you use it. Like many tools, "bound" mode gets quick results with little or no code, but the results you get may not always be that you wanted. If you are like me, then you'll want more control over your graph and to design a specific graph that you may have in mind may be more achievable if you manually feed the graph data - and ChartFX/IE allows you to manual pass data via the communication channels (of which more later).
Using AdoResultSet method
If you have a very simple query and recordset to graph (ChartFX can generate the Graph from a recordset….the easy way), then ChartFX's adoResultSet method is the way to go. You simply pass the method your recordset and then spit out the graph with the getHtmlTag method - sounds easy and it is. You can also set properties and methods building a graph in this manner and have a fair amount of control over your graph, but it is difficult to get complex graphs done this way via one query/recordset. The code for using ChartFX this way is simple - just create the object, get your recordset and pass it to the adoresultset method of the chart.
<% 'ChartFX server object set Chart = Server.CreateObject("ChartFX.WebServer") set db = server.createobject("ADODB.connection") db.open sDSN sSql = "SELECT * FROM MYTABLE" set rs = db.execute(sSql) 'pass your recordset to the chart's adoResultSet method chart.AdoResultset rs 'spit out the graph - this generates a full size graph response.write(chart.GetHtmlTag("100%","100%") ) %>
This should produce a 3d bar graph by default - full size. If you wish to change the size of it simply change the percentage values : GetHtmlTag has 5 parameters - width, height, browser, name and chartid. You can specify width/height with an integer or string value (as a percentage eg. "85%") But the real beauty of this method is that it will generate the appropriate tag (chart) for the browser that you have (if you have browser set to "Auto", or don't specify the parameter at all. Sometimes it may need to optimally generate a gif ….and other times a "PlugIn" etc. depending on your browser. Alternatively you may specify which tag you want - either "Auto", "Image", "ActiveX", "Plugin", "Jpeg", "Png", "Gif". Name is the name of the object - for active content only, and ChartID is a string id to be used in personalizable charts.
Using Communication Channels
This "manual" way of passing data, which I prefer, enables more control of your data and graphs - passing data to the graph via communication channels. There are several types of dynamic data you may pass to the chart. To open the communication channel for each data type you must include the "channel code" (the code used to open the channel with the openDataEx method), later, you call the CloseData Method to close the opened channel. You can pass other data like colors, constants, stripes and points through the channel in this manner. Here's some code to do this...which should look familiar to previous ChartFX users:
<% set Chart = Server.CreateObject("ChartFX.WebServer") 'open a channel to a new graph - with channel id, series and points chart.openDataEx 1, 1, 4 'value(index) is the point - index 0 to 3 for 4 point graph chart.value(0) = 2 'legend(index) is the x label - index 0 to 3 for 4 point graph chart.legend(0) = "X label 0" chart.value(1) = 4 chart.legend(1) = "X label 1" chart.value(2) = 5 chart.legend(2) = "X label 2" chart.value(3) = 0 chart.legend(3) = "X label 3" chart.closeData 1 'channel 1 'spit out the graph - this generates a full size graph response.write(chart.GetHtmlTag("100%","100%") )
This should produce a 3D bar graph at full size. If you don't know how many points you are going to need (for example, filling from a database), then you can use the COD_UNKNOWN property, which will cause the library to allocate memory dynamically in accordance with the amount of points you're passing to it.
Note also that you cannot specify the x labels like this (with the legend property) when using the adoResultSet method….this method uses the field names in your recordset - so this is one reason why openDataEx is more flexible.
Filling from a recordset
set Chart = Server.CreateObject("ChartFX.WebServer") set db = server.createobject("ADODB.connection") db.open sDSNConnection sSql = "SELECT * FROM MYTABLE" set rs = db.execute(sSql) chart.openDataEx 1, 1, COD_UNKNOWN 'unknown points for nIndex = 0 to rs.fields.count - 1 chart.value(nIndex) = rs.fields(nIndex).value chart.legend(nIndex) = rs.fields(nIndex).name next chart.closeData 1
You may want to change a few points in a graph you have already created. You should specify to openDataEx that you want to leave the graph unchanged, except for your changes. If you use the constant COD_UNCHANGE you can keep the graph and edit what you specify. This allows you to keep actual number of series and points if you want to change only one value in a previously created chart.
' Chart is already created ' Open the channel to modify a value ChartFX.OpenDataEx nChannel,COD_UNCHANGE,COD_UNCHANGE ' Remember these numbers are zero based ChartFX.Value(2) = 45.67 ' here you can modify any number of values ' Close data communication channels ChartFX1.CloseData nChannel
Customising your graphs
ChartFX Internet Edition enables you to do multiple graph types, colours, titles, fonts, legends, you name it…You can customise any graph before you display it and modify these sorts of features to make your graphs come alive.
Here are a few standard and non standard customising properties:
The Graph title
Chart.title(index) = "title", where index = 0 - left, 1, right, 2- top, 3 - bottom 'The title of your graph at the top of your graph chart.Title(2) = "Graph one…"
The y-axis labels
Chart.yleg(index) = "some value"
' Show Series Legend Window chart.Type = chart.Type Or &H40000000& chart.serleg(0) = "Key 1"
1 = LINE(S) Line Chart
2 = BAR Bar Chart (Including Horizontal, and stacked charts)
3 = SPLINE Curve-fitting Chart
4 = MARK Point Chart
5 = PIE Pie Chart
6 = AREA Area Chart (Including stacked charts)
7 = PARETO Pareto Chart (Statistical Chart. Special)
8 = SCATTER Scatter Chart
9 = HILOW Hi-Low Close Chart
10 = SURFACE Surface Charts
11 = POLAR Polar Charts (also in 3D!)
12 = CUBE Cube Charts
13 = DOUGHNUT Doughnut Charts
NB : All charts naturally don't operate in the same manner - and it pays to look specifically at each type when trying a new graph…take it from me!
Multiple graphs in one
Use the Multitype property - which is an array of series, to specify different graphs per series.
Since the MultiType property is an array of series, it has to be set after you define the number of series in the chart using the OpenDataEX Method.
ChartFX1.MultiType(0) = 1 'line ChartFX1.MultiType(1) = 2 'bar ChartFX1.MultiType(2) = 12 'cube
To set colors you need to use the openDataEx method :
' OpenDataEx with COD_COLORS to start setting colors ' 2 means we will provide two colors (one per series) chart.OpenDataEx 3,2,0 ' Assign colors ' RGB takes three numbers between 0 and 255 as red,green and blue chart.Color(0) = RGB(255,255,0) chart.Color(1) = RGB(128,128,0) ' CloseData marks the end of color setting (COD_COLORS=3) chart.CloseData 3
There are obviously far too many properties and methods, and features of ChartFX/IE for me to go through all of them. I have just tried to focus on the main ones and, hopefully, this will give you an idea of what this neat tool is capable of.
Available from GUI Computing for $1,179.