| Advanced WebChart Topics > WebChart ASP Pages |
Below is the source code for a minimal ASP page containing a simple Bar Chart.
| Example Title |
Copy Code
|
|---|---|
<%@ Language=VBScript %> <!-- #INCLUDE VIRTUAL="/WebChart8/Include/VBS/color.inc" --> <!-- #INCLUDE VIRTUAL="/WebChart8/Include/VBS/2dconst.inc" --> <!-- #INCLUDE VIRTUAL="/WebChart8/Include/VBS/2dgentag.inc" --> <html> <body> <p>Text above the chart</p> <br> <!--METADATA TYPE="DesignerControl" startspan <OBJECT id=Chart2DASPDesigner1 style="LEFT: 0px; WIDTH: 254px; TOP: 0px; HEIGHT: 205px" classid=clsid:70F20995-170A-415F-B862-FEAE56EC4A60 width=254 height=205> <PARAM NAME="PersistenceVersion" VALUE="1"> <PARAM NAME="ByteCount" VALUE="1573"> <PARAM NAME="Part0" VALUE="0000070002000B4B4C5F4348415…"> <PARAM NAME="Part1" VALUE="02000400FF00FF0007000000000…"> <PARAM NAME="Part2" VALUE="000000000001010002000000FEF…"> …………………………… ……………… Lines omitted for brevity …………… …………………………… <PARAM NAME="Part24" VALUE="020001010000000000000000010…"></OBJECT> --> <% Dim Chart2DASPDesigner1 Set Chart2DASPDesigner1 = Server.CreateObject("C1Chart2D8.ASPComponent") Sub Chart2DASPDesigner1_Load() Chart2DASPDesigner1.Width = 254 Chart2DASPDesigner1.Height = 205 Chart2DASPDesigner1.IsBatched = True Dim aChartArea Set aChartArea = Chart2DASPDesigner1.ChartArea Dim aAxisCollection Set aAxisCollection = aChartArea.Axes Dim aAxis Set aAxis = aAxisCollection.Item(1) Dim aXrtFont Set aXrtFont = aAxis.Font aXrtFont.Bold = False …………………………… ……………… Lines omitted for brevity …………… …………………………… aXrtFont.Charset = 0 Dim aInterior Set aInterior = Chart2DASPDesigner1.Interior aInterior.BackgroundColor = 11788021 Dim aTitle Set aTitle = Chart2DASPDesigner1.Header Set aXrtFont = aTitle.Font aXrtFont.Bold = False …………………………… ……………… Lines omitted for brevity …………… …………………………… Dim aChartGroupCollection Set aChartGroupCollection = Chart2DASPDesigner1.ChartGroups Dim aChartGroup Set aChartGroup = aChartGroupCollection.Item(1) aChartGroup.ChartType = oc2dTypeBar Chart2DASPDesigner1.IsBatched = False End Sub Call Chart2DASPDesigner1_Load() Call OlectraChart2D_GenerateTag(Chart2DASPDesigner1, "Chart2DASPDesigner1") %> <!--METADATA TYPE="DesignerControl" endspan--> <br> <p>Text below the chart</p> </body> </html> |
|
The above code has several lines removed for brevity. The actual page source can be found in the virtual directory file, /WebChart8/Details/Minimum.asp. The above has been presented, to highlight specific lines of code (bold) and to show the overall flow of the ASP page.
The code below differentiates those sections of the page created by the program and those created by the Design Time Control (DTC).
| Example Title |
Copy Code
|
|---|---|
<%@ Language=VBScript %> <!-- #INCLUDE VIRTUAL="/WebChart8/Include/VBS/color.inc" --> <!-- #INCLUDE VIRTUAL="/WebChart8/Include/VBS/2dconst.inc" --> <!-- #INCLUDE VIRTUAL="/WebChart8/Include/VBS/2dgentag.inc" --> <html> <body> <p>Text above the chart</p> <br> <!--METADATA TYPE="DesignerControl" startspan …………………………… ……… The METADATA lines and all between are created ……… ……… by the DTC.……… …………………………… <!--METADATA TYPE="DesignerControl" endspan--> <br> <p>Text below the chart</p> </body> </html> |
|
Take a closer look at the ASP page between the METADATA statements. As before, these sections can be split into a number of interesting sections.
| Example Title |
Copy Code
|
|---|---|
<!--METADATA TYPE="DesignerControl" startspan <OBJECT id=Chart2DASPDesigner1 style="LEFT: 0px; WIDTH: 254px; TOP: 0px; HEIGHT: 205px" classid=clsid:70F20995-170A-415F-B862-FEAE56EC4A60 width=254 height=205> <PARAM NAME="PersistenceVersion" VALUE="1"> <PARAM NAME="ByteCount" VALUE="1573"> <PARAM NAME="Part0" VALUE="0000070002000B4B4C5F4348415…"> <PARAM NAME="Part1" VALUE="02000400FF00FF0007000000000…"> <PARAM NAME="Part2" VALUE="000000000001010002000000FEF…"> …………………………… ……………… Lines omitted for brevity …………… …………………………… <PARAM NAME="Part24" VALUE="020001010000000000000000010…"></OBJECT> --> <% Dim Chart2DASPDesigner1 Set Chart2DASPDesigner1 = Server.CreateObject("C1Chart2D8.ASPComponent") Sub Chart2DASPDesigner1_Load() …………………………… ……………… Lines omitted for brevity …………… …………………………… End Sub Call Chart2DASPDesigner1_Load() Call OlectraChart2D_GenerateTag(Chart2DASPDesigner1, "Chart2DASPDesigner1") %> <!--METADATA TYPE="DesignerControl" endspan--> |
|
There are 2 METADATA statements - the first contains startspan, the second endspan. These statements perform multiple purposes. Together, they mark the area managed by the DTC in Microsoft InterDev. Whenever the DTC is used by Microsoft InterDev to modify the properties, all the lines between the two METADATA statements are rewritten by the control.
Within the first METADATA statement, an Object is declared. In this case, the object is the ComponentOne WebChart 2D DTC. This is how Microsoft InterDev stores information on which DTC has been placed in this location on the ASP page. Included within the ASP Object tag are several object properties, including the object ID, the style, the CLSID of the DTC and the width and height.
Immediately following the opening ASP Object tag, are PARAM tags. Each of these tags stores information by NAME and VALUE, and forms the basis of persistence for the DTC within Microsoft InterDev. The chart properties set at design time are encoded in the Part0 through PartN parameters of the ASP Object. When all the data has been stored, the closing ASP Object is encountered, and the close comment string of the METADATA tag.
Following the startspan METADATA, and out of the comment region, a new section begins within ASP script tags <% %>. This script is generated by the DTC and added to the page to create and initialize the ComponentOne WebChart run-time control.
To create the run-time control, the ComponentOne WebChart DTC generates code using the Server object CreateObject() method. The single parameter to the CreateObject() function call is the object name of the ComponentOne WebChart run-time ASP control. The 2D control is named C1Chart2D8.ASPComponent and the 3D control is named C1Chart3D8.ASPComponent. The created ASP object is held by a variable.
Since ASP run-time controls do not have a persistence mechanism, all of the properties set at design time must be set and added to the run-time object through code. The ComponentOne WebChart DTC encapsulates the property initialization in a single routine called from the script area. In this case, the routine name is Chart2DASPDesigner1_Load - a concatenation of the ASP Object name and _Load. The Chart2DASPDesigner1_Load routine contains code which sets all of the necessary properties required to produce the chart created in Microsoft InterDev. The properties set in Chart2DASPDesigner1_Load() include all of the fonts of the chart objects, and any properties which are not default properties of the chart, including data. In this particular case, only two chart properties were modified from the default. Both of these are highlighted in bold in the first listing and include the ChartGroups(1).ChartType and the chart Interior.BackgroundColor.
Following the Chart2DASPDesigner1_Load routine definition, the DTC generated script simply calls the Chart2DASPDesigner1_Load routine and all the properties are initialized as designed in Microsoft InterDev.
Following the initialization, the ComponentOne WebChart DTC calls the designated GenerateTag routine found in the include files. As described previously, there is a family of GenerateTag routines in both 2DGENTAG.INC and 3DGENTAG.INC. These routines produce HTML by calls to the ASP Response object. By default, the ComponentOne WebChart DTC generates code that calls OlectraChart2D_GenerateTag by default for 2D charts and OlectraChart3D_GenerateTag by default for 3D charts. The name of the routine called by the DTC can be set from the property pages, see ComponentOne WebChart's Property Page. If the called routine is set to an empty value in the property page, then none of the GenerateTag routines are called by the DTC code, and production of the HTML render the chart to the client is left to the programmer.
The call to the GenerateTag routine concludes the DTC generated script code of the ASP page, and is immediately followed by the closing METADATA statement with the endspan parameter.