LOGO UOL HOST

Como usar o componente Chart Director?

O componente Chart Director permite a criação de vários tipos de gráficos desde os mais simples, como gráficos em formato de pizza, formato de barra.
 
Exemplo de gráfico em formato de pizza:
 
<%@ language="vbscript" %>
<%
' Baseado em exemplo do ChartDirector
' Criar objeto de API do ChartDirector
Set cd = CreateObject("ChartDirector.API")
 
' Verificar ângulo inicial e direção
angle = 0
clockwise = True
If Request("img") <> "0" Then
angle = 90
clockwise = False
End If
 
' Dados para o gráfico de Pizza (ou PieChart em inglês)
data = Array(55, 25, 14, 15, 16, 25, 50)
 
' Rótulos para o gráfico de Pizza
labels = Array("Salários", "Licenças", "Impostos", "Jurídico", "Seguro", "Facilities", _
"Produção")
 
' Criar um objeto PieChart de tamanho 280 x 240 pixels
Set c = cd.PieChart(280, 240)
 
' Configurar o centro do gráfico em (140, 130) e o raio de 80 pixels
Call c.setPieSize(140, 130, 80)
 
' Acrescentar título ao gráfico para mostrar o angulo e diretcao
If clockwise Then
Call c.addTitle("Ângulo Inicial = " & angle & _
" graus<*br*>Direção = Horário")
Else
Call c.addTitle("Ângulo Inicial = " & angle & _
" graus<*br*>Direção = Anti-Horário")
End If
 
' Definir angulo e direcao iniciais
Call c.setStartAngle(angle, clockwise)
 
' Desenhar o grafico 3D
Call c.set3D()
 
' Definir os dados e Rótulos do gráfico
Call c.setData(data, labels)
 
' Salientar o primeiro setor (index = 0)
Call c.setExplode(0)
 
' Mostrar o gráfico
Response.ContentType = "image/png"
Response.BinaryWrite c.makeChart2(cd.PNG)
Response.End
%>
 
 
Exemplo de gráfico em formato de barra:
 
<%@ language="vbscript" %>
<%
' Baseado no exemplo fornecido junto com o ChartDirector
' Definir objeto do tipo ChartDirector
Set cd = CreateObject("ChartDirector.API")
 
 
' Dados para criar o gráfico de barras
data = Array(6.5, 4.5, -2.7, 3.7, -3.4, 5.3)
labels = Array("Jan", "Fev", "Mar", "Abr", "Mai", "Jun")
 
' Criar objeto para gráfico tipo XYChart do tamanho 400 x 360 pixels
Set c = cd.XYChart(400, 360)
 
' Define uma área de Gráfico de (60, 40) e do tamanho de 280 x 260 pixels
Call c.setPlotArea(60, 40, 280, 260)
 
' Configurar o eixo de acordo com o parâmetro de Entrada
If Request("img") = "0" Then
Call c.addTitle("No Axis Extension", "arial.ttf", 8)
ElseIf Request("img") = "1" Then
Call c.addTitle("Top/Bottom Extensions = 0/0", "arial.ttf", 8)
' Reservar margem de 20% no topo da área de gráfico com auto-scaling
Call c.yAxis().setAutoScale(0, 0)
ElseIf Request("img") = "2" Then
Call c.addTitle("Top/Bottom Extensions = 0.2/0.2", "arial.ttf", 8)
' Reservar margem de 20% nas partes superior e inferior da área de gráfico com auto-scaling
Call c.yAxis().setAutoScale(0.2, 0.2)
ElseIf Request("img") = "3" Then
Call c.addTitle("Axis Top Margin = 15", "arial.ttf", 8)
' Reservar 15 pixels no topo da área de gráfico
Call c.yAxis().setMargin(15)
Else
Call c.addTitle("Escala Manual -5 to 10", "arial.ttf", 8)
' Configurar eixo y para escala de -5 a 10, com ticks a cada 5 unidades
Call c.yAxis().setLinearScale(-5, 10, 5)
End If
 
' Configurar os rótulos no eixo x
Call c.xAxis().setLabels(labels)
 
' Acrescentar uma camada de barras coloridas usando os dados. Usar uma borda 3D de 1pixel para as barras.
Call c.addBarLayer3(data).setBorderColor(-1, 1)
 
' Gerar o gráfico
Response.ContentType = "image/png"
Response.BinaryWrite c.makeChart2(cd.PNG)
Response.End
%>
 
 
 
Exemplo de gráfico em formato de bolhas:
 
<%@ language="vbscript" %>
<%
' Baseado no exemplo fornecido com o ChartDirector
' Criar objeto do tipo ChartDirector
Set cd = CreateObject("ChartDirector.API")
 
' Definir os pontos do gráfico de bolhas
dataX0 = Array(140, 310, 1200, 1650)
dataY0 = Array(15, 65, 35, 65)
dataZ0 = Array(30, 40, 50, 75)
 
dataX1 = Array(400, 1010, 1400)
dataY1 = Array(45, 50, 75)
dataZ1 = Array(40, 65, 90)
 
' Criar objeto XYChart do tamanho de 450 x 420 pixels
Set c = cd.XYChart(450, 420)
 
' Definir a área de gráfico em (55, 65) e de tamanho 350 x 300 pixels, com uma borda cinza clara
' (0xc0c0c0). Ativar linhas de grid horizontais e verticais de cor cinza clara
' (0xc0c0c0)
Call c.setPlotArea(55, 65, 350, 300, -1, -1, &Hc0c0c0, &Hc0c0c0, -1)
 
' Acrescentar caixa com legenda em (50, 30) (top of the chart) com layout horizontal.
' Usar fonta Times Bold Italic, de 12pts. Definir cor de fundo e bordas transparentes.
Call c.addLegend(50, 30, False, "timesbi.ttf", 12).setBackground(cd.Transparent)
 
' Acrescentar título ao gráfico usando fonte 18 pts Times Bold Italic.
Call c.addTitle("Gráfico de Comparação de Produtos", "timesbi.ttf", 18)
 
' Acrescentar um título ao eixo y usando fonte 12 pts Arial Bold Italic
Call c.yAxis().setTitle("Capacidade (tons)", "arialbi.ttf", 12)
 
' Acrescentar um título ao eixo x usando fonte 12 pts Arial Bold Italic font
Call c.xAxis().setTitle("Autonomia (milhas)", "arialbi.ttf", 12)
 
' Definir espessura da linha dos eixos como 3 pixels
Call c.xAxis().setWidth(3)
Call c.yAxis().setWidth(3)
 
' Acrescentar (dataX0, dataY0) como scatter layer com símbolos de circulos 
' semi-transparentes (0x80ff3333), onde o tamanho do círculo é modulado por dataZ0.
' Isto cria um efeito de bolha
Call c.addScatterLayer(dataX0, dataY0, "Tecnologia A", cd.CircleSymbol, 9, _
&H80ff3333, &H80ff3333).setSymbolScale(dataZ0)
 
' Acrescentar (dataX1, dataY1) como scatter layer com símbolos de círculos
' semi-transparentes (0x803333ff), onde o tamanho do círculo é modulado por dataZ1.
' Isto cria um efeito de bolha
Call c.addScatterLayer(dataX1, dataY1, "Tecnologia B", cd.CircleSymbol, 9, _
&H803333ff, &H803333ff).setSymbolScale(dataZ1)
 
' Gerar o gráfico
Response.ContentType = "image/png"
Response.BinaryWrite c.makeChart2(cd.PNG)
Response.End
%>
 
 
Exemplo de gráfico em formato de Gantt:
 
<%@ language="vbscript" %>
<%
' Exemplo baseado no codigo fornecido com o ChartDirector
' Criar objeto para ChartDirector API
Set cd = CreateObject("ChartDirector.API")
 
' Dados para grafico de Gantt, representando as dadas de inicio, fim e nomes para as
' atividades
startDate = Array(DateSerial(2008, 2, 27), DateSerial(2008, 2, 28), DateSerial( _
2008, 3, 1), DateSerial(2008, 3, 15), DateSerial(2008, 3, 17), DateSerial( _
2008, 3, 20), DateSerial(2008, 3, 22), DateSerial(2008, 3, 25), DateSerial( _
2008, 4, 2))
endDate = Array(DateSerial(2008, 2, 30), DateSerial(2008, 3, 13), DateSerial(2008, _
3, 16), DateSerial(2008, 3, 20), DateSerial(2008, 3, 21), DateSerial(2008, 3, _
26), DateSerial(2008, 3, 26), DateSerial(2008, 4, 2), DateSerial(2008, 4, 5))
labels = Array("Pesquisa de Mercado", "Especificação Funcional", "Definir Arquitetura Geral", _
"Planejamento do Projeto", "Design Detalhado", "Desenv. de Software", "Planejamento de Testes", _
"Testes e QA", "Documentação Final")
 
' Criar um bojeto XYChart do tamanho de 620 x 280 pixels. Definir cor de fundo como
' azul claro (ccccff), com borda com efeito 3D de 1 pixel.
Set c = cd.XYChart(620, 280, &Hccccff, &H000000, 1)
 
' Acrescentar titulo ao grafico usando fonte 15 points Times Bold Itatic,
' com texto em branco (ffffff) sobre fundo azul (000080)
Call c.addTitle("Exemplo de Gráfico de Gantt Simples", "timesbi.ttf", 15, &Hffffff _
).setBackground(&H000080)
 
' Definir área de gráfico em (140,55) e do tamanho de 460 x 200 pixels. Usar fundo 
' branco/cinza. Habilitar grids horizontal e vertical com cor cinza(c0c0c0).
' Definir vertical major grid (representa limites de meses) com espessura de 2 pixels
Call c.setPlotArea(140, 55, 460, 200, &Hffffff, &Heeeeee, cd.LineColor, &Hc0c0c0, _
&Hc0c0c0).setGridWidth(2, 1, 1, 1)
 
' Trocar eixos x e y para criar gráfico horizontalxes
Call c.swapXY()
 
' Definir escala de eixo y para ser entra as datas 17 Fev 2008 até 12 Abr 2008, com ticks
' a cada 7 dias (1 semama)
Call c.yAxis().setDateScale(DateSerial(2008, 2, 17), DateSerial(2008, 4, 12), _
86400 * 7)
 
' Definir formatação de eixo com múltiplos estilos. Rótulos de meses em fonte Arial Bold,
' no formato "MM D". Rotulos semanais apenas mostram o dia do mes e usa um minor tick
' (usando - como primeiro caracter de string de formato).
Call c.yAxis().setMultiFormat(cd.StartOfMonthFilter(), _
"<*font=arialbd.ttf*>{value|mmm d}", cd.StartOfDayFilter(), "-{value|d}")
 
' Definir mostrar eixo y no topo (right + swapXY = top)
Call c.setYAxisOnRight()
 
' Definir rótulos no eixo x
Call c.xAxis().setLabels(labels)
 
' Reverter escala no eixo x para ir para baixo.
Call c.xAxis().setReverse()
 
' Definir ticks horizontais e linhas de grid para serem entre barras
Call c.xAxis().setTickOffset(0.5)
 
' Acrescentar green (33ff33) box-whisker layer mostrando a caixa apenas.
Call c.addBoxWhiskerLayer(startDate, endDate, Empty, Empty, Empty, &H00cc00, _
cd.SameAsMainColor, cd.SameAsMainColor)
 
' Desenhar o gráfico
Response.ContentType = "image/png"
Response.BinaryWrite c.makeChart2(cd.PNG)
Response.End
%>

Assuntos recentes

Atendimento Online

Somente para assinantes

Fale com um dos nossos atendentes especializados via chat ou envie um e-mail.

Iniciar Chat ou Enviar E-mail

Central de atendimento

Atendimento 24 horas por dia, 7 dias por semana.

Se preferir você pode entrar em contato com a nossa central de atendimento

4003 9011 Capítais e regiões metropolitanas

0800 881 9011 Demais localidades