29/08/22, 14:07 Sistemas > Gestor > Montando gráficos na QuantumGrid 6

Montando gráficos na QuantumGrid 6

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:

 

help.market.com.br/desenvolvimento/montando_graficos_na_quantumgr.htm 1/6
29/08/22, 14:07 Sistemas > Gestor > Montando gráficos na QuantumGrid 6

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:

help.market.com.br/desenvolvimento/montando_graficos_na_quantumgr.htm 2/6
29/08/22, 14:07 Sistemas > Gestor > Montando gráficos na QuantumGrid 6

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

help.market.com.br/desenvolvimento/montando_graficos_na_quantumgr.htm 3/6
29/08/22, 14:07 Sistemas > Gestor > Montando gráficos na QuantumGrid 6
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;

help.market.com.br/desenvolvimento/montando_graficos_na_quantumgr.htm 4/6
29/08/22, 14:07 Sistemas > Gestor > Montando gráficos na QuantumGrid 6
  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
help.market.com.br/desenvolvimento/montando_graficos_na_quantumgr.htm 5/6
29/08/22, 14:07 Sistemas > Gestor > Montando gráficos na QuantumGrid 6

help.market.com.br/desenvolvimento/montando_graficos_na_quantumgr.htm 6/6