Montando gráficos na QuantumGrid 6

<< Click to Display Table of Contents >>

Navigation:  Sistemas > Gestor >

Montando gráficos na QuantumGrid 6

Previous pageReturn to chapter overviewNext page

Tela

Neste exemplo usaremos uma consulta no TB_RECEBER do sistema ADM para exemplificar gráficos + grid.

Select

select cd_receber, cd_base, nm_base, nm_cidade, cd_titulo_portador, 

  cd_titulo_carteira, cd_titulo_tipo, cd_loja, cd_caixa, r.dt_inc, 

  cast(vl_valor as float) as vl_valor

from tb_receber r

inner join tb_base b on (b.CD_BASE = r.CD_BASE_CLIENTE)

inner join tb_cidade c on (c.cd_cidade = b.CD_CIDADE)

where r.dt_inc > '04/15/2007'

 

 

2386 registros

 

cxGrid

 

Ligue o cxGridDBTableView com o DataSource e adicione os campos:

 

Clique com o botão direito sobre o cxGrid1 (verdinho) e escolha Add Level,
no cxGridLevel2 clique com botão direito e selecione Create View > DB Chart

Clique novamente no cxGrid, em propriedades mude:

RootLevelOptions.DetailTabPosition = dtpTop

 

Em cada Level, dê um caption para ele.

Como fica agora:

 

Modifique as seguintes propriedades do cxGrid1DBChartView:

Dê um duplo clique no gráfico (sobre o form), a tela abaixo será exibida:

Na aba "Series" você vai indicar qual campo (geralmente campo valor) será usado para "povoar" o gráfico. ATENÇÃO: Neste caso a cxGrid não aceita campos do tipo BCDField, apenas inteiros e float. - É um bug que já foi reportado para o suporte da Developer Express, e eles estão resolvendo (https://www.devexpress.com/Support/Center/ViewIssue.aspx?issueid=CB50912)

Pressione "Add" e coloque o campo VL_VALOR.

Na aba "DataGroups" você vai indicar quantos níveis e a sequência que o usuário pode clicar nas "barras". No nosso exemplo criamos 3:  Loja, Cidade e Nome, sendo que para cada um definimos um DisplayText.

Após fazer isso a tela aparece assim:

Na cxGrid1DBTableView1 crie um Summay > Default para groups > Add

Coluna VL_VALOR, skSum, FieldName: VL_VALOR, Format: #,##0.00

Para concluir vamos fazer a grid e o gráfico ficarem sincronizados (opcional):

{ ... } 

 

  private

    ActiveDataGroups: array of Integer;

    function GetColumnByChartItem(AChartItem: TcxGridChartItem): TcxGridDBColumn;

    procedure ShowTableActiveGroup;

    procedure SynchronizeTableWithChart;

    procedure UpdateTableGroupingAndColumnVisibility;

 

{ ... }

 

function TSampleForm.GetColumnByChartItem(AChartItem: TcxGridChartItem): TcxGridDBColumn;

begin

  Result := cxGrid1DBTableView1.GetColumnByFieldName(TcxGridDBChartItemDataBinding(AChartItem.DataBinding).FieldName);

end;

 

procedure TSampleForm.ShowTableActiveGroup;

var

  I, ADataGroupIndex, AGroupRowIndex: Integer;

  ARow: TcxCustomGridRow;

begin

  // expand group rows so that the group with the active chart data is made visible

  SetLength(ActiveDataGroups, cxGrid1DBChartView.ActiveDataLevel);

  cxGrid1DBTableView1.BeginUpdate;

  try

    cxGrid1DBTableView1.DataController.Groups.FullCollapse;

    ADataGroupIndex := -1;

    for I := 0 to cxGrid1DBChartView.ActiveDataLevel - 1 do

    begin

      ADataGroupIndex := cxGrid1DBTableView1.DataController.Groups.GetDataGroupIndexByGroupValue(

        ADataGroupIndex, cxGrid1DBChartView.VisibleDataGroups[I].ActiveValue);

      ActiveDataGroups[I] := ADataGroupIndex;

 

      AGroupRowIndex := cxGrid1DBTableView1.DataController.DataControllerInfo.DataGroups[ADataGroupIndex].RowIndex;

      cxGrid1DBTableView1.DataController.Groups.ChangeExpanding(AGroupRowIndex, True, False);

      cxGrid1DBTableView1.Controller.FocusedRowIndex := AGroupRowIndex;

    end;

  finally

    cxGrid1DBTableView1.EndUpdate;

  end;

  // select rows with the data used for the active chart

  cxGrid1DBTableView1.BeginUpdate;

  try

    if ADataGroupIndex = -1 then

      cxGrid1DBTableView1.Controller.SelectAll

    else

    begin

      cxGrid1DBTableView1.Controller.ClearSelection;

      for I := cxGrid1DBTableView1.Controller.FocusedRowIndex + 1 to cxGrid1DBTableView1.ViewData.RowCount - 1 do

      begin

        ARow := cxGrid1DBTableView1.ViewData.Rows[I];

        if ARow.Level = cxGrid1DBChartView.ActiveDataLevel then

        begin

          ARow.Focused := True;

          ARow.Selected := True;

        end

        else

          Break;

      end;

    end;

  finally

    cxGrid1DBTableView1.EndUpdate;

  end;

end;

 

 

procedure TSampleForm.SynchronizeTableWithChart;

begin

  UpdateTableGroupingAndColumnVisibility;

  ShowTableActiveGroup;

end;

 

 

procedure TSampleForm.UpdateTableGroupingAndColumnVisibility;

var

  I: Integer;

begin

  cxGrid1DBTableView1.BeginUpdate;

  try

    cxGrid1DBTableView1.Controller.ClearGrouping;

    for I := 0 to cxGrid1DBChartView.VisibleDataGroupCount - 1 do

      GetColumnByChartItem(cxGrid1DBChartView.VisibleDataGroups[I]).GroupIndex := I;

 

    for I := 0 to cxGrid1DBChartView.DataGroupCount - 1 do

      GetColumnByChartItem(cxGrid1DBChartView.DataGroups[I]).Visible := cxGrid1DBChartView.DataGroups[I].Visible;

    for I := 0 to cxGrid1DBChartView.SeriesCount - 1 do

      GetColumnByChartItem(cxGrid1DBChartView.Series[I]).Visible := cxGrid1DBChartView.Series[I].Visible;

  finally

    cxGrid1DBTableView1.EndUpdate;

  end;

end;

 

procedure TSampleForm.cxGrid1ActiveTabChanged(Sender: TcxCustomGrid; ALevel: TcxGridLevel);

begin

  if ALevel = cxGrid1Level1 then

    SynchronizeTableWithChart;

end;

 

Rode o programa e na aba dos gráficos clique na barra e veja como o sincronismo entre o grafico e o grid funcionam.

Mais

É possível criar gráficos dentro de grids (sub-level)

Veja o exemplo M:\LIB\D2006\Developer Express.VCL\ExpressQuantumGrid 6\Demos\Delphi\MasterDetailChartDemo