Graph Next to ALV (in the same screen)

[former_member331934]

Dear experts,

I have two questions for you:

1) I created an ALV report that shows daily production quantity of machines but i want to add a graph format of this ALV next to it. I don't want to use pop-up. I want both ALV and graph in the same screen. in the screen painter i created two custom containers, (first for ALV second for graph) and I'm using GFW_PRES_SHOW but i don't know how to relate graph with ALV data.

2) an empty graph is occuring in an empty page. Is this situation about the property of GFW_PRES_SHOW

Thanks in advance.

Best Regards

[FredericGirod]

Did you use split container ?

[former_member331934]

Dear Frederic Girod,

Thanks for your quick response, i don't know how to use splitting since i'm new in abap, but i will search about it and will give you feedback about the result

[FredericGirod]

in transaction DWDM you have some examples of split container, it is little bit old but it works

[raphael_almeida]

Adding, look to ABAP demo programs too 😉

BR,

Pacheco.

[FredericGirod]

DWDM is a set of demo program

[Sandra_Rossi]

zynp 01 When you have found out how to use containers, GFW_PRES_SHOW has the parameter PARENT in which you pass the instance of the container (the right container of the split container of 2 columns * 1 row)

[dairolozano]

Hi.

I created this quick sample of Split contaniner mixing some code found in sample programs, wich shows an ALV and a graph in the same screen. . Hopefully it will work for you.

Create a Dynpro 0600 and add a custom container with name 'CONTAINER'.

*&---------------------------------------------------------------------*
*& Report YTEST_GRAPH
*&---------------------------------------------------------------------*

*&---------------------------------------------------------------------*

REPORT YTEST_GRAPH.

*type pool declarations for graphical frame work
TYPE-POOLS: GFW.

*OK code declaration
DATA: OK_CODE TYPE SY-UCOMM.

*structure declaration for graph 1 values
types : begin of ty_grvalwa1.

include structure gprval.
types : end of ty_grvalwa1.

*structure declaration for graph 1 column names
types : begin of ty_col1_texts.
include structure gprtxt.
types : end of ty_col1_texts.

*data declarations for graph 1

data : grval1 TYPE standard TABLE OF ty_grvalwa1,
      grvalwa1 type ty_grvalwa1,
       COL1_TEXTS TYPE standard TABLE OF ty_col1_texts,
       col1_wa type ty_col1_texts.

*structure declaration for graph 2 values
types : begin of ty_grvalwa2.
include structure gprval.
types : end of ty_grvalwa2.


*structure declaration for graph 2 column names
types : begin of ty_col2_texts.
include structure gprtxt.
types : end of ty_col2_texts.


*data declarations for graph2
data : grval2 TYPE standard TABLE OF ty_grvalwa2,
       grvalwa2 type ty_grvalwa2,
       COL2_TEXTS TYPE standard TABLE OF ty_col2_texts,
       col2_wa type ty_col2_texts.


*data declarations for containers,splitters,and custom container
data :CUSTOM_CONTAINER TYPE REF TO CL_GUI_CUSTOM_CONTAINER,
      SPLITTER TYPE REF TO CL_GUI_SPLITTER_CONTAINER,
      CONT1 type ref to cl_gui_container,
      CONT2 type ref to cl_gui_container.

*Initialisation event
INITIALIZATION.

*start of selection event
START-OF-SELECTION.

*Call screen for the container for output
  CALL SCREEN 600.

*PBO module for the output display

*&---------------------------------------------------------------------*
*&      Module  PBO_0600  OUTPUT
*&---------------------------------------------------------------------*

MODULE PBO_0600 OUTPUT.
*Setting the GUI status for the splitter screen(EXIT button)
  SET PF-STATUS 'STATUS'.

*Creating custom container

  CREATE OBJECT CUSTOM_CONTAINER
    EXPORTING
      CONTAINER_NAME = 'CONTAINER'.

*creating the splitter control
  CREATE OBJECT splitter
    EXPORTING
      PARENT  = CUSTOM_CONTAINER
      ROWS    = 1
      COLUMNS = 2
      ALIGN   = 15.

*calling the container method of the splitter class
*for the first graphic
  CALL METHOD SPLITTER->GET_CONTAINER
    EXPORTING
      ROW       = 1
      COLUMN    = 1
    RECEIVING
      CONTAINER = CONT1.

*calling the container method of the splitter class
*for the second graphic

  CALL METHOD SPLITTER->GET_CONTAINER
    EXPORTING
      ROW       = 1
      COLUMN    = 2
    RECEIVING
      CONTAINER = CONT2.


*ALV  display - Cont 1

DATA:
      GT_SFLIGHT TYPE TABLE OF SFLIGHT,
      GRID1  TYPE REF TO CL_GUI_ALV_GRID.


SELECT * FROM SFLIGHT INTO TABLE GT_SFLIGHT.

    CREATE OBJECT GRID1
           EXPORTING I_PARENT = CONT1. "G_CUSTOM_CONTAINER.
    CALL METHOD GRID1->SET_TABLE_FOR_FIRST_DISPLAY
         EXPORTING I_STRUCTURE_NAME = 'SFLIGHT'
         CHANGING  IT_OUTTAB        = GT_SFLIGHT.


*Graphic  display - Cont 2
  REFRESH : grval1,Col1_texts.
  grvalwa1-rowtxt = 'Rice'.
  grvalwa1-val1 = 1100.
  grvalwa1-VAL2 = 4500.
  APPEND grvalwa1 to grval1.

  grvalwa1-ROWTXT = 'Coffee'.
  grvalwa1-VAL1 = 2000.
  grvalwa1-VAL2 = 6000.
  APPEND grvalwa1 to grval1.

  grvalwa1-ROWTXT = 'Tea'.
  grvalwa1-VAL1 = 3500.
  grvalwa1-VAL2 = 7000.
  APPEND grvalwa1 to grval1.

  grvalwa1-ROWTXT = 'Cereals'.
  grvalwa1-VAL1 = 6000.
  grvalwa1-val2 = 7000.
  APPEND grvalwa1 to grval1.

  col1_wa-coltxt = '2005'.
  APPEND col1_wa to COL1_TEXTS.
  COL1_wa-COLTXT = '2006'.
  APPEND col1_wa to COL1_TEXTS.

*Function module to display graph (Graph 1)
  CALL FUNCTION 'GFW_PRES_SHOW_MULT'
    EXPORTING
      PARENT            = CONT2
      PRESENTATION_TYPE = GFW_PRESTYPE_LINES
      SHOW              = GFW_FALSE
    TABLES
      VALUES            = grval1
      COLUMN_TEXTS      = COL1_TEXTS
    EXCEPTIONS
      ERROR_OCCURRED    = 1.
ENDMODULE.                 " PBO_0600  OUTPUT


*PAI module : Based on user input,action is performed
*EXIT called to leave program when user clicks it


*&---------------------------------------------------------------------*
*&      Module  PAI_0600  INPUT
*&---------------------------------------------------------------------*

MODULE PAI_0600 INPUT.
  OK_CODE = SY-UCOMM.
  IF OK_CODE EQ 'EXIT'.
    LEAVE PROGRAM.
  ENDIF.
ENDMODULE.                 " PAI_0600  INPUT

[former_member331934]

Dear dairolozano,

Thank you for your attention, but in your code values of graph are appended the table manually my ALV is about daily production numbers and every day different quantities will be shown on the screen. My problem is not being able to take the values from ALV.

[dairolozano]

I understand. Can you please share your code ?

[former_member331934]

dairolozano thank you for your attention.

[Sandra_Rossi]

I see in the ABAP trace (transaction code SAT) that the ALV grid control invokes CL_ALV_GRAPHICS. Maybe you could debug the parameters passed, and try to call it the same way.

[dairolozano]

Hi.

I updated the code in order to generate the graph from the data displayed in the ALV. So both ALV and a graph shown in the same screen are generated from the same information. Remeber to create a Dynpro 0600 and add a custom container with name 'CONTAINER'.

Hopefully it will work for you now.

*&---------------------------------------------------------------------*
*& Report YTEST_GRAPH
*&---------------------------------------------------------------------*
*&
*&---------------------------------------------------------------------*
REPORT YTEST_GRAPH.

*type pool declarations for graphical frame work
TYPE-POOLS: GFW.

*OK code declaration
DATA: OK_CODE TYPE SY-UCOMM.

*structure declaration for ALV Cont 1 values
types : begin of ty_grvalwa1.
include structure gprval.
types : end of ty_grvalwa1.


*structure declaration for ALV Cont 1 column names
types : begin of ty_col1_texts.
include structure gprtxt.
types : end of ty_col1_texts.

*data declarations for ALV Cont 1
data : grval1 TYPE standard TABLE OF ty_grvalwa1,
      grvalwa1 type ty_grvalwa1,
       COL1_TEXTS TYPE standard TABLE OF ty_col1_texts,
       col1_wa type ty_col1_texts.

*structure declaration for Graph Cont 2 values
types : begin of ty_grvalwa2.
include structure gprval.
types : end of ty_grvalwa2.

*structure declaration for Graph Cont 2 column names
types : begin of ty_col2_texts.
include structure gprtxt.
types : end of ty_col2_texts.

*data declarations for graph2
data : grval2 TYPE standard TABLE OF ty_grvalwa2,
       grvalwa2 type ty_grvalwa2,
       COL2_TEXTS TYPE standard TABLE OF ty_col2_texts,
       col2_wa type ty_col2_texts.

*data declarations for containers,splitters,and custom container
data :CUSTOM_CONTAINER TYPE REF TO CL_GUI_CUSTOM_CONTAINER,
      SPLITTER TYPE REF TO CL_GUI_SPLITTER_CONTAINER,
      CONT1 type ref to cl_gui_container,
      CONT2 type ref to cl_gui_container.

*Initialisation event
INITIALIZATION.

*start of selection event
START-OF-SELECTION.

*Call screen for the container for output
  CALL SCREEN 600.

*PBO module for the output display
*&---------------------------------------------------------------------*
*&      Module  PBO_0600  OUTPUT
*&---------------------------------------------------------------------*
MODULE PBO_0600 OUTPUT.

*Setting the GUI status for the splitter screen(EXIT button)
  SET PF-STATUS 'STATUS'.

*Creating custom container
  CREATE OBJECT CUSTOM_CONTAINER
    EXPORTING
      CONTAINER_NAME = 'CONTAINER'.

*creating the splitter control
  CREATE OBJECT splitter
    EXPORTING
      PARENT  = CUSTOM_CONTAINER
      ROWS    = 1
      COLUMNS = 2
      ALIGN   = 15.

*calling the container method of the splitter class
*for the first graphic
  CALL METHOD SPLITTER->GET_CONTAINER
    EXPORTING
      ROW       = 1
      COLUMN    = 1
    RECEIVING
      CONTAINER = CONT1.

*calling the container method of the splitter class
*for the second graphic
  CALL METHOD SPLITTER->GET_CONTAINER
    EXPORTING
      ROW       = 1
      COLUMN    = 2
    RECEIVING
      CONTAINER = CONT2.

*ALV  display - Cont 1
DATA:
      GT_SFLIGHT TYPE TABLE OF SFLIGHT,
*      G_CONTAINER TYPE SCRFNAME VALUE 'BCALV_GRID_DEMO_0100_CONT1',
      GRID1  TYPE REF TO CL_GUI_ALV_GRID.
*      G_CUSTOM_CONTAINER TYPE REF TO CL_GUI_CUSTOM_CONTAINER.

SELECT * FROM SFLIGHT INTO TABLE GT_SFLIGHT.

    CREATE OBJECT GRID1
           EXPORTING I_PARENT = CONT1. "G_CUSTOM_CONTAINER.
    CALL METHOD GRID1->SET_TABLE_FOR_FIRST_DISPLAY
         EXPORTING I_STRUCTURE_NAME = 'SFLIGHT'
         CHANGING  IT_OUTTAB        = GT_SFLIGHT.

  REFRESH : grval1,Col1_texts.

 LOOP AT GT_SFLIGHT ASSIGNING FIELD-SYMBOL(<fs_flight>).
  grvalwa1-rowtxt = <fs_flight>-carrid.
  grvalwa1-val1   = <fs_flight>-price.
  grvalwa1-VAL2   = <fs_flight>-paymentsum.
  APPEND grvalwa1 to grval1.
  CLEAR grvalwa1.
 ENDLOOP.

  col1_wa-coltxt = 'Airfare'.
  APPEND col1_wa to COL1_TEXTS.

  COL1_wa-COLTXT = 'Booking Total'.
  APPEND col1_wa to COL1_TEXTS.

*Function module to display graph (ALV Cont 1)
  CALL FUNCTION 'GFW_PRES_SHOW_MULT'
    EXPORTING
      PARENT            = CONT2
      PRESENTATION_TYPE = GFW_PRESTYPE_LINES
      SHOW              = GFW_FALSE
    TABLES
      VALUES            = grval1
      COLUMN_TEXTS      = COL1_TEXTS
    EXCEPTIONS
      ERROR_OCCURRED    = 1.

ENDMODULE.                 " PBO_0600  OUTPUT

*PAI module : Based on user input,action is performed
*EXIT called to leave program when user clicks it

*&---------------------------------------------------------------------*
*&      Module  PAI_0600  INPUT
*&---------------------------------------------------------------------*
MODULE PAI_0600 INPUT.
  OK_CODE = SY-UCOMM.
  IF OK_CODE EQ 'EXIT'.
    LEAVE PROGRAM.
  ENDIF.
ENDMODULE.                 " PAI_0600  INPUT

[former_member770121]

I have use the FM (GFW_PRES_SHOW_MULT ) so i have use the custom container because i have add the multiple graph on on screen so i need to add the custom container so kindly recommend the solution for how we can add the value on the vertical/horizontal bar show their percentage for pie chart using this FM.

its urgent kindly recommend the solution its urgent.

[NTeunckens]

You could also make use of the "CL_GUI_DOCKING_CONTAINER" and "CL_GUI_EASY_SPLITTER_CONTAINER" to Split your GUI-Screen ...

A good Blog and Sample Code are provided here : link

[DoanManhQuynh]

You could use class CL_GUI_CHART_ENGINE to display chart instead of function module. Check demo: GRAPHICS_GUI_CE_DEMO for more information.

If you want to refresh chart according to the change in ALV (incase editable ALV) you need to refresh data in chart then regenerate. I did a simple code as bellow (even though chart didn't refresh right after change data, i think you have to find the way to trigger PBO event there, sorry i don't have time to check it):

"On data change event handler of ALV
CLASS lcl_handler DEFINITION.
  PUBLIC SECTION.
    METHODS handle_data_changed FOR EVENT data_changed OF cl_gui_alv_grid IMPORTING er_data_changed.
ENDCLASS.
CLASS lcl_handler IMPLEMENTATION.
  METHOD handle_data_changed.
    "Reset chart data in data change event 
    PERFORM set_data.
  ENDMETHOD.
ENDCLASS.


"Screen PBO
MODULE status_0100 OUTPUT.
  SET PF-STATUS '100'.
  IF g_splitter IS INITIAL.
    g_splitter = NEW cl_gui_splitter_container( parent = NEW cl_gui_custom_container( 'ALV_CONT' )
                                                rows = 1 columns = 2 ).
  ENDIF.
* ALV
  IF g_alv_container IS INITIAL.
    g_alv_container = g_splitter->get_container( row = 1 column = 1 ).
*    g_alv_container = NEW cl_gui_custom_container( 'ALV_CONT' ).
    g_alv_grid = NEW cl_gui_alv_grid( g_alv_container ).
    DATA(gt_fieldcat) = VALUE lvc_t_fcat(
                           ( fieldname = 'CARRID' col_pos = 1 scrtext_s = 'CARRID' )
                           ( fieldname = 'CONNID' col_pos = 2 scrtext_s = 'CONNID' )
                           ( fieldname = 'SEATSOCC_B' col_pos = 3 scrtext_s = 'SEATSOCC_B' edit = 'X' ) ).
    g_alv_grid->set_table_for_first_display(
      CHANGING
        it_fieldcatalog = gt_fieldcat
        it_outtab       = g_t_sflight
      EXCEPTIONS
        invalid_parameter_combination = 1
        program_error                 = 2
        too_many_lines                = 3
        OTHERS                        = 4 ).
    IF sy-subrc <> 0.
      MESSAGE ID sy-msgid TYPE sy-msgty NUMBER sy-msgno
                 WITH sy-msgv1 sy-msgv2 sy-msgv3 sy-msgv4.
    ENDIF.
    g_alv_grid->set_ready_for_input(
        i_ready_for_input = 1 ).
    g_alv_grid->register_edit_event( i_event_id = cl_gui_alv_grid=>mc_evt_enter ).
    CREATE OBJECT g_event_receiver.
    SET HANDLER g_event_receiver->handle_data_changed FOR g_alv_grid.
  ENDIF.
* Chart
  IF g_graph_container IS INITIAL.
    g_graph_container = g_splitter->get_container( row = 1 column = 2 ).
*    g_graph_container = NEW cl_gui_custom_container( 'CHART_CONT' ).
    g_ce_viewer = NEW cl_gui_chart_engine( g_graph_container ).
* Create XML data from internal table.
    PERFORM set_data.
* Create the customizing data for the chart
    PERFORM set_layout.
  ENDIF.
* Render the Graph Object.
  g_ce_viewer->render( ).
ENDMODULE.
*---------------------------------------------------------------------*
*      Form  SET_DATA
*---------------------------------------------------------------------*
FORM set_data.
  DATA: l_flight_node TYPE REF TO if_ixml_element,
        l_categories  TYPE REF TO if_ixml_element,
        l_series      TYPE REF TO if_ixml_element,
        l_element     TYPE REF TO if_ixml_element,
        l_data_doc    TYPE REF TO if_ixml_document,
        l_xstr        TYPE xstring,
        l_ostream     TYPE REF TO if_ixml_ostream.
* Set encoding to UTF-8
  l_data_doc = g_ixml->create_document( ).
  l_data_doc->set_encoding( g_ixml->create_encoding(
                                      byte_order = if_ixml_encoding=>co_little_endian
                                      character_set = 'utf-8' ) ).
* Root node
  l_flight_node = l_data_doc->create_simple_element( name = 'SimpleChartData' parent = l_data_doc ).
* Categories
  l_categories = l_data_doc->create_simple_element( name = 'Categories' parent = l_flight_node ).
* Categories Labels (X-axis)
  LOOP AT g_t_sflight INTO DATA(wa_sflight) GROUP BY ( carrid = wa_sflight-carrid connid = wa_sflight-connid ).
    l_element = l_data_doc->create_simple_element( name = 'C' parent = l_categories ).
    l_element->if_ixml_node~set_value( |{ wa_sflight-carrid } { wa_sflight-connid }| ).
  ENDLOOP.
* Series node
  l_series = l_data_doc->create_simple_element( name = 'Series' parent = l_flight_node ).
* Series Labels (X-axis)
  l_series->set_attribute( name = 'label' value = 'Seat' ).
  LOOP AT g_t_sflight INTO wa_sflight.
    l_element = l_data_doc->create_simple_element( name = 'S' parent = l_series ).
    l_element->if_ixml_node~set_value( |{ wa_sflight-seatsocc_b }| ).
  ENDLOOP.
* Set data
  l_ostream = g_ixml_sf->create_ostream_xstring( l_xstr ).
  l_data_doc->render( l_ostream ).
  g_ce_viewer->set_data( xdata = l_xstr ).
ENDFORM.                    " SET_DATA
*&---------------------------------------------------------------------*
*&      Form  SET_LAYOUT
*&---------------------------------------------------------------------*
FORM set_layout.
  DATA: l_root           TYPE REF TO if_ixml_element,
        l_globalsettings TYPE REF TO if_ixml_element,
        l_default        TYPE REF TO if_ixml_element,
        l_elements       TYPE REF TO if_ixml_element,
        l_chartelements  TYPE REF TO if_ixml_element,
        l_title          TYPE REF TO if_ixml_element,
        l_element        TYPE REF TO if_ixml_element,
        l_encoding       TYPE REF TO if_ixml_encoding,
        l_layout_doc     TYPE REF TO if_ixml_document,
        l_xstr           TYPE xstring,
        l_ostream        TYPE REF TO if_ixml_ostream.
  l_layout_doc = g_ixml->create_document( ).
  l_encoding = g_ixml->create_encoding(
    byte_order = if_ixml_encoding=>co_little_endian
    character_set = 'utf-8' ).
  l_layout_doc->set_encoding( l_encoding ).
  l_root = l_layout_doc->create_simple_element( name = 'SAPChartCustomizing' parent = l_layout_doc ).
  l_root->set_attribute( name = 'version' value = '1.1' ).
  l_globalsettings = l_layout_doc->create_simple_element( name = 'GlobalSettings' parent = l_root ).
* File type
  l_element = l_layout_doc->create_simple_element( name = 'FileType' parent = l_globalsettings ).
  l_element->if_ixml_node~set_value( 'JPG' ).
* Dimension
* 2D: PseudoTwo
* 3D: PseudoThree
  l_element = l_layout_doc->create_simple_element( name = 'Dimension' parent = l_globalsettings ).
  l_element->if_ixml_node~set_value( 'PseudoThree' ).
* Chart type
* For Bar Chart - Columns
* For Pie Chart - Pie
* For Speedometer Chart - Speedometer
  l_element = l_layout_doc->create_simple_element( name = 'ChartType' parent = l_globalsettings ).
  l_element->if_ixml_node~set_value( 'Columns' ).
  l_element = l_layout_doc->create_simple_element( name = 'FontFamily' parent = l_default ).
  l_element->if_ixml_node~set_value( 'Arial' ).
* Chart propeties
  l_elements = l_layout_doc->create_simple_element( name = 'Elements' parent = l_root ).
  l_chartelements = l_layout_doc->create_simple_element( name = 'ChartElements' parent = l_elements ).
  l_title = l_layout_doc->create_simple_element( name = 'Title' parent = l_chartelements ).
* Caption
  l_element = l_layout_doc->create_simple_element( name = 'Caption' parent = l_title ).
  l_element->if_ixml_node~set_value( 'Airline Details' ).
* Set layout
  l_ostream = g_ixml_sf->create_ostream_xstring( l_xstr ).
  l_layout_doc->render( l_ostream ).
  g_ce_viewer->set_customizing( xdata = l_xstr ).
ENDFORM.                    " SET_LAYOUT