AXTutorial9

From Steema Software Reference Wiki
Jump to: navigation, search

Ax.png

Contents page
Previous | Next

Tutorial 9 - Internet applications

General techniques

Adding TeeCharts to your internet/intranet web pages may be done in two key ways, depending on where and how you want your data to be retrieved and what user options you wish to present at the browser.

The TeeChart ActiveX control can be inserted in HTML pages using the HTML <OBJECT> tag as follows:

<OBJECT  classid="CLSID:FCB4B50A-E3F1-4174-BD18-54C3B3287258"
  codebase="TeeChart2012.ocx#Version=9,0,0,0"
  id=TChart1
  TYPE="application/x-oleobject"
  width=500
  height=250
  align=center
  hspace=0
  vspace=0
  >
</OBJECT>

This works only using Microsoft Internet Explorer web browser version 3.02 or greater. Netscape does support the use of ActiveX Controls on the page but you must use an Add-in that supports ActiveX.

Another way to transfer Charts is to save them as image files in JPEG/PNG or GIF format (Internet Explorer also supports metafile). This does not have the advantages of a "live" Chart, such as mouse clicks, real-time animation, scrolling, etc, but works with almost any browser.

Chart controls can be saved to JPEG format with this method:

  TChart1.Export.asJPEG.SaveToFile

Example of use:

  With TChart1
    .Width = 400
    .Height = 300
    .Export.asJPEG.CompressionQuality = 50
    .Export.asJPEG.SaveToFile "c:\temp\myJPGFile.jpg"
  End With

Bitmaps can also be saved to file in GIF, PCX or PNG formats:

With TChart1
    .Export.asBMP.SaveToFile( "c:\MyBMP.png" )
    .Export.asGIF.SaveToFile( "c:\MyGIF.png" )
    .Export.asJPEG.SaveToFile( "c:\MyJPEG.png" )
    .Export.asMetafile.SaveToFile( "c:\MyMetafile.wmf" )
    .Export.asPCX.SaveToFile( "c:\MyPCX.pcx" )
    .Export.asPNG.SaveToFile( "c:\MyPNG.png" )
End With

An alternative to saving to disk file is to use the SaveToStream method to create a binary stream that returns the BMP, GIF, JPEG, Metafile, PCX or PNG Chart directly to the browser. All techniques are examined in more detail later in this tutorial.

See the "HTML HotSpot MAP" example under \Examples\Visual Basic 6 folder and as an ASP file in the TeeChart ASP examples to create hot-spot clicking maps.

When using Chart objects, these can be manipulated at the client side using Microsoft's Visual Basic Script. [tutorial10.htm (See next Tutorial)]

Data values can be added to the Chart objects using VBScript or importing already saved native Chart files or Text files from an URL internet address.

Charts can be saved to native format using this method:

TChart1.Export.asNative.SaveToFile( "c:\MyTEEwithSeriesData.tee", True )

Charts can be saved to text format using this method:

TChart1.Export.asText.SaveToFile( "c:\myTXT.txt" )

And can then be loaded from the client machine with this code:

TChart1.Import.LoadFromFile( "\\MyServer\MyCharts\MyChart.tee" )

and

TChart1.Import.LoadFromFile( "\\MyServer\MyCharts\MyTXT.txt" )

Or from an URL address:

TChart1.Import.LoadFromURL( "http://www.steema.com/demo.tee" )

and

TChart1.Import.LoadFromURL( "http://www.steema.com/demo.txt" )

On the Server side, you can build ASP pages or ISAPI DLL's to create and return TeeChart Pro controls.

This can be done with TeeChart Pro using Microsoft's OLE Automation.

See the "OLE Automation" example under \Examples\Visual Basic 6 folder.

The syntax for use in VB is as follows. The model, virtually unchanged, may be used when scripting ASP.

Private Sub Command1_Click()
Dim Chart As Object
' create the ole automated object...
Set Chart = CreateObject("TeeChart.TChart")
' set properties...
  Chart.Width = 360
  Chart.Height = 170
  Chart.AddSeries (1)
' add some random values...
  Chart.Series(0).FillSampleValues 6
  Chart.Series(0).ColorEachPoint = True
' save the chart to bitmap file...
  Chart.Export.asBMP.SaveToFile ("c:\mychart.bmp")
' release the object...
Set Chart = Nothing
' load the bitmap file back to Picture control...
Picture1 = LoadPicture("c:\mychart.bmp")
End Sub

*Special note Zoom and Scroll

TeeChart is mousedrag zoomable and scrollable on the browser page in its native <OBJECT> form. However Internet Explorer version 5 has introduced a new requirement to facilitate this functionality, the need for a TeeChart event on the browser page. The event may be empty.

Examples

VbScript
 ---------
 <SCRIPT LANGUAGE=VBSCRIPT>
 Sub TChart1_OnAfterDraw()
  'empty
 End sub
 </SCRIPT>
 
 JScript
 --------
 <SCRIPT LANGUAGE="JavaScript" FOR="TChart1" EVENT="OnAfterDraw()">
 <!--
  //empty
 -->
 </SCRIPT>
 

Options for delivering a web Charting application

There are several basic options to delivering a TeeChart Web application. The options available will depend on what Webserver you are running as more recent developments with Microsoft's Web server allow a great deal to be scripted 'server side' for ocx controls.

Web Charting applications can access ADO datasources too. The following sections describe how connectivity would be implemented and what impact that would have on Client-Server configuration requirements.

'Live' TeeChart in the browser page as an ActiveX control

Standard setup
We could consider this as 'Standard' format. This would require the object definition for the TeeChart Control to be placed in an html page to be accessed directly by a client browser (as discussed at the beginning of this tutorial and throughout the next tutorial). The ocx may be present on the client machine or the Activex object definition may point to a server based [#CABFiles CAB] file. The advantage of the CAB file approach is that you centrally control the version of the ocx that the client machine runs. The [tutorial10.htm next tutorial] discusses, in some detail, syntax and scripting options for a TeeChart control on the html page.

ADO/ODBC access
The standard setup will allow ODBC datasources to be accessed from the client machine. When a client browser views a page containing a 'Live' TeeChart control it is launching a local instance of that control, thus any ODBC datasource defined for that Chart must be a local client ODBC User DSN. The local User DSN must be pathed to connect to the central (or local !) database (The exception to this rule lies with ASP applications where you may access the ODBC System DSN at the server only and distribute the generated Chart using the TeeChart .tee format file. See [#ASPinDepth the ASP section]).

Example

'VBScript on html page accessing TeeChart OBJECT ID 'Chart'
Chart.Series(0).YValues.ValueSource = "SALARY"
Chart.Series(0).LabelsSource = "LASTNAME"
Chart.Series(0).DataSource="DSN=TeeChart Pro Database; SQL=select * from employee"

or using accessing an ADO Recordset directly:

<SCRIPT LANGUAGE=VBSCRIPT>

Sub FillChart()
'Setup Series
Chart.AddSeries(1)
Chart.Series(0).Marks.Visible=False
Chart.Series(0).ColorEachPoint = True

'Connect to database
Conn.Open "TeeChart Pro Database"
RSt.Open "select * from [employee]", Conn, 1,1

'Connect Series to Recordset
Chart.Series(0).Datasource = RSt
Chart.Series(0).LabelsSource="Lastname"
Chart.Series(0).YValues.ValueSource="Salary"
End Sub

Sub Window_Onload()
FillChart
End Sub

Sub Chart_OnAfterDraw()
End Sub

</SCRIPT>

<OBJECT ID="Chart" WIDTH=450 HEIGHT=290
 CLASSID="CLSID:FCB4B50A-E3F1-4174-BD18-54C3B3287258">
</OBJECT>

<OBJECT ID="Conn"
 CLASSID="CLSID:00000514-0000-0010-8000-00AA006D2EA4">
</OBJECT>

<OBJECT ID="RSt"
 CLASSID="CLSID:00000535-0000-0010-8000-00AA006D2EA4">
</OBJECT>

' When this is run as a clientside script, the User DSN 'TeeChart Pro Database'
' must exist on the Client machine. For ASP datasourced Charts, the DSN only
' needs to reside at the server. See the next section.

For Internet applications it may be impractical to assume that all client machines will have ODBC access to the database server (unless the database is local to each machine). However for Intranet applications this topography may be a viable option. If we assume that "to achieve ODBC access for all clients" is difficult, we may address the issue in other ways, see the following sections.

'Live' TeeChart on the web page using TeeChart template files

TeeChart template files offer the possibility of putting 'Live' (zoomable and scrollable) ADO datasourced Charts on the browser page without the need for the OLE DB or ODBC compliant datasource in each client machine. TeeChart templates are very small files containing Chart data and display properties. The files may be created centrally on or for the Web server and distributed to (made available for) the client browser Charts.

The application could work in this way: You would create a central process (e.g. local executable or dll or an ASP scripted process (see the [#ASPinDepth ASP section]) ) that creates a Chart accessing a server based ODBC datasource. The application would save/export (could be at set intervals) the current Chart as a TeeChart template (.tee) file.

Example

Chart1.Export.asNative.SaveToFile( "c:\tempDownloadArea\mychart.tee", True )

..or export the Chart as a stream directly to the browser..

Chart1.Export.asNative.SaveToStream( True )

The html page for the browser would contain the standard OBJECT definition for the TeeChart control and options to refresh the Chart. These could take the form of:

Example

'automatic import when page is loaded
<script language="VBScript"><!--
Sub Window_onload()
  ' importing a Chart saved to disk as a tee file
  TChart1.Import.LoadFromURL("http://www.myweb.com/mychart.tee")
end Sub
--></script>

Or...

'manual import of latest Chart
<script language="VBScript">
SUB ImpChart
TChart1.Import.LoadFromURL("http://www.myweb.com/mychart.tee")
End Sub
</script>
<!--button-->
<input type="button" value="Import Chart"
onclick="ImpChart" name="cdmChart1">

Or...

'Use TeeChart's timer to update at intervals the local Chart
<script language="VBScript">
Sub Window_onload()
  'Activate TeeChart timer
  TChart1.TimerEnabled = True
  TChart1.TimerInterval = 120
end Sub

Sub TChart1_OnTimer()
  'On timer import the latest server Chart
  TChart1.Import.LoadFromURL("http://www.myweb.com/mychart.tee")
End Sub

Or...

' If streaming the Chart to the browser (no temporary files)
' then you could call the asp script that creates and expoirt s the Chart:
TChart1.Import.LoadFromURL("http://www.myweb.com/myscripts/createchart.asp")

</script>

TeeChart on the web page as a static JPEG, PNG, GIF or PCX file

This setup does not require that the Client browser has access to the TeeChart Pro Activex control. Simply create a process on the server that exports to a JPEG, PNG, GIF or PCX chart (see earlier and ASP section of this tutorial). The server application could access any server based OLE DB or ODBC compliant datasources if required. The application's HTML pages would then reference that Chart as a static image file. This approach will be of interest for those wishing to create a Charting application generic and homogeneous to all browser types (for streaming Charts directly to the browser see the [#ASPStreaming Chart streaming] section).

TeeChart and ASP run server-side in IIS4, IIS5 & IIS6 servers

TeeChart can be scripted server side with ASP. This would allow, for example, the previous option (JPEG file) to be created with an ASP script. Typical syntax for a script would be as follows: Example

e.g. MyCreateChart.asp file

<!--METADATA NAME="TeeChart Pro Activex control v2012" TYPE="TypeLib"
UUID="{5006E56D-FEDE-4C64-9CC2-78C320929406}"-->

<OBJECT RUNAT=Server ID=MyChart
CLASSID="Clsid:FCB4B50A-E3F1-4174-BD18-54C3B3287258">
REM Object Script
</OBJECT>

<%
Response.BinaryWrite(RunChart)
Function RunChart()
  Dim img
  MyChart.AddSeries(scArea)
  MyChart.Series(0).FillSampleValues(10)
  img = MyChart.Export.asPNG.SaveToStream
  RunChart=img
End Function
%>

The importing page could show the above Chart via an img tag:

<HTML><BODY>
<img src="http://www.myweb.com/myscripts/MyCreateChart.asp">
</BODY></HTML>

Alternatively the CreateObject method, described earlier in this tutorial, may be used to create teeChart with ASP. TeeChart may also be used with Microsoft scriplets. There is an example included with the TeeChart Internet Explorer examples.

TeeChart and ASP.NET

TeeCharts can be displayed as "live" and "static" charts in ASP.NET just as they can in "normal" ASP. To create a static chart in an ASP.NET application, simply follow the steps below

  • Create a new ASP.NET application.
  • Add an Image box to the WebForm.
  • Right Click on the project's References and add in a reference to the TeeChart Pro ActiveX Control v2012 (COM Tab).
  • In the WebForm's Page_Load event, add in the following code (VB.NET example):
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
  TChart1.AddSeries(TeeChart.ESeriesClass.scBar)
  TChart1.Series(0).FillSampleValues(10)
  TChart1.Height = Image1.Height.Value
  TChart1.Width = Image1.Width.Value
  TChart1.Export.asPNG.SaveToFile("E:\Inetpub\wwwroot\TestASPNETSol\VBWeb\MyChart.png") 'path to virtual folder
  Image1.ImageUrl = "http://localhost/VBWeb/MyChart.png"
End Sub

To create a "live" chart, step through the following:

  • Create a new ASP.NET application.
  • Right Click on the project's References and add in a reference to the TeeChart Pro ActiveX Control v2012 (COM Tab).
  • Open the WebForm in HTML view and make sure the BODY of the page looks like this:
<body MS_POSITIONING="GridLayout">
    <form id="Form1" method="post" runat="server">
    </form>
    <OBJECT id="TChart1" style="Z-INDEX: 101; LEFT: 34px; WIDTH: 482px; POSITION: absolute; TOP: 38px; HEIGHT: 358px"
      classid="clsid:FCB4B50A-E3F1-4174-BD18-54C3B3287258" VIEWASTEXT>
      <PARAM NAME="Base64" VALUE="VFBGMAtUQ2hhcnRDaGFydAAETGVmdAIAA1RvcAIABVdpZHRoA IBBkhlaWdodANmARJUaXRsZS5U
ZXh0LlN0cmluZ3MBBghUZWVDaGFydAAAAAAAAAACAAAAAP////8=">
    </OBJECT>
    <script language="vbscript">
		Sub Window_Onload()
			TChart1.Import.LoadFromURL("http://localhost/CsharpWeb/WebForm2.aspx")
		End Sub

		Sub TChart1_OnAfterDraw()

		End Sub
    </script>
</body>
  • Add in a new WebForm to your project and name it "WebForm2".
  • In the Page_Load event of WebForm2, add in the following code (C# example) and include the private field indicated:
private TeeChart.TChartClass tChart1 = new TeeChart.TChartClass();
private void Page_Load(object sender, System.EventArgs e) {
	tChart1.AddSeries(TeeChart.ESeriesClass.scBar);
	tChart1.Series(0).FillSampleValues(20);
	object stream = tChart1.Export.asNative.SaveToStream(true);
	Response.BinaryWrite((byte[])stream);
}

TeeChart CAB files

A CAB file version of TeeChart is included with the TeeChart installer for the registered version and available on the download page at the Steema web (www.steema.com) for the evaluation version. The CAB file is authenticoded. The CABfile callup definition in the html page would take the following form: Example

<object
   id="Chart1"
   width="400"
   height="268"
   type="application/x-oleobject"
   hspace="0"
   vspace="0"
   classid="CLSID:FCB4B50A-E3F1-4174-BD18-54C3B3287258"
   CODEBASE="http://www.myweb.com/teechart2012.cab#Version=9,0,0,0">
</object>

Changing the version number (teechart.cab#Version=9,0,0,0) allows you to manage which version the client machines should be running. The first time a client browser connects to the application it will download the CAB file. Thereafter it will check the local version against the version defined in the version line. Thus if you wish the client version to be upgraded, change the html page's version number to the server version number that you wish to make available and the client browser will download it if the local version is older.
Example of use
Setting teechart.cab#Version=9,0,0,1 in the <OBJECT> definition causes the browser to check the local version and download the CAB only if the local version is anterior. Assuming v2012.0.0.1 is downloaded the first time, the server based CAB is not called for download again until the version number in the codebase line is again incremented. Internet Explorer updates the registry with any differences between versions.

Version Control

To get two or more versions of TeeChart Pro ActiveX running side by side on your server, you should take into account the following:-
The example given below is to concurrently display TeeChart Pro 6 and TeeChart Pro 2012 ASP Charts from your server.Â
If you include the following line of code in your ASP scripts...

Set Chart1 = CreateObject("TeeChart.TChart")

... it will create a Chart according to the current 'patron' of the HKEY_CLASSES_ROOT\TeeChart.TChart\Curver registry key, eg TeeChart 2012. However, if you already have pages containing TeeChart v6 ASP Charts on your website, they will be created serverside as v6 Charts and exported for importation to a v6 client (because the client is strictly version controlled via the <OBJECT> CLSID. This will generate incorrect functioning.

To resolve the problem you should change all example scripts to be version 'tied': Eg.

Set Chart1 = CreateObject("TeeChart.TChart.6")

to create a v6 Chart.

Set Chart1 = CreateObject("TeeChart.TChart.9")

to create a v2012 Chart ('9' is an internal create version code for TeeChart v2012).

The advantages in leaving CreateObject 'version open' is that it will always take the latest version. This is fine for closed scripts but not for those where a tee file is generated for export.

Different instances of Internet Explorer should be able to use different versions of TeeChart at the same time without any problem.

Printing from Internet Explorer

Printing with later versions of Internet Explorer doesn't present any special issues. Earlier versions, (here notes refer to tests on v5) required the use of a TeeChart property. Internet Explorer version 5 creates a new instance of TeeChart at the moment of printing if printing a full browser page from IE5's 'File' menu, 'Print' option. By default that will cause TeeChart to lose its dynamic content, the data Series, causing the Chart to print as an empty Chart on the outputted page. This behaviour may be overidden by setting a TeeChart IE specific environment property, IEPrintWithPage. The property should be set to True for each Chart that is required to be printed with Series content. Example

<script language="VBScript"><!--
Sub Window_Onload()
  '2 Charts in one browser page
  TChart1.Environment.IEPrintWithPage = True
  TChart2.Environment.IEPrintWithPage = True
End sub
--></script>

TeeChart's own print methods may be used without any preparative steps. See Tutorial 14 for more information.


More on Active Server Pages (ASP) and ASP/IIS Servers

One of the areas for which we have received most enquiries has been relating to options for creation of ASP TeeChart applications. This section reviews the key options. It is assumed that Teechart Pro AX v5 is registered on the IIS server machine. An ASP page offers the possibility of full interactivity with the client browser and dynamic creation of both 'static' image (JPEG, PNG, GIF or PCX) charts and 'Live' (scrollable/zoomable, etc) TeeCharts. Exportation may take place via temporary files on the server or by directly streamed export to the browser.

Creating a image Charting application with ASP/IIS servers

The following ASP script shows a Chart page to the client, creates the Chart dynamically and sends the output as a JPEG file to the browser. [ASPSample1.txt Formatted Source]

<!--METADATA NAME="TeeChart Pro Activex control v2012" TYPE="TypeLib"
UUID="{5006E56D-FEDE-4C64-9CC2-78C320929406}"-->

<%
   'Send output to browser (and call RunChart method to build contents)
   Response.BinaryWrite(RunChart)
   Function RunChart()
	Dim img
	Dim Chart
        Set Chart = CreateObject("TeeChart.TChart")
        Chart.AddSeries(scBar)
	Chart.Series(0).Add 100, "Apples", RGB(255,0,0)
	Chart.Series(0).Add 300, "Pears", RGB(255,255,255)
	Chart.Series(0).Add 200, "Bananas", RGB(255,255,0)
	Chart.Export.asJPEG.CompressionQuality = 95
	Chart.Export.asJPEG.GrayScale = False
	Chart.Export.asJPEG.Height = 300
	Chart.Export.asJPEG.Width = 500
        img=Chart.Export.asJPEG.SaveToStream
        RunChart=img
        Set Chart=nothing
   End Function
%>

Creating a Live Charting application with ASP/IIS servers

The following script loads a Chart at the server and populates it with random data, loads a Chart on the client browser and runs a script to retrieve (import) the server generated Chart into the client Chart. [ASPSample2.txt Formatted Source]

<!--METADATA NAME="TeeChart Pro Activex control v2012" TYPE="TypeLib"
UUID="{5006E56D-FEDE-4C64-9CC2-78C320929406}"-->

<%
 ' Server side execution
 dim outputfile
 ' the following line may be replaced with your dynamic
 ' name creation code:
 outputfile = "http://localhost/filename.tee"
 ' The following line requires that you have the teechart.ocx
 ' file registered on the server
 ' The Server Chart is called Chart1
 Set Chart1 = CreateObject("TeeChart.TChart")
 Chart1.AddSeries(scLine)
 ' Use your methods eg. via DB to populate Chart or sample values
 ' for our example.
 Chart1.Series(0).FillSampleValues(10)

 ' Save the Chart as a .tee format file
 ' where the path locates to the same destination directory as
 ' the URL of the outputfile.
 Chart1.Export.SaveToFile "c:\inetpub\wwwroot\filename.tee"
%>
<HEAD></HEAD><BODY>
In the client section of the page we have added a TChart having the
TeeChart OBJECT defined as name TChart1.

<SCRIPT LANGUAGE=VBSCRIPT>
' This code is run at the browser asking the Server ASP code for the filename
' and loading that file into the Chart on the browser page
Sub FillChart()
  TChart1.Import.LoadFromURL("<%=outputfile %>")
End Sub

Sub TChart1_OnAfterDraw()
End Sub
</SCRIPT>

Call the FillChart script with a button or Window_Onload event:

<p><input type="button" value="Populate Chart" onclick="FillChart" name="cdmChart1"></p>

<OBJECT
   id="TChart1"
   width="400"
   height="268"
   type="application/x-oleobject"
   hspace="0"
   vspace="0"
   classid="CLSID:FCB4B50A-E3F1-4174-BD18-54C3B3287258"
   codebase="http://localhost/Teechart2012.cab#Version=9,0,0,0">
</OBJECT>

<p>TChart1 on the browser page uses the TeeChart ActiveX control, teechart2012.ocx or
teechart2012.cab loaded on the Client machine. This example uses the cabfile
definition to download TeeChart to the client machine if it doesn't already exist.</p>
</BODY></HTML>

Streaming Charts directly to the browser

TeeChart offers direct binary streaming of GIF, PNG and PCX Charts to the browser, in addition to the already existing streaming of JPEG and TEE files. This technique offers dynamic creation and exportation of TeeCharts in a variety of image formats without the need to create a temporary file on the server. The SaveToStream method is in fact applicable to all of the following formats:

  • BMP
  • GIF
  • HTML
  • JPEG
  • Metafile
  • Native (TEE)
  • PCX
  • PNG
  • Text
  • XLS
  • XML

*Note A script containing Binarywrite should be separate and autonomous from the HTML page that calls it, in a similar way to the example in this tutorial (ie. 2 separate files). Example ExportChart.asp

<!--METADATA NAME="TeeChart Pro Activex control v2012" TYPE="TypeLib"
UUID="{5006E56D-FEDE-4C64-9CC2-78C320929406}"-->
<%
' Meta data section above to permit use of TeeChart constants in script
Set Chart1 = CreateObject("TeeChart.TChart.8")

Chart1.Header.Text(0)="Performance"
Chart1.AddSeries(scCandle)
Chart1.Aspect.View3D=False

'use your methods eg via DB to populate Chart or...
Chart1.Series(0).FillSampleValues 9
Chart1.Height=500
Chart1.Width=1000

Response.BinaryWrite (Chart1.Export.asNative.SaveToStream( True ))
%>
<HTML>
<SCRIPT language=VBScript>

Sub Window_Onload()
 ' Use entire http path with LoadFromURL
 TChart1.Import.LoadFromURL("http://localhost/testscripts/ExportChart.asp")
End sub

Sub TChart1_OnAfterDraw()
End Sub

</SCRIPT>
<BODY>

<OBJECT
   id="TChart1"
   width="400"
   height="268"
   type="application/x-oleobject"
   hspace="0"
   vspace="0"
   classid="CLSID:FCB4B50A-E3F1-4174-BD18-54C3B3287258"
   codebase="http://locahost/testscripts/Teechart2012.cab#Version=9,0,0,0">
</OBJECT>


</BODY></HTML>

If exporting to Jpeg file, the syntax in the script is nearly identical (in ExportChart.asp script):

Response.BinaryWrite (Chart1.asJPEG.SaveToStream)

..and import to the HTML page would take the following form:

<IMG SRC="http://your.Chartserver.com/scripts/ExportChart.asp">

See the TeeChart ASP examples, included in the TeeChart Program Manager group, for more examples of streaming TeeChart in ASP scripts.

Native TeeChart ODBC access with ASP

TeeChart Pro ActiveX supports ASP ODBC data connections via native TeeChart properties and methods. ODBC data sources for use with ASP should be System DSNs. [ASPSample3.txt Formatted Source]

<HTML>
<HEAD><TITLE>TeeChart Native ODBC Page</TITLE></HEAD>
<BODY>
<p>This page connects a Server located Chart to an ODBC datasource and
exports/imports the Chart to the browser located TChart where it can
be zoomed/scrolled.</p>
<br>
<SCRIPT Language="VBScript" RUNAT=Server>
   SUB FillSave()
	Dim TChart1
	Set TChart1 = CreateObject("TeeChart.TChart")
	TChart1.AddSeries(1)
	TChart1.Series(0).ColorEachPoint = True
	' Set NoPrompt mode to support ASP Connection Pooling
        TChart1.Environment.NoPromptDBConnect = True
        TChart1.Series(0).DataSource = "DSN=mySystemDSN;UID=Myname;PWD=myPassword; sql=SELECT * FROM myTable"
        TChart1.Series(0).LabelsSource = "MyNameColumn"
        TChart1.Series(0).YValues.ValueSource = "MyValuesColumn"
        TChart1.Series(0).CheckDatasource
   	TChart1.Export.SaveToFile "c:\myChartdir\mychart.tee"
   END SUB
</SCRIPT>

<!-- Call the FillSave() function -->
<%FillSave%>
<object
   id="TeeCommander1"
   width="500"
   height="32"
   type="application/x-oleobject"
   hspace="0"
   vspace="0"
   classid="CLSID:34CE48EE-8287-4AF4-A28E-A12CA6597107">
</object>
<OBJECT classid="clsid:FCB4B50A-E3F1-4174-BD18-54C3B3287258"
  codebase="TeeChart2012.ocx#Version=9,0,0,0"
  id=TChart1
  TYPE="application/x-oleobject"
  width=500
  height=250
  align=center
  hspace=0
  vspace=0
  >
</OBJECT>
<SCRIPT Language="VBScript">
  TChart1.Import.LoadFromURL( "http://myServer/myChartDir/mychart.tee" )
  'where the above import folder directs to the save folder for the Chart
  TeeCommander1.Chart=TChart1
</SCRIPT>
</BODY>
</HTML>

Native TeeChart ADO access with ASP

The following example uses ADO to access the ODBC datasource. [ASPSample4.txt Formatted Source]

<% LANGUAGE="VBSCRIPT" %>
<html>

<head>
<script LANGUAGE="VBScript">
<!--
Sub window_onload()
  Chart.Import.LoadFromURL("http://localhost/testscripts/myChart.tee")
end sub
-->
</script>

<title>TeeChart ADO ODBC Access</title>
</head>
<p><script LANGUAGE="VBScript">
<!--
Sub Chart_OnDblClick()
  call Chart.ShowEditor()
end sub
-->
</script>
<OBJECT
   id="Chart"
   width="400"
   height="268"
   type="application/x-oleobject"
   hspace="0"
   vspace="0"
   classid="CLSID:FCB4B50A-E3F1-4174-BD18-54C3B3287258"
   codebase="http://localhost/Teechart2012.cab#Version=9,0,0,0">
</OBJECT>


</p>
<%
	Dim Chart
	Set Conn = Server.CreateObject("ADODB.Connection")
	Set RS = Server.CreateObject("ADODB.RecordSet")
	Conn.Open "TeeChart Pro System db"
        RS.Open "select * from [employee]", Conn, 1,1
	Set Chart = Server.CreateObject("TeeChart.TChart")
	Chart.AddSeries(0)
	Chart.AddSeries(0)
	Chart.Series(0).Color=&H00FF0000
	Chart.Series(0).Title="My data Series"
        Chart.Series(0).DataSource = RS
	Chart.Series(0).LabelsSource = "LastName"
	Chart.Series(0).YValues.ValueSource = "Salary"
	Chart.Series(0).CheckDataSource
	Conn.Close
	Chart.Series(1).Title="Average"
	Chart.Series(1).SetFunction(5)
	Chart.Series(1).Color=&H0040FF00
	Chart.Series(1).DataSource = "Series0"
	Chart.Series(1).FunctionType.Period = 0
	Chart.Left=5
	Chart.Top=5
	Chart.Export.SaveToFile("c:\inetpub\wwwroot\testscripts\MyChart.tee")
	Set Chart = Nothing
%>
</body>
</html>

Naming TeeChart files in a multiuser environment

Assuming you have written a process that creates TeeCharts dynamically at runtime according to user demand, either .tee or jpeg files, it will be necessary to build in a naming mechanism to allows new files to be created whilst others are in use. IIS caches files for a limited time (up to 30 secs) preventing their being overwritten. There are several options for dynamic naming of Charts, a couple are listed here:

    • Use the IP address of the caller's machine and/or Session id and timestamp as part of the filename.
      The session information of the caller's machine may be extracted from the user http request.

Applied example The example creates and exports a Chart as a .tee and .jpg file using dynamic naming, then imports both Charts to the Client browser page.

<HTML>
<%
dim filePath
dim httpPath
dim outputTeefile
dim outputJpegfile

' where server filepath locates to the same as URL httpPath below it
filePath = "e:\inetpub\wwwroot\testscripts\"
httpPath = "http://localhost/testscripts/"
' Session and timestamping the exported Charts
outputTeefile = "Chart" & Session.Sessionid & Replace(Time,":","") & ".tee"
outputJpegfile = "Chart" & Session.Sessionid & Replace(Time,":","") & ".jpg"
Set Chart1 = CreateObject("TeeChart.TChart")
Chart1.AddSeries(1)
'use your methods eg via DB to populate Chart or...
Chart1.Series(0).FillSampleValues 20
' Saving as tee and JPEG file
Chart1.Export.asNative.SaveToFile filepath & outputTeefile, True
Chart1.Export.asJPEG.CompressionQuality = 100
Chart1.Export.asJPEG.Height = 290
Chart1.Export.asJPEG.Width = 450
Chart1.Export.asJPEG.SaveToFile filepath & outputJpegfile
%>
<HEAD></HEAD><BODY>
<p>In the client section of the page you can display JPEG or Live Charts.</p>

<SCRIPT LANGUAGE=VBSCRIPT>
Sub FillChart()
  ' Import tee file
  'msgbox "<%=httpPath%><%=outputTeefile %>"
  TChart1.Import.LoadFromURL("<%=httpPath%><%=outputTeefile %>")
End Sub
Sub TChart1_OnAfterDraw()
' The Live Chart brings advantage of being scriptable..eg:
TChart1.Canvas.Font.Color = RGB(240,240,50)
TChart1.Canvas.Font.Bold=True
If TChart1.SeriesCount > 0 then
 If TChart1.Series(0).Count > 0 then
   TChart1.Canvas.TextOut TChart1.Axis.Left.Position, _
                         TChart1.Axis.Top.Position - 18, _
                         "Max point: " & TChart1.Series(0).YValues.Maximum
 End if
End if
end sub
</SCRIPT>

<p>Here loading the Chart with a button (or could use IE Window_Onload event):</p>
<p><input type="button" value="Populate Chart" onclick="FillChart" name="cdmChart1"></p>

<OBJECT ID="TChart1" WIDTH=450 HEIGHT=290
 CLASSID="CLSID:FCB4B50A-E3F1-4174-BD18-54C3B3287258">
</OBJECT>
<!--Import JPEG file-->
<IMG SRC=<%=httpPath%><%=outputJpegfile%>></A>

</BODY></HTML>


    • Use the FileSystemObject to create a random name.
<HTML>
<%
dim filePath
dim httpPath
dim outputTeefile
dim outputJpegfile

'====== below, temp filename
Dim TempFileName

Set fs = CreateObject("Scripting.FileSystemObject")
TempFileName = fs.GetTempName
'Remove extension
TempFileName = Trim(Left(TempFileName, Len(TempFileName) - 3))
'Place in required extensions
outputTeefile = TempFileName  & "tee"
outputJpegfile = TempFileName  & "jpg"
'====== above, temp filename

' where server filepath locates to the same as URL below
filePath = "d:\data\ChartFiles\"
httpPath = "http://myserver/ChartFiles/"

'===========
' Chart creation and save code
' see prior example
'===========
' ...etc.......
    • ..or use the Windows registry to create, use and cycle a finite number of predefined filenames.


Use of TeeChart constants in ASP

ASP won't inherently support TeeChart's constants unless you reference the Type Library (see below). If you don't reference the Type Library you need to use the integer equivalent of the constants when requiring to reference them. Example

' instead of:
TChart1.AddSeries(scBar)
' use...
TChart1.AddSeries(1)  'ESeriesClass in help

All integer equivalents for TeeChart constants are listed in the TeeChart helpfile under their specific type name. A quick summary can be found by looking at the TeeChart constants files in the IIS examples folder.
You could include the constants files in your ASP scripts as an alternative to the technique outlined below.

  • VBScript constants: TChartConsts.vbs
  • JScript constants: TChartConsts.js

TeeChart constants may be incorporated into a script by adding a reference at the beginning of the script (or global.asa file) to the TeeChart Type Library. Example - Script file with referenced constants

<!--METADATA NAME="TeeChart Pro Activex control v2012" TYPE="TypeLib" UUID="{5006E56D-FEDE-4C64-9CC2-78C320929406}"-->
<%
' The metadata line above should appear on one line

' ************
' your asp script
' ************

%>

PREVIOUS

NEXT


© 1998-2018 Steema Software SL. All rights reserved.