LT Diagram Builder - PHP & ASP versions

Since version 3.0 you can generate images of coordinate diagrams (resp. charts or graphs) at serverside (using PHP or ASP) and save it as file or send it back as a stream. These 2 versions are independent from the clientside JavaScript version of the script. The method calls of the 2 scripts are very similar to the method calls of the JavaScript version. However, the methods for changing the properties of objects (MoveTo, ResizeTo, SetColor, etc.) are not available, because it is not possible to change these properties after the image has been created. Because of this, the bar, box, dot, pixel, line, area, arrow and pie objects in the JavaScript version, are methods of the diagram object in the PHP and ASP version. The usage of the script versions is shown in the following table:

Include the script file
JavaScript<SCRIPT Language="JavaScript" src="diagram.js"></SCRIPT>
PHPinclude ("diagram.php");
ASP<!--#include file="diagram.asp"-->
Generate a new diagram
JavaScript //_DiagramTarget=window; //only necessary, if the target is not the current window
D=new Diagram();
PHP$D=new Diagram();
$D->Img=@ImageCreate(480, 320) or die("Cannot create a new GD image.");
ImageColorAllocate($D->Img, 255, 255, 255); //background color
ASP Set D=New Diagram
Set D.Img=CreateObject("gdImage.Images.1")
D.Img.ImageCreate 480, 320
D.Img.ImageColorAllocate 0,255,255,255 'Background Color
Add a bar, box, dot, etc...
JavaScript new Bar(10, 20, 80, 40, "#ff0000", "This is Text", "#000000", "This is TooltipText", "alert(\"This is onClick event.\")");
PHP $D->Bar(10, 20, 80, 40, "#ff0000", "This is Text", "#000000", "This is TooltipText", "alert(\"This is onClick event.\")");
ASP D.Bar 10, 20, 80, 40, "#ff0000", "This is Text", "#000000", "This is TooltipText", "alert(""This is onClick event."")"
Save the image as file
JavaScript//not available and not necessary
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
Send the image from the server back to the client as a stream
JavaScript//not available and not necessary
PHP header("Content-type: image/png");
ImagePng($D->Img);
ImageDestroy($D->Img);
ASP 'There is no direct support but you can get it working this way:
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

Differences between JavaScript version and PHP/ASP version

In JavaScript you can use code like
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;";
 to set the font for the Diagram object or the Bar/Box object.
In PHP (ASP) you will use code like
$D->Font=4; D.Font=4
$D->BFont=5; D.BFont=5
to set the font(1..5) for the Diagram object or the Bar/Box object.
You can set the font of the bar and box object BFont to -1..-5 for vertical text.
For vertical text of the X-axis use a Font value from -1..-5.

In JavaScript you can use the result of the predefined JavaScript function
Date.UTC(2001,0,1,0,0,0); //date/time: year, month(0..11), day, hour, min, sec
as argument for the SetBorder method of a diagram with date/time scale.
In PHP (ASP) you can use the function
UTC(2001,1,1,0,0,0); UTC(2001,1,1,0,0,0) //date/time: year, month(1..12), day, hour, min, sec
which is defined in the script file diagram.php diagram.asp.
Take care with the difference in the argument for the month!

PHP version

You can use the following methods:
  • $D=new Diagram() //Constructor
  • $D->SetFrame($theLeft, $theTop, $theRight, $theBottom) //Screen
  • $D->SetBorder($theLeftX, $theRightX, $theBottomY, $theTopY) //World
  • $D->SetText($theScaleX, $theScaleY, $theTitle) //Labels (optional)
  • $D->ScreenX($theRealX) //Coordinate transformation world->screen
  • $D->ScreenY($theRealY) //Coordinate transformation world->screen
  • $D->RealX($theScreenX) //Coordinate transformation screen->world
  • $D->RealY($theScreenY) //Coordinate transformation screen->world
  • $D->GetXGrid() //returns array, which contains min, delta and max of the X grid
  • $D->GetYGrid() //returns array, which contains min, delta and max of the Y grid
  • $D->SetGridColor($theGridColor[, $theSubGridColor]) //Colors of X and Y grid lines
  • $D->SetXGridColor($theGridColor[, $theSubGridColor]) //Colors of X grid lines
  • $D->SetYGridColor($theGridColor[, $theSubGridColor]) //Colors of Y grid lines
  • $D->Draw($theDrawColor, $theTextColor, $isScaleText[, $theTooltipText[, $theOnClickAction[, $theOnMouseoverAction[, $theOnMouseoutAction]]]]) //Display
Before drawing, you can set the following properties:
  • $D->XScale // 0 = no scale; 1 = numeric (default); 2, 3, ... = date/time; string = numeric+unit
    "function FunctionName" = FunctionName(ScaleValue)
  • $D->YScale // 0 = no scale; 1 = numeric (default); 2, 3, ... = date/time; string = numeric+unit
    "function FunctionName" = FunctionName(ScaleValue)
  • $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 //Grid interval in X-direction, if it is 0 (default) it will be detected automatically
  • $D->YGridDelta //Grid interval in Y-direction, if it is 0 (default) it will be detected automatically
  • $D->XSubGrids //Number of Sub-Grid intervals within one Grid interval in X-direction, if it is 0 (default) it will be detected automatically, if it is -1 then a logarithmic Sub-Grid will be drawn
  • $D->YSubGrids //Number of Sub-Grid intervals within one Grid interval in Y-direction, if it is 0 (default) it will be detected automatically, if it is -1 then a logarithmic Sub-Grid will be drawn
  • $D->Font //Text style for scale text (1..5), default=4
  • $D->BFont //Text style for bar and box text (1..5), default=5
After calling $D->GetXGrid() / $D->GetYGrid() you can read:
  • $D->XGrid[0], $D->XGrid[1] and $D->XGrid[2] // min, delta and max of the X grid
  • $D->YGrid[0], $D->YGrid[1] and $D->YGrid[2] // min, delta and max of the Y grid
For the display of data you can use the following methods:
  • $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 language

You can use the following methods:
  • D=New Diagram 'Constructor
  • D.SetFrame theLeft, theTop, theRight, theBottom 'Screen
  • D.SetBorder theLeftX, theRightX, theBottomY, theTopY 'World
  • D.SetText theScaleX, theScaleY, theTitle 'Labels (optional)
  • D.ScreenX(theRealX) 'Coordinate transformation world->screen
  • D.ScreenY(theRealY) 'Coordinate transformation world->screen
  • D.RealX(theScreenX) 'Coordinate transformation screen->world
  • D.RealY(theScreenY) 'Coordinate transformation screen->world
  • D.GetXGrid 'returns array, which contains min, delta and max of the X grid
  • D.GetYGrid 'returns array, which contains min, delta and max of the Y grid
  • D.SetGridColor theGridColor, theSubGridColor 'Colors of X and Y grid lines
  • D.SetXGridColor theGridColor, theSubGridColor 'Colors of X grid lines
  • D.SetYGridColor theGridColor, theSubGridColor 'Colors of Y grid lines
  • D.Draw theDrawColor, theTextColor, isScaleText, theTooltipText, theEventActions 'Display
Before drawing, you can set the following properties:
  • D.XScale ' 0 = no scale; 1 = numeric (default); 2, 3, ... = date/time; string = numeric+unit
    "function FunctionName" = FunctionName(ScaleValue)
  • D.YScale ' 0 = no scale; 1 = numeric (default); 2, 3, ... = date/time; string = numeric+unit
    "function FunctionName" = FunctionName(ScaleValue)
  • 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 'Grid interval in X-direction, if it is 0 (default) it will be detected automatically
  • D.YGridDelta 'Grid interval in Y-direction, if it is 0 (default) it will be detected automatically
  • D.XSubGrids 'Number of Sub-Grid intervals within one Grid interval in X-direction, if it is 0 (default) it will be detected automatically, if it is -1 then a logarithmic Sub-Grid will be drawn
  • D.YSubGrids 'Number of Sub-Grid intervals within one Grid interval in Y-direction, if it is 0 (default) it will be detected automatically, if it is -1 then a logarithmic Sub-Grid will be drawn
  • D.Font 'Text style for scale text (1..5), default=4
  • D.BFont 'Text style bar and box text (1..5), default=5
After calling D.GetXGrid / D.GetYGrid you can read:
  • D.XGrid(0), D.XGrid(1) and D.XGrid(2) ' min, delta and max of the X grid
  • D.YGrid(0), D.YGrid(1) and D.YGrid(2) ' min, delta and max of the Y grid
For the display of data you can use the following methods:
  • 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
For theEventActions use either theOnClickAction or
Array(theOnClickAction, theOnMouseoverAction, theOnMouseoutAction)