Tutorial 9 - Internet applications

  Contents page 
  Previous | Next 

Contents

Creating JPEG Charts
Writing ISAPI applications
Putting TeeChart in Delphi's ActiveForm
Charting HTML tables


TeeChart Pro VCL version offers several possibilities for Internet/Intranet Charting. There are several demos included in the  Examples folder for guidance on the following topics.

Creating JPEG Charts

TeeChart can be exported as a JPEG image to be linked into a web page. See the JPEG section in the Export/Import tutorial for a closer look at the code required to Export the Chart to JPEG format. The chart can be accessed on the webpage via a standard image link.

Example
<img src="http://www.myserver.here/tempCharts/myJPEGChart.jpg">

JPEG Charts do not offer the advantages of a "live" Chart, such as mouse clicks, real-time animation, scrolling, etc, but they work with almost any browser.

Writing ISAPI applications

Delphi 3 and 4 make writing ISAPI applications very easy. See the TeeChart ISAPI example in the TeeChart Examples folder for a demonstration of a basic Charting application. A section is included below to show how the Chart is sent to the page in Stream format.

{ This event is created at design-time, double-clicking the WebModule
  form and adding an action... }
procedure TWebModule1.WebModule1WebActionItem1Action(Sender: TObject;
  Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
Var Stream:TMemoryStream;
begin
  With TForm2.Create(Self) do { create the Form where is the Chart1... }
  try
    //See the ISAPI demo for a full listing of the code that creates the Chart
    //taking parameters from a Web Form as input.
    With ChartToJPEG(Request) do { convert Chart1 to JPEG Function in UnitChart Unit}
    try
      Stream:=TMemoryStream.Create;  { create a temporary stream in memory... }
      try
        SaveToStream(Stream); { save the jpeg to the stream... }
        Stream.Position := 0;
        Response.ContentType:='image/jpeg';   { send the stream... }
        Response.ContentStream:=Stream;
        Response.SendResponse;
      finally
        Stream.Free;  { release the temporary stream... }
      end;
    finally
      Free;  { <-- free the temporary JPEG object returned by ChartToJPEG }
    end;
  finally
    Free; { free the Form2 }
  end;
end;

Putting TeeChart in Delphi's ActiveForm

Go to the TeeChart Examples folder for a working example of TeeChart as an ActiveForm application. To create a new ActiveForm application select 'New','Activex','ActiveForm' from the File menu in Delphi's IDE.

If you have Internet Explorer or other ActiveX aware browser you should see a TeeChart ActiveForm example displayed below:

You can add properties and methods to the Activeform object to give runtime functionality to the Chart. For example for the Chart above we added the 'Gradient.Visible' property to enable/disable the Panel Gradient behind the Chart. Press this button to see how it changes the Chart:

How to add a TeeChart property to ActiveForm with Delphi
Follow these steps to add a Chart property to an ActiveForm project:

  • 1. Use the Delphi Type Library Editor to add a property to your ActiveForm project
  • 2. In this case we define the property as Property Gradient:WordBool;
  • 3. Use the Type Library 'refresh' button to update the implementation unit of your project.
  • 4. Delphi will create an empty Get function and Set procedure for the new property in the implementation unit of the project. You can add access to the required TeeChart property by populating the function and procedure as follows:
  • function TTeeVCLAX.Get_Gradient: WordBool;
    begin
      result:=Chart1.Gradient.Visible;
    end;
    
    procedure TTeeVCLAX.Set_Gradient(Value: WordBool);
    begin
      Chart1.Gradient.Visible:=Value;
    end;
    

    Compiling the modified project now gives you access to this property with a browser scripting language such as VBScript. The VBScript code listed below is used for the button in this example:

    <SCRIPT LANGUAGE="VBScript">
    SUB ToggleGradient
            if TeeVCLAX1.Gradient = 0 then
              TeeVCLAX1.Gradient = 1   'replace TRUE/FALSE with numeric equivalents
            else
              TeeVCLAX1.Gradient = 0
            end if
    END SUB
    </SCRIPT>
    <INPUT TYPE=BUTTON VALUE="Example: Toggle Back Panel Gradient using VBScript" NAME="cdmChartColor" onClick="ToggleGradient">
    

    For this type of Charting application you may find the LoadChartFromURLmethod useful as it permits a means of distributing centrally modified Charts. A timer could be placed on the ActiveForm application to call a periodically updated, server based Chart thus guaranteeing that the browser Chart data is current.


    Charting HTML tables

    Have a look at the Examples folder for a working example of HTML table import.  HTML Example code





    © 1998 teeMach SL. All rights reserved.