LT Diagram Builder - versões PHP & ASP

Desde que a versão 3.0 você pode gerar imagens de diagramas coordenados (resp. cartas ou gráficos) no serverside (usando PHP ou ASP) e salvar como um arquivo ou emitir para trás como um stream. Estas 2 versões são independentes da versão Javascript (clientside) do scripte. Os métodos dos 2 scripts são muitos similares dos métodos da versão Javascript. Entretanto, os métodos para mudar as proprios dos objetos (MoveTo, ResizeTo, SetColor, etc..) não esteja disponível, porque não é possível mudar estas proprios depois que a imagem foi criada. Por causa deste, os objetos Bar, Box, Dot, Pixel, Line, Area, Arrow e Pie na versão do Javascript, são métodos do objeto Diagram na versões PHP e ASP. O uso das versões do script é mostrado na seguinte tabela:

Incluir o arquivo do script
JavaScript<SCRIPT Language="JavaScript" src="diagram.js"></SCRIPT>
PHPinclude ("diagram.php");
ASP<!--#include file="diagram.asp"-->
Generate a new diagram
JavaScript //_DiagramTarget=window; //somente necessário, se o alvo não for a janela atual
D=new Diagram();
PHP$D=new Diagram();
$D->Img=@ImageCreate(480, 320) or die("Não posso criar uma imagem nova de GD.");
ImageColorAllocate($D->Img, 255, 255, 255); //cor do fundo
ASP Set D=New Diagram
Set D.Img=CreateObject("gdImage.Images.1")
D.Img.ImageCreate 480, 320
D.Img.ImageColorAllocate 0,255,255,255 'cor do fundo
adicionar um Bar, Box, Dot, etc...
JavaScript new Bar(10, 20, 80, 40, "#ff0000", "Este é texto", "#000000", "Este é TooltipText", "alert(\"Este é evento onClick.\")");
PHP $D->Bar(10, 20, 80, 40, "#ff0000", "Este é texto", "#000000", "Este é TooltipText", "alert(\"Este é evento onClick.\")");
ASP D.Bar 10, 20, 80, 40, "#ff0000", "Este é texto", "#000000", "Este é TooltipText", "alert(""Este é evento onClick."")"
Salvar a imagem como arquivo
JavaScript//não disponível e não necessário
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
Emitir a imagem do server para trás ao cliente como um stream
JavaScript//não disponível e não necessário
PHP header("Content-type: image/png");
ImagePng($D->Img);
ImageDestroy($D->Img);
ASP 'Não há nenhuma função direta, mas você pode fazer desta maneira:
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

Diferenças entre a versão JavaScript e a versão PHP/ASP

No Javascript você pode usar o código como
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;";
 para ajustar o estilo do texto para o objeto Diagram ou os objetos Bar/Box.
Em PHP (ASP) você usará o código como
$D->Font=4; D.Font=4
$D->BFont=5; D.BFont=5
para ajustar o font(1..5) para o objeto Diagram ou os objetos Bar/Box.
Você pode ajustar o estilo do texto do Bar e Box BFont = -1..-5 para obter texto vertical.
Para obter texto vertical do X-escala use valor do Font entre -1..-5.

No Javascript você pode usar o resultado da função predefinida do Javascript
Date.UTC(2001,0,1,0,0,0); //data/hora: ano, mês(0..11), dia, hora, minuto, segundo
como o argumento para o método de SetBorder de um diagrama com escala do data/hora.
UTC(2001,1,1,0,0,0); UTC(2001,1,1,0,0,0) //date/time: ano, month(1..12), dia, hora, minuto, segundo
qual é definido na lima diagram.php diagram.asp do script.
Em PHP (ASP) você pode usar a função
UTC(2001,1,1,0,0,0); UTC(2001,1,1,0,0,0) //data/hora: ano, mês(1..12), dia, hora, minuto, segundo
qual é definido no arquivo do script diagram.php diagram.asp.
Cuidado da tomada com a diferença no argumento para o mês!

Versão PHP

Você pode usar os seguintes métodos:
  • $D=new Diagram() //Constructor
  • $D->SetFrame($theLeft, $theTop, $theRight, $theBottom) //Tela
  • $D->SetBorder($theLeftX, $theRightX, $theBottomY, $theTopY) //Mundo
  • $D->SetText($theScaleX, $theScaleY, $theTitle) //Rótulos (opcional)
  • $D->ScreenX($theRealX) //Transformação de coordinates mundo->tela
  • $D->ScreenY($theRealY) //Transformação de coordinates mundo->tela
  • $D->RealX($theScreenX) //Transformação de coordinates tela->mundo
  • $D->RealY($theScreenY) //Transformação de coordinates tela->mundo
  • $D->GetXGrid() //Devolva array, que contem min, delta e max da grade de X
  • $D->GetYGrid() //Devolva array, que contem min, delta e max da grade de Y
  • $D->SetGridColor($theGridColor[, $theSubGridColor]) //Cor de linhas de grade de X e de Y
  • $D->SetXGridColor($theGridColor[, $theSubGridColor]) //Cor de linhas de grade de X
  • $D->SetYGridColor($theGridColor[, $theSubGridColor]) //Cor de linhas de grade de Y
  • $D->Draw($theDrawColor, $theTextColor, $isScaleText[, $theTooltipText[, $theOnClickAction[, $theOnMouseoverAction[, $theOnMouseoutAction]]]]) //Desenhar
Antes de desenhar, você pode ajustar as seguintes charaterísticas:
  • $D->XScale // 0 = nenhuma escala; 1 = numérico (default); 2, 3, ... = data/hora; string = numérico+unit
    "function FunctionName" = FunctionName(valor_da_escala)
  • $D->YScale // 0 = nenhuma escala; 1 = numérico (default); 2, 3, ... = date/time; string = numeric+unit
    "function FunctionName" = FunctionName(valor_da_escala)
  • $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 //Intervalo do grade no X-direção, se for 0 (defeito) ele será detectado automaticamente
  • $D->YGridDelta //Intervalo do grade no Y-direção, se for 0 (defeito) ele será detectado automaticamente
  • $D->XSubGrids //Numero de intervalos da sub-grade dentro de um intervalo da grade no X-direção, se for 0 (default) ele será detectado automaticamente, se for -1 então uma sub-grade logarítmica será desenhado
  • $D->YSubGrids //Numero de intervalos da sub-grade dentro de um intervalo da grade no Y-direção, se for 0 (default) ele será detectado automaticamente, se for -1 então uma sub-grade logarítmica será desenhado
  • $D->Font //Estilo de texto para escala (1..5), default=4
  • $D->BFont //Estilo de texto para texto do Bar e Box (1..5), default=5
Depois ter chamado $D->GetXGrid() / $D->GetYGrid() você pode obter:
  • $D->XGrid[0], $D->XGrid[1] and $D->XGrid[2] // min, delta e max da grade de X
  • $D->YGrid[0], $D->YGrid[1] and $D->YGrid[2] // min, delta e max da grade de Y
Para a exposição dos dados você pode usar os seguintes métodos:
  • $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]]]])

Versão ASP - língua VBScript

Você pode usar os seguintes métodos:
  • D=New Diagram 'Constructor
  • D.SetFrame theLeft, theTop, theRight, theBottom 'Tela
  • D.SetBorder theLeftX, theRightX, theBottomY, theTopY 'Mundo
  • D.SetText theScaleX, theScaleY, theTitle 'Rótulos (opcional)
  • D.ScreenX(theRealX) 'Transformação de coordinates mundo->tela
  • D.ScreenY(theRealY) 'Transformação de coordinates mundo->tela
  • D.RealX(theScreenX) 'Transformação de coordinates tela->mundo
  • D.RealY(theScreenY) 'Transformação de coordinates tela->mundo
  • D.GetXGrid 'Devolva array, que contem min, delta e max da grade de X
  • D.GetYGrid 'Devolva array, que contem min, delta e max da grade de Y
  • D.SetGridColor theGridColor, theSubGridColor 'Cor de linhas de grade de X e de Y
  • D.SetXGridColor theGridColor, theSubGridColor 'Cor de linhas de grade de X
  • D.SetYGridColor theGridColor, theSubGridColor 'Cor de linhas de grade de Y
  • D.Draw theDrawColor, theTextColor, isScaleText, theTooltipText, theEventActions 'Desenhar
Antes de desenhar, você pode ajustar as seguintes charaterísticas:
  • D.XScale ' 0 = nenhuma escala; 1 = numérico (default); 2, 3, ... = data/hora; string = numérico+unit
    "function FunctionName" = FunctionName(valor_da_escala)
  • D.YScale ' 0 = nenhuma escala; 1 = numérico (default); 2, 3, ... = data/hora; string = numérico+unit
    "function FunctionName" = FunctionName(valor_da_escala)
  • 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 'Intervalo do grade no X-direção, se for 0 (defeito) ele será detectado automaticamente
  • D.YGridDelta 'Intervalo do grade no Y-direção, se for 0 (defeito) ele será detectado automaticamente
  • D.XSubGrids 'Numero de intervalos da sub-grade dentro de um intervalo da grade no X-direção, se for 0 (default) ele será detectado automaticamente, se for -1 então uma sub-grade logarítmica será desenhado
  • D.YSubGrids 'Numero de intervalos da sub-grade dentro de um intervalo da grade no Y-direção, se for 0 (default) ele será detectado automaticamente, se for -1 então uma sub-grade logarítmica será desenhado
  • D.Font 'Estilo de texto para escala (1..5), default=4
  • D.BFont 'Estilo de texto para texto do Bar e Box (1..5), default=5
Depois ter chamado D.GetXGrid / D.GetYGrid você pode obter:
  • D.XGrid(0), D.XGrid(1) and D.XGrid(2) ' min, delta e max da grade de X
  • D.YGrid(0), D.YGrid(1) and D.YGrid(2) ' min, delta e max da grade de Y
Para a exposição dos dados você pode usar os seguintes métodos:
  • 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
Para theEventActions use ou theOnClickAction ou
Array(theOnClickAction, theOnMouseoverAction, theOnMouseoutAction)