LT Diagram Builder - PHP & ASP Versionen

Ab Version 3.0 können Bilder von Diagrammen serverseitig erzeugt werden (mittels PHP oder ASP) und als Datei gespeichert werden oder als Stream zurückgeschickt werden. Diese 2 Versionen sind unabhängig von der clientseitigen JavaScript-Version des Scripts. Die Funktionsaufrufe der 2 Scripts sind den Funktionsaufrufen der JavaScript-Version sehr ähnlich. Jedoch sind die Methoden zur Änderung der Objekteigenschaften (MoveTo, ResizeTo, SetColor, etc.) nicht verfügbar, da es nicht möglich ist, diese Eigenschaften zu ändern, nach dem das Bild erzeugt worden ist. Es wurden daher die Bar-, Box-, Dot-, Pixel-, Line-, Area-, Arrow- and Pie-Objekte der JavaScript-Version in der PHP- und ASP-Version als Methoden des Diagram-Objekts implementiert. Die Verwendung der Script-Versionen wird in folgender Tabelle veranschaulicht:

Einfügen der Script-Datei
JavaScript<SCRIPT Language="JavaScript" src="diagram.js"></SCRIPT>
PHPinclude ("diagram.php");
ASP<!--#include file="diagram.asp"-->
Erzeugen eines neuen Diagramms
JavaScript //_DiagramTarget=window; //nur notwendig, wenn Zielfenster nicht das aktuelle Fenster ist
D=new Diagram();
PHP$D=new Diagram();
$D->Img=@ImageCreate(480, 320) or die("Neues GD-Bild kann nicht erzeugt werden.");
ImageColorAllocate($D->Img, 255, 255, 255); //Hintergrundfarbe
ASP Set D=New Diagram
Set D.Img=CreateObject("gdImage.Images.1")
D.Img.ImageCreate 480, 320
D.Img.ImageColorAllocate 0,255,255,255 'Hintergrundfarbe
Hinzufügen von Bar-, Box-, Dot-Objekten, usw...
JavaScript new Bar(10, 20, 80, 40, "#ff0000", "Das ist Text", "#000000", "Das ist TooltipText", "alert(\"Das ist onClick-Ereignis.\")");
PHP $D->Bar(10, 20, 80, 40, "#ff0000", "Das ist Text", "#000000", "Das ist TooltipText", "alert(\"Das ist onClick-Ereignis.\")");
ASP D.Bar 10, 20, 80, 40, "#ff0000", "Das ist Text", "#000000", "Das ist TooltipText", "alert(""TDas ist onClick-Ereignis."")"
Speichern des Bildes als Datei
JavaScript//nicht verfügbar und nicht notwendig
PHP ImagePng($D->Img, "my_image.png");
ImageDestroy($D->Img);
ASP D.Img.ImagePng 0, Server.mappath("my_image.png")
D.Img.ImageDestroy 0
Set D.Img=Nothing
Zurücksenden des Bildes vom Server zum Client als Stream
JavaScript//nicht verfügbar und nicht notwendig
PHP header("Content-type: image/png");
ImagePng($D->Img);
ImageDestroy($D->Img);
ASP 'wird nicht direkt unterstützt, man kann es jedoch folgendermaßen realisieren:
Set objFS=Server.CreateObject("Scripting.FileSystemObject")
FN = objFS.GetTempName()
FN=Server.mappath(FN)
D.Img.ImagePng 0, FN
Set objStream = Server.CreateObject("ADODB.Stream")
objStream.Charset = "x-ansi"
objStream.Type = 2
objStream.Open
objStream.LoadFromFile FN
Response.ContentType = "image/png"
Response.AddHeader "Content-Disposition","filename=image.png"
objStream.Position = 0
objStream.Type = 1
Response.BinaryWrite objStream.Read()
objStream.Close
Set objStream = Nothing
objFS.DeleteFile FN, false
Set objFS=Nothing
D.Img.ImageDestroy 0
Set D.Img=Nothing

Unterschiede zwischen JavaScript-Version und PHP/ASP-Version

In JavaScript kann der folgende Code verwendet werden
D.Font="font-family:Verdana;font-weight:normal;font-size:10pt;line-height:13pt;";
_BFont="font-family:Verdana;font-weight:bold;font-size:10pt;line-height:13pt;";
 um den Font für ein Diagram-Objekt oder für Bar- und Box-Objekte festzulegen.
In PHP (ASP) ist der folgende Code zu verwenden
$D->Font=4; D.Font=4
$D->BFont=5; D.BFont=5
um den Font(1..5) für ein Diagram-Objekt oder für Bar- und Box-Objekte festzulegen.
Verwenden Sie als Font für Bar- und Box-Objekt BFont -1..-5 um vertikale Textausrichtung zu erreichen. Für vertikalen Text der X-Achse verwenden Sie Font-Werte aus dem Bereich -1..-5.


In JavaScript kann das Ergebnis der vordefinierten JavaScript-Funktion
Date.UTC(2001,0,1,0,0,0); //Datum/Zeit: Jahr, Monat(0..11), Tag, Std, Min, Sek
als Argument für die SetBorder-Methode eines Diagramms mit Datum/Zeit-Skale verwendet werden.
In PHP (ASP) kann die Funktion
UTC(2001,1,1,0,0,0); UTC(2001,1,1,0,0,0) //Datum/Zeit: Jahr, Monat(1..12), Tag, Std, Min, Sek
verwendet werden, die in der Script-Datei diagram.php diagram.asp definiert ist.
Beachten Sie den Unterschied im Argument für den Monat!

PHP-Version

Folgende Methoden können verwendet werden:
  • $D=new Diagram() //Konstruktor
  • $D->SetFrame($theLeft, $theTop, $theRight, $theBottom) //Bildschirm
  • $D->SetBorder($theLeftX, $theRightX, $theBottomY, $theTopY) //Welt
  • $D->SetText($theScaleX, $theScaleY, $theTitle) //Skalenbeschriftung (optional)
  • $D->ScreenX($theRealX) //Koordinatentransformation Welt->Bildschirm
  • $D->ScreenY($theRealY) //Koordinatentransformation Welt->Bildschirm
  • $D->RealX($theScreenX) //Koordinatentransformation Bildschirm->Welt
  • $D->RealY($theScreenY) //Koordinatentransformation Bildschirm->Welt
  • $D->GetXGrid() //gibt Array mit Min, Delta und Max des X-Rasters zurück
  • $D->GetYGrid() //gibt Array mit Min, Delta und Max des Y-Rasters zurück
  • $D->SetGridColor($theGridColor[, $theSubGridColor]) //Farben der X- und Y-Raster-Linien
  • $D->SetXGridColor($theGridColor[, $theSubGridColor]) //Farben der X-Raster-Linien
  • $D->SetYGridColor($theGridColor[, $theSubGridColor]) //Farben der Y-Raster-Linien
  • $D->Draw($theDrawColor, $theTextColor, $isScaleText[, $theTooltipText[, $theOnClickAction[, $theOnMouseoverAction[, $theOnMouseoutAction]]]]) //Zeichnen
Vor dem Zeichnen können die folgenden Eigenschaften gesetzt werden:
  • $D->XScale // 0 = keine Skale; 1 = numerisch (default); 2, 3, ... = Datum/Zeit; String = numerisch+Einheit
    "function FunctionName" = FunctionName(SkalenWert)
  • $D->YScale // 0 = keine Skale; 1 = numerisch (default); 2, 3, ... = Datum/Zeit; String = numerisch+Einheit
    "function FunctionName" = FunctionName(SkalenWert)
  • $D->XScalePosition // "bottom" (default), "botom-left", "bottom-right", "top", "top-left", "top-right"
  • $D->YScalePosition // "left" (default), "left-top", "left-bottom", "right", "right-top", "right-bottom"
  • $D->XGridDelta //Rasterlinien-Intervall in X-Richtung, bei 0 (default) wird dieses automatisch ermittelt
  • $D->YGridDelta //Rasterlinien-Intervall in Y-Richtung, bei 0 (default) wird dieses automatisch ermittelt
  • $D->XSubGrids //Anzahl Sub-Grid-Intervalle innerhalb eines Grid-Intervalls in X-Richtung, bei 0 (default) wird dieses automatisch ermittelt, bei -1 wird ein logarithmischer Sub-Grid gezeichnet
  • $D->YSubGrids //Anzahl Sub-Grid-Intervalle innerhalb eines Grid-Intervalls in Y-Richtung, bei 0 (default) wird dieses automatisch ermittelt, bei -1 wird ein logarithmischer Sub-Grid gezeichnet
  • $D->Font //Text-Stil für Skalenbeschriftung (1..5), default=4
  • $D->BFont //Text-Stil für Bar- und Box-Objekte (1..5), default=5
Nach dem Aufruf von $D->GetXGrid() / $D->GetYGrid() können folgende Werte gelesen werden:
  • $D->XGrid[0], $D->XGrid[1] and $D->XGrid[2] // Min, Delta und Max des X-Rasters
  • $D->YGrid[0], $D->YGrid[1] and $D->YGrid[2] // Min, Delta und Max des Y-Rasters
Zur Anzeige von Daten können folgende Methoden verwendet werden:
  • $D->Bar($theLeft, $theTop, $theRight, $theBottom, $theDrawColor[, $theText[, $theTextColor[, $theTooltipText[, $theOnClickAction[, $theOnMouseoverAction[, $theOnMouseoutAction]]]]]])
  • $D->Box($theLeft, $theTop, $theRight, $theBottom, $theDrawColor[, $theText[, $theTextColor[, $theBorderWidth[, $theBorderColor[, $theTooltipText[, $theOnClickAction[, $theOnMouseoverAction[, $theOnMouseoutAction]]]]]]]])
  • $D->Dot($theX, $theY, $theSize, $theType, $theColor[, $theTooltipText[, $theOnClickAction[, $theOnMouseoverAction[, $theOnMouseoutAction]]]])
  • $D->Pixel($theX, $theY, $theColor)
  • $D->Line($theX0, $theY0, $theX1, $theY1, $theColor[, $theSize[, $theTooltipText[, $theOnClickAction[, $theOnMouseoverAction[, $theOnMouseoutAction]]]]])
  • $D->Area($theX0, $theY0, $theX1, $theY1, $theColor[, $theBase[, $theTooltipText[, $theOnClickAction[, $theOnMouseoverAction[, $theOnMouseoutAction]]]]])
  • $D->Arrow($theX0, $theY0, $theX1, $theY1, $theColor[, $theSize[, $theTooltipText[, $theOnClickAction[, $theOnMouseoverAction[, $theOnMouseoutAction]]]]])
  • $D->Pie($theXCenter, $theYCenter, $theOffset, $theRadius, $theAngle0, $theAngle1, $theColor[, $theTooltipText[, $theOnClickAction[, $theOnMouseoverAction[, $theOnMouseoutAction]]]])

ASP-Version - VBScript

Folgende Methoden können verwendet werden:
  • D=New Diagram 'Konstruktor
  • D.SetFrame theLeft, theTop, theRight, theBottom 'Bildschirm
  • D.SetBorder theLeftX, theRightX, theBottomY, theTopY 'Welt
  • D.SetText theScaleX, theScaleY, theTitle 'Skalenbeschriftung (optional)
  • D.ScreenX(theRealX) 'Koordinatentransformation Welt->Bildschirm
  • D.ScreenY(theRealY) 'Koordinatentransformation Welt->Bildschirm
  • D.RealX(theScreenX) 'Koordinatentransformation Bildschirm->Welt
  • D.RealY(theScreenY) 'Koordinatentransformation Bildschirm->Welt
  • D.GetXGrid 'gibt Array mit Min, Delta und Max des X-Rasters zurück
  • D.GetYGrid 'gibt Array mit Min, Delta und Max des Y-Rasters zurück
  • D.SetGridColor theGridColor, theSubGridColor 'Farben der X- und Y-Raster-Linien
  • D.SetXGridColor theGridColor, theSubGridColor 'Farben der X-Raster-Linien
  • D.SetYGridColor theGridColor, theSubGridColor 'Farben der Y-Raster-Linien
  • D.Draw theDrawColor, theTextColor, isScaleText, theTooltipText, theEventActions 'Zeichnen
Vor dem Zeichnen können die folgenden Eigenschaften gesetzt werden:
  • D.XScale // 0 = keine Skale; 1 = numerisch (default); 2, 3, ... = Datum/Zeit; String = numerisch+Einheit
    "function FunctionName" = FunctionName(SkalenWert)
  • D.YScale // 0 = keine Skale; 1 = numerisch (default); 2, 3, ... = Datum/Zeit; String = numerisch+Einheit
    "function FunctionName" = FunctionName(SkalenWert)
  • D.XScalePosition // "bottom" (default), "botom-left", "bottom-right", "top", "top-left", "top-right"
  • D.YScalePosition // "left" (default), "left-top", "left-bottom", "right", "right-top", "right-bottom"
  • D.XGridDelta //Rasterlinien-Intervall in X-Richtung, bei 0 (default) wird dieses automatisch ermittelt
  • D.YGridDelta //Rasterlinien-Intervall in Y-Richtung, bei 0 (default) wird dieses automatisch ermittelt
  • D.XSubGrids //Anzahl Sub-Grid-Intervalle innerhalb eines Grid-Intervalls in X-Richtung, bei 0 (default) wird dieses automatisch ermittelt, bei -1 wird ein logarithmischer Sub-Grid gezeichnet
  • D.YSubGrids //Anzahl Sub-Grid-Intervalle innerhalb eines Grid-Intervalls in Y-Richtung, bei 0 (default) wird dieses automatisch ermittelt, bei -1 wird ein logarithmischer Sub-Grid gezeichnet
  • D.Font //Text-Stil für Skalenbeschriftung (1..5), default=4
  • D.BFont //Text-Stil für Bar- und Box-Objekte (1..5), default=5
Nach dem Aufruf von D.GetXGrid() / D.GetYGrid() können folgende Werte gelesen werden:
  • D.XGrid(0), D.XGrid(1) and D.XGrid(2) ' Min, Delta und Max des X-Rasters
  • D.YGrid(0), D.YGrid(1) and D.YGrid(2) ' Min, Delta und Max des Y-Rasters
Zur Anzeige von Daten können folgende Methoden verwendet werden:
  • D.Bar theLeft, theTop, theRight, theBottom, theDrawColor, theText, theTextColor, theTooltipText, theEventActions
  • D.Box theLeft, theTop, theRight, theBottom, theDrawColor, theText, theTextColor, theBorderWidth, theBorderColor, theTooltipText, theEventActions
  • D.Dot theX, theY, theSize, theType, theColor, theTooltipText, theEventActions
  • D.Pixel theX, theY, theColor
  • D.Line theX0, theY0, theX1, theY1, theColor, theSize, theTooltipText, theEventActions
  • D.Area theX0, theY0, theX1, theY1, theColor, theBase, theTooltipText, theEventActions
  • D.Arrow theX0, theY0, theX1, theY1, theColor, theSize, theTooltipText, theEventActions
  • D.Pie theXCenter, theYCenter, theOffset, theRadius, theAngle0, theAngle1, theColor, theTooltipText, theEventActions
Als theEventActions verwenden Sie entweder theOnClickAction oder
Array(theOnClickAction, theOnMouseoverAction, theOnMouseoutAction)