[ABAP] Einfache Charts anzeigen mit cl_time_chart_simple

* Kapselt: cl_gui_chart_engine
* Demo: RSORA_TCS_DEMO
* Vorteil: einfache Handhabung
* Nachteil: nur eingeschränktes Chart-Customizing (Einstellungen)
CONSTANTS: co_graph_id TYPE tcs_graph_id VALUE 'S_GRAPH1'.

CLASS lcl_events DEFINITION.
  PUBLIC SECTION.
    CLASS-METHODS:
      on_click FOR EVENT click OF cl_time_chart_simple
        IMPORTING
            element
            series_nr
            point_nr
            clicked_entry
            clicked_series
            sender.
    CLASS-METHODS:
      on_property_change FOR EVENT property_change OF cl_time_chart_simple
        IMPORTING
            element
            name
            value
            sender.
ENDCLASS.

CLASS lcl_events IMPLEMENTATION.

  METHOD on_click.
    MESSAGE |{ element } { series_nr } { point_nr } { clicked_entry-yvalue } { clicked_series }| TYPE 'S'.
  ENDMETHOD.

  METHOD on_property_change.
    MESSAGE |{ element } { name } { value }| TYPE 'S'.
  ENDMETHOD.

ENDCLASS.

* Dummy-Screen für cl_gui_container=>default_screen deklarieren
SELECTION-SCREEN BEGIN OF SCREEN 100.
SELECTION-SCREEN END OF SCREEN 100.

START-OF-SELECTION.
  TRY.
      DATA(o_tcs) = NEW cl_time_chart_simple( i_container = cl_gui_container=>default_screen ).

* Customizing, leider nur vier Parameter einstellbar
* erweitertes Customizing nur über die Methoden load_customizing... möglich (s.u.)
      DATA(lv_cust) = VALUE tcs_s_customizing( charttype  = 'TimeScatter'
                                               charttitle = 'Time Chart Simple Demo'
                                               yaxistext  = 'Höhe'
                                               yaxisunit  = '[mm]'
                                             ).

      o_tcs->set_customizing( lv_cust ).

* Daten
      DATA(it_data) = VALUE tcs_t_data( ( series    = 'Series 1'
                                          timestamp = cl_time_chart_simple=>create_timestamp( i_date  = '20190101' i_time  = '100000' i_milli = '000' )
                                          yvalue    = '1.2'
                                        )
                                        ( series    = 'Series 1'
                                          timestamp = cl_time_chart_simple=>create_timestamp( i_date  = '20190101' i_time  = '110000' i_milli = '100' )
                                          yvalue    = '1.5'
                                        )
                                        ( series    = 'Series 1'
                                          timestamp = cl_time_chart_simple=>create_timestamp( i_date  = '20190101' i_time  = '120000' i_milli = '200' )
                                          yvalue    = '1.9'
                                        )

                                        ( series    = 'Series 2'
                                          timestamp = cl_time_chart_simple=>create_timestamp( i_date  = '20190101' i_time  = '100000' i_milli = '500' )
                                          yvalue    = '1.0'
                                        )
                                        ( series    = 'Series 2'
                                          timestamp = cl_time_chart_simple=>create_timestamp( i_date  = '20190101' i_time  = '110000' i_milli = '700' )
                                          yvalue    = '1.2'
                                        )
                                        ( series    = 'Series 2'
                                          timestamp = cl_time_chart_simple=>create_timestamp( i_date  = '20190101' i_time  = '120000' i_milli = '800' )
                                          yvalue    = '1.6'
                                        )
                                      ).

      o_tcs->set_data( it_data ).

* Events
      SET HANDLER lcl_events=>on_click FOR o_tcs.
      SET HANDLER lcl_events=>on_property_change FOR o_tcs.

* Einstellungen anzeigen
      o_tcs->toggle_customizing_mode( ).

** interessante Funktionen (sollten durch Buttons getriggert werden):
** Drucken
*  o_tcs->print_chart( ).
** Grafik speichern
*  o_tcs->save_chart( ).
** Filter
*  o_tcs->filter_data_top_n( 3 ).
*  o_tcs->filter_data_top_n( 0 ).
** Zoom
*  o_tcs->zoom_in( 40 ).
*  o_tcs->zoom_out( 40 ).
** Scroll
*  o_tcs->scroll_left_border(  ).
*  o_tcs->scroll_left( 100 ).
*  o_tcs->scroll_left( 25 ).
*  o_tcs->scroll_right( 25 ).
*  o_tcs->scroll_right( 100 ).
*  o_tcs->scroll_right_border( ).
** Customizing als Datei laden/speichern
*  o_tcs->load_customizing_frontend( ).
*  o_tcs->save_customizing_frontend( ).
** Customizing auf DB laden/speichern/löschen
*  o_tcs->load_customizing_db( co_graph_id ).
*  o_tcs->save_customizing_db( co_graph_id ).
*  o_tcs->delete_customizing_db( co_graph_id ).

* cl_gui_container=>default_screen erzwingen
      CALL SCREEN 100.

    CATCH cx_root INTO DATA(e_text).
      WRITE: / e_text->get_text( ).
  ENDTRY.

[ABAP] SAP Smart Forms: XSF Utilities – BDS Grafik (Formulargrafik) holen und anzeigen

TRY.
* Holt Formulargrafiken, die mit der SE78 eingerichtet wurden
    DATA(lv_xstr) = cl_ssf_xsf_utilities=>get_bds_graphic_as_bmp( p_object = 'GRAPHICS'
                                                                  p_name   = 'ENJOY'
                                                                  p_id     = 'BMAP'
                                                                  p_btype  = 'BCOL' ). " BMON	- Rasterbild schwarz-weiß, BCOL	- Rasterbild Farbe

* freier Custom-Container innerhalb der Listenansicht
    DATA(o_cnt) = NEW cl_gui_custom_container( container_name = ''
                                               repid          = 'SAPMSSY0'
                                               dynnr          = '0120' ).

* Position des Containers setzen
    o_cnt->set_top( 50 ).
    o_cnt->set_left( 50 ).
    o_cnt->set_width( 640 ).
    o_cnt->set_height( 240 ).

* Bild über die URL laden und anzeigen
    DATA(o_pic) = NEW cl_gui_picture( parent = o_cnt ).
    o_pic->set_display_mode( display_mode = cl_gui_picture=>display_mode_stretch ).

* xstring -> solix
    DATA(it_bin_data) = cl_bcs_convert=>xstring_to_solix( lv_xstr ).

    DATA: lv_url TYPE swk_url.

* temporäre URL für das Bild erzeugen
    CALL FUNCTION 'DP_CREATE_URL'
      EXPORTING
        type                 = 'image/jpeg' " https://wiki.selfhtml.org/wiki/Referenz:MIME-Typen
        subtype              = ''
      TABLES
        data                 = it_bin_data
      CHANGING
        url                  = lv_url
      EXCEPTIONS
        dp_invalid_parameter = 1
        dp_error_put_table   = 2
        dp_error_general     = 3
        OTHERS               = 4.

* Bild von URL laden
    o_pic->load_picture_from_url_async( lv_url ).

    WRITE: / 'Test.'.
  CATCH cx_root INTO DATA(e_txt).
    WRITE: / e_txt->get_text( ).
ENDTRY.

[ABAP] Eventhandling für die Klasse cl_gui_picture

* Demoprogramm: SAP_PICTURE_DEMO

* Eventhandlerklasse
CLASS lcl_events DEFINITION.
  PUBLIC SECTION.
    CLASS-METHODS: on_picture_dblclick FOR EVENT picture_dblclick OF cl_gui_picture
      IMPORTING
          mouse_pos_x
          mouse_pos_y
          sender.

    CLASS-METHODS: on_create_context_menu FOR EVENT context_menu OF cl_gui_picture
      IMPORTING
          sender.

    CLASS-METHODS: on_context_menu_selection FOR EVENT context_menu_selected OF cl_gui_picture
      IMPORTING
          fcode
          sender.
ENDCLASS.

CLASS lcl_events IMPLEMENTATION.

  METHOD on_picture_dblclick.

    MESSAGE |{ mouse_pos_x }{ mouse_pos_y }| TYPE 'I'.

  ENDMETHOD.

  METHOD on_create_context_menu.
    DATA(o_menu) = NEW cl_ctmenu( ).

    o_menu->add_function( fcode = 'FUNC1' text = 'Normal' ).
    o_menu->add_function( fcode = 'FUNC2' text = 'Center' ).

    sender->display_context_menu( context_menu = o_menu ).
  ENDMETHOD.

  METHOD on_context_menu_selection.

    CASE fcode.
      WHEN 'FUNC1'.
        sender->set_display_mode( display_mode = cl_gui_picture=>display_mode_normal ).
      WHEN 'FUNC2'.
        sender->set_display_mode( display_mode = cl_gui_picture=>display_mode_fit_center ).
    ENDCASE.

  ENDMETHOD.

ENDCLASS.

* Docking-Container für Bilddarstellung
DATA: o_dock TYPE REF TO cl_gui_docking_container.

* URL zur Google-API für die Erstellung des QR-Codes
PARAMETERS: p_url TYPE swk_url DEFAULT 'http://chart.apis.google.com/chart?chs=200x200&cht=qr&chld=|1&chl=viele%20lustige%20Zeichen/chart.png' LOWER CASE.

AT SELECTION-SCREEN OUTPUT.

  IF NOT o_dock IS BOUND.
* Dockingcontainer erzeugen
    o_dock = NEW #( repid = sy-repid
                    dynnr = sy-dynnr
                    side  = cl_gui_docking_container=>dock_at_bottom
                    ratio = 30 ).

* Bild über die URL laden und anzeigen
    DATA(o_pic) = NEW cl_gui_picture( parent = o_dock ).
    o_pic->set_display_mode( display_mode = cl_gui_picture=>display_mode_fit_center ).

    TRY.
* Eventhandler registrieren
        DATA: it_events TYPE cntl_simple_events.
        it_events = VALUE #( ( eventid = cl_gui_picture=>eventid_picture_dblclick
                               appl_event = abap_true )
                             ( eventid = cl_gui_picture=>eventid_context_menu
                               appl_event = abap_true )
                             ( eventid = cl_gui_picture=>eventid_context_menu_selected
                               appl_event = abap_true ) ).

        o_pic->set_registered_events( events = it_events ).

        SET HANDLER lcl_events=>on_picture_dblclick FOR o_pic.
        SET HANDLER lcl_events=>on_create_context_menu FOR o_pic.
        SET HANDLER lcl_events=>on_context_menu_selection FOR o_pic.

* Bild laden
        o_pic->load_picture_from_url_async( p_url ).

      CATCH cx_root INTO DATA(e).
        MESSAGE e->get_text( ) TYPE 'S' DISPLAY LIKE 'E'.
    ENDTRY.
  ENDIF.

[ABAP] Charts mit Klasse cl_igs_chart anzeigen

* https://help.sap.com/saphelp_nwpi71/helpdata/en/46/8e558550b568bde10000000a155369/frameset.htm
* IGS-Administration: Transaktion SIGS / Report GRAPHICS_IGS_ADMIN
* Demo: GRAPHICS_IGS_CHART_TEST

TRY.
* Default RFC-Destination für IGS (Internet Graphics Server)
    DATA(lv_rfc_dest) = CONV char32( 'IGS_RFC_DEST' ).

* RFC-Destination festlegen
    cl_gfw=>its_rfc_dest = lv_rfc_dest.

* Ist der IGS Chart interpreter erreichbar?
    IF abap_true = cl_igs_data=>is_registered_type( destination = lv_rfc_dest
                                                    type        = cl_igs_chart=>interpreter_type ).

* IGS Chart-Objekt erzeugen
      DATA(o_igs_chart) = NEW cl_igs_chart( ).

      o_igs_chart->type = cl_igs_chart=>co_type_cols_3d.
      o_igs_chart->width = 640.
      o_igs_chart->height = 480.
      o_igs_chart->title = 'Test Graph'.
      o_igs_chart->title_categories = 'Monat'.
      o_igs_chart->title_values = 'Verbrauch'.
      o_igs_chart->color_scheme = cl_igs_chart=>co_scheme_default.
      o_igs_chart->legend = cl_igs_chart=>co_legend_default.

* Chart-Daten
      o_igs_chart->data = VALUE igs_data_tab(
                                              ( groupid = 'Series 1' y = 10 x = 'Januar' color = 30 datalabel = 'Label 1' extension = 'href="http://www.google.de"' )
                                              ( groupid = 'Series 2' y = 20 x = 'Januar' datalabel = 'Label 2' extension = 'href="http://www.google.de"' )
                                              ( groupid = 'Series 1' y = 15 x = 'Februar' datalabel = 'Label 3' extension = 'href="http://www.google.de"' )
                                              ( groupid = 'Series 2' y = 20 x = 'Februar' datalabel = 'Label 4' extension = 'href="http://www.google.de"' )
                                              ( groupid = 'Series 1' y = 30 x = 'März' datalabel = 'Label 5' extension = 'href="http://www.google.de"' )
                                              ( groupid = 'Series 2' y = 25 x = 'März' datalabel = 'Label 6' extension = 'href="http://www.google.de"' )
                                            ).

* erweiterte Chart-Daten
      o_igs_chart->extension = VALUE igs_ext_tab(
                                                  ( token = 'TITLE' value = 'href="http://www.google.de"' )
                                                  ( token = 'LGNDI' value = 'href="http://www.google.de"' )
                                                ).

      DATA: lv_content_type TYPE w3param-cont_type.
      DATA: lv_content_subtype TYPE w3param-cont_type.
      DATA: lv_content_length TYPE w3param-cont_len.
      DATA: it_mime_content TYPE w3mimetabtype.
      DATA: it_imagemap_html TYPE w3htmltabtype.
      DATA: lv_msg TYPE char255.

* Chart als Image + ImageMap generieren
      o_igs_chart->send( IMPORTING
                           content_type   = lv_content_type
                           content_length = lv_content_length
                           content        = it_mime_content
                           imagemap       = it_imagemap_html
                           msg_text       = lv_msg ).

* Content Typ und Content Subtyp
      SPLIT lv_content_type AT '/' INTO lv_content_type lv_content_subtype.

* HTML-Viewer erzeugen
      DATA(o_html) = NEW cl_gui_html_viewer( parent = cl_gui_container=>default_screen ).

      DATA: lv_mime_content_url TYPE w3url.

* URL zum Image erzeugen
      o_html->load_data( EXPORTING
                           type         = lv_content_type
                           subtype      = lv_content_subtype
                           size         = lv_content_length
                         IMPORTING
                           assigned_url = lv_mime_content_url
                         CHANGING
                           data_table   = it_mime_content ).

* HTML mt eingebetteten Image + Imagemap erzeugen
      DATA(it_html) = VALUE w3htmltabtype( ( line = '<html>' )
                                           ( line = '  <head>' )
                                           ( line = '    <title>IGS Chart Demo</title>' )
                                           ( line = '  </head>' )
                                           ( line = '  <body>' )
                                           ( line = '    <map name=chart>' ) ).

      APPEND LINES OF it_imagemap_html TO it_html.

      APPEND LINES OF VALUE w3htmltabtype( ( line = '    </map>' )
                                           ( line = '    <img src="' && lv_mime_content_url && '" usemap=#chart border=0>' )
                                           ( line = '  </body>' )
                                           ( line = '</html>' ) ) TO it_html.

      DATA: lv_output_url TYPE w3url.

* URL zu HTML erzeugen
      o_html->load_data( EXPORTING
                           type         = 'text'
                           subtype      = 'html'
                         IMPORTING
                           assigned_url = lv_output_url
                         CHANGING
                           data_table   = it_html ).

* HTML im HTML-Viewer anhand der URL anzeigen
      o_html->show_url( url = lv_output_url ).

* Container cl_gui_container=>default_screen erzwingen
      WRITE: / space.
    ENDIF.
  CATCH cx_root INTO DATA(e_txt).
    WRITE: / e_txt->get_text( ).
ENDTRY.

[ABAP] Mit Hilfe der Klasse cl_fxs_image_processor Infos zu einem Bild auslesen, Größe verändern (Resize) und Bildformat konvertieren (Convert)

* Im Beispiel wird das Eingabebild (PNG) nach JPG konvertiert und auf 800x600px in der Größe verändert

* Dateiname der Bilddatei zum hochladen
PARAMETERS: p_fname TYPE file_table-filename OBLIGATORY.
PARAMETERS: p_width TYPE i DEFAULT 800.
PARAMETERS: p_height TYPE i DEFAULT 600.

* wenn die F4-Hilfe für den Dateinamen aufgerufen wird
AT SELECTION-SCREEN ON VALUE-REQUEST FOR p_fname.

  DATA: lv_rc TYPE i.
  DATA: it_files TYPE filetable.
  DATA: lv_action TYPE i.

* File-Tabelle leeren, da hier noch alte Einträge von vorherigen Aufrufen drin stehen können
  CLEAR it_files.

* FileOpen-Dialog aufrufen
  TRY.
      cl_gui_frontend_services=>file_open_dialog( EXPORTING
                                                    file_filter = |png (*.png)\|*.png\|{ cl_gui_frontend_services=>filetype_all }|
                                                  CHANGING
                                                    file_table  = it_files
                                                    rc          = lv_rc
                                                    user_action = lv_action ).

      IF lv_action = cl_gui_frontend_services=>action_ok.
* wenn Datei ausgewählt wurde
        IF lines( it_files ) > 0.
* ersten Tabelleneintrag lesen
          p_fname = it_files[ 1 ]-filename.
        ENDIF.
      ENDIF.

    CATCH cx_root INTO DATA(e_text).
      MESSAGE e_text->get_text( ) TYPE 'S' DISPLAY LIKE 'E'.
  ENDTRY.

START-OF-SELECTION.

  TRY.
      DATA: lv_filesize TYPE w3param-cont_len.
      DATA: lv_filetype TYPE w3param-cont_type.
      DATA: it_bin_data TYPE w3mimetabtype.

      WRITE: / p_fname.

* Bild auf Appl. Server hochladen (binary)
      cl_gui_frontend_services=>gui_upload( EXPORTING
                                              filename   = |{ p_fname }|
                                              filetype   = 'BIN'
                                            IMPORTING
                                              filelength = lv_filesize
                                            CHANGING
                                              data_tab   = it_bin_data ).

* solix -> xstring
      DATA(lv_img_data) = cl_bcs_convert=>solix_to_xstring( it_solix = it_bin_data ).

* FXS-Objekt holen
      DATA(o_ip) = NEW cl_fxs_image_processor( ).

* Bild zum Konverter hinzufügen
      DATA(lv_hndl) = o_ip->add_image( iv_data = lv_img_data ).

      DATA: lv_mimetype	TYPE string.
      DATA: lv_xres	TYPE i.
      DATA: lv_yres	TYPE i.
      DATA: lv_xdpi	TYPE i.
      DATA: lv_ydpi	TYPE i.
      DATA: lv_bitdepth	TYPE i.

* Infos holen
      o_ip->get_info( EXPORTING
                        iv_handle   = lv_hndl
                      IMPORTING
                        ev_mimetype = lv_mimetype
                        ev_xres     = lv_xres
                        ev_yres     = lv_yres
                        ev_xdpi     = lv_xdpi
                        ev_ydpi     = lv_ydpi
                        ev_bitdepth = lv_bitdepth ).

* Infos ausgeben
      WRITE: / 'MIME-Type:', lv_mimetype.
      WRITE: / '        X:', lv_xres.
      WRITE: / '        Y:', lv_yres.
      WRITE: / '    X-DPI:', lv_xdpi.
      WRITE: / '    Y-DPI:', lv_ydpi.
      WRITE: / '      Bit:', lv_bitdepth.

* Größe ändern (Resize)
      o_ip->resize( EXPORTING
                      iv_handle = lv_hndl
                      iv_xres   = p_width
                      iv_yres   = p_height ).

* Konvertierung (Convert) nach JPG
* Zielformate können nur sein (andernfalls gibt es eine Exception vom Typ cx_sy_range_out_of_bounds):
*   cl_fxs_mime_types=>co_image_bitmap
*   cl_fxs_mime_types=>co_image_png
*   cl_fxs_mime_types=>co_image_jpeg
      o_ip->convert( EXPORTING
                      iv_handle = lv_hndl
                      iv_format = cl_fxs_mime_types=>co_image_jpeg ).

* Infos holen
      o_ip->get_info( EXPORTING
                        iv_handle   = lv_hndl
                      IMPORTING
                        ev_mimetype = lv_mimetype
                        ev_xres     = lv_xres
                        ev_yres     = lv_yres
                        ev_xdpi     = lv_xdpi
                        ev_ydpi     = lv_ydpi
                        ev_bitdepth = lv_bitdepth ).

* Infos ausgeben
      WRITE: / 'MIME-Type:', lv_mimetype.
      WRITE: / '        X:', lv_xres.
      WRITE: / '        Y:', lv_yres.
      WRITE: / '    X-DPI:', lv_xdpi.
      WRITE: / '    Y-DPI:', lv_ydpi.
      WRITE: / '      Bit:', lv_bitdepth.

* Binärdaten (xstring) des Bildes holen
      DATA(lv_img_conv_data) = o_ip->get_image( EXPORTING iv_handle = lv_hndl ).

* xstring -> solix
      DATA(it_img_conv_data) = cl_bcs_convert=>xstring_to_solix( iv_xstring = lv_img_conv_data ).

      WRITE: / |{ p_fname }.jpg|.

* Image lokal speichern
      cl_gui_frontend_services=>gui_download( EXPORTING
                                                filename     = |{ p_fname }.jpg|
                                                filetype     = 'BIN'
                                                bin_filesize = xstrlen( lv_img_conv_data )
                                              CHANGING
                                                data_tab     = it_img_conv_data ).

    CATCH cx_root INTO DATA(e_txt).
      WRITE: / e_txt->get_text( ).
  ENDTRY.

[ABAP] Bilder und Icons von einem Webserver (URL) anzeigen

Variante 1 (load_picture_from_url_async)

* Docking-Container für Bilddarstellung
DATA: o_dock TYPE REF TO cl_gui_docking_container.

PARAMETERS: p_url TYPE char255 DEFAULT 'http://url.de/1234.jpg' LOWER CASE.

AT SELECTION-SCREEN OUTPUT.

  IF NOT o_dock IS BOUND.
* Dockingcontainer erzeugen
    o_dock = NEW #( repid = sy-repid
                    dynnr = sy-dynnr
                    side  = cl_gui_docking_container=>dock_at_bottom
                    ratio = 30 ).

* Bild über die URL laden und anzeigen
    DATA(o_pic) = NEW cl_gui_picture( parent = o_dock ).
    o_pic->set_display_mode( display_mode = cl_gui_picture=>display_mode_fit_center ).

    TRY.
        o_pic->load_picture_from_url_async( p_url ).
      CATCH cx_root INTO DATA(e).
        MESSAGE e->get_text( ) TYPE 'S' DISPLAY LIKE 'E'.
    ENDTRY.
  ENDIF.

Variante 2 (load_picture_from_url mit Fehlerbehandlung)

* Docking-Container für Bilddarstellung
DATA: o_dock TYPE REF TO cl_gui_docking_container.

PARAMETERS: p_url TYPE char255 DEFAULT 'http://url.de/1234.jpg' LOWER CASE.

AT SELECTION-SCREEN OUTPUT.

  IF NOT o_dock IS BOUND.
* Dockingcontainer erzeugen
    o_dock = NEW #( repid = sy-repid
                    dynnr = sy-dynnr
                    side  = cl_gui_docking_container=>dock_at_bottom
                    ratio = 30 ).

* Bild über die URL laden und anzeigen
    DATA(o_pic) = NEW cl_gui_picture( parent = o_dock ).
    o_pic->set_display_mode( display_mode = cl_gui_picture=>display_mode_fit_center ).
    TRY.
        DATA(lv_load_ok) = 0.

* Bild laden
        o_pic->load_picture_from_url( EXPORTING url = p_url IMPORTING result = lv_load_ok ).

* Flush ist wichtig für die Abarbeitung des GUI-Queues, sonst gibt es einen Core-Dump -> "SYSTEM_POINTER_PENDING"
        cl_gui_cfw=>flush( ).

        CASE lv_load_ok.
          WHEN 0.
* Fehler
            MESSAGE 'Bild nicht vorhanden.' TYPE 'S' DISPLAY LIKE 'E'.
          WHEN 1.
* Ok
            MESSAGE 'Bild konnte geladen werden.' TYPE 'S' DISPLAY LIKE 'I'.
        ENDCASE.
      CATCH cx_root INTO DATA(e).
        MESSAGE e->get_text( ) TYPE 'S' DISPLAY LIKE 'E'.
    ENDTRY.

  ENDIF.

Variante 3 (load_picture_from_sap_icons)

* Docking-Container für Bilddarstellung
DATA: o_dock TYPE REF TO cl_gui_docking_container.

PARAMETERS: p_url TYPE char255 DEFAULT 'http://url.de/1234.jpg' LOWER CASE.

AT SELECTION-SCREEN OUTPUT.

  IF NOT o_dock IS BOUND.
* Dockingcontainer erzeugen
    o_dock = NEW #( repid = sy-repid
                    dynnr = sy-dynnr
                    side  = cl_gui_docking_container=>dock_at_bottom
                    ratio = 30 ).

* Bild über die URL laden und anzeigen
    DATA(o_pic) = NEW cl_gui_picture( parent = o_dock ).
    o_pic->set_display_mode( display_mode = cl_gui_picture=>display_mode_fit_center ).

    TRY.
        o_pic->load_picture_from_sap_icons( icon_annotation ).
      CATCH cx_root INTO DATA(e).
        MESSAGE e->get_text( ) TYPE 'S' DISPLAY LIKE 'E'.
    ENDTRY.
  ENDIF.

[ABAP] Charts mit cl_gui_chart_engine / cl_gui_chart_engine_win anzeigen, ändern, laden und speichern (XML), Beispiel-Charts

Einleitung

Mit Hilfe der Klasse cl_gui_chart_engine können Charts generiert werden. Über XML-Dokumente kann die Anzeige konfiguriert bzw. Daten angezeigt werden. SAP liefert zur einfachen Konfiguration ein Tool namens Chart Designer. Die XML-Daten können aber auch manuell generiert werden, eine genaue Beschreibung findet man im Dokument “XML Format.pdf” des Chart Designers.
Mit Hilfe des unten stehenden Demo-Programms können auch XML-Daten für das Customizing generiert, geladen und gespeichert sowie Plot-Daten im XML-Format eingeladen werden. Es sind auch zwei einfache Beispiele für einen Bar-Chart sowie einen Scatter-Plot implementiert.

ABAP-Demoprogramm

* Chart-Demoprogramme
* GRAPHICS_GUI_CE_DEMO
* GRAPHICS_IGS_CE_TEST
* RSORA_TCS_DEMO

* Chart-Klassen
* CL_GUI_CHART_ENGINE
* CL_IGS_CHART_ENGINE
* CL_TIME_CHART_SIMPLE

DATA: it_sflight TYPE STANDARD TABLE OF sflight.
* globales Chart-Objekt
DATA: o_chart TYPE REF TO cl_gui_chart_engine.

CLASS lcl_events DEFINITION.
  PUBLIC SECTION.

    TYPES: ty_it_events TYPE STANDARD TABLE OF cntl_simple_event WITH DEFAULT KEY.

* Buttons
    CONSTANTS: co_btn_load_cust TYPE string VALUE 'BTN_LOAD_CUST'.
    CONSTANTS: co_btn_load_data TYPE string VALUE 'BTN_LOAD_DATA'.
    CONSTANTS: co_btn_save_cust TYPE string VALUE 'BTN_SAVE_CUST'.
    CONSTANTS: co_btn_print TYPE string VALUE 'BTN_PRINT'.
    CONSTANTS: co_btn_example_bar TYPE string VALUE 'BTN_EXAMPLE_BAR'.
    CONSTANTS: co_btn_example_scatter TYPE string VALUE 'BTN_EXAMPLE_SCATTER'.
    CONSTANTS: co_btn_clear TYPE string VALUE 'BTN_CLEAR'.

    CLASS-METHODS: on_click FOR EVENT click OF cl_gui_chart_engine
      IMPORTING
          element
          series
          point
          sender.
    CLASS-METHODS: on_value_change FOR EVENT value_change OF cl_gui_chart_engine
      IMPORTING
          series
          point
          value
          sender.
    CLASS-METHODS: on_property_change FOR EVENT property_change OF cl_gui_chart_engine
      IMPORTING
          element
          name
          value
          sender.

    CLASS-METHODS:
      on_function_selected FOR EVENT function_selected OF cl_gui_toolbar
        IMPORTING
            fcode
            sender.
ENDCLASS.

CLASS lcl_events IMPLEMENTATION.
* Klick auf Chart
  METHOD on_click.
    MESSAGE |Klick: { element } { series } { point }| TYPE 'S'.
  ENDMETHOD.

* Chart Wertänderung
  METHOD on_value_change.
    MESSAGE |Wert geändert: { series } { point } { value }| TYPE 'S'.
  ENDMETHOD.

* Chart Property-Änderung
  METHOD on_property_change.
    MESSAGE |Property: { element } { name } { value }| TYPE 'S'.
  ENDMETHOD.

* Toolbar Button geklickt
  METHOD on_function_selected.

    CASE fcode.
* Graph drucken
      WHEN co_btn_print.
        IF o_chart IS BOUND.
          DATA(o_cewp) = CAST cl_gui_chart_engine_win( o_chart->get_control( ) ).
          o_cewp->print( ).
        ENDIF.
* Graph zurücksetzen
      WHEN co_btn_clear.
        IF o_chart IS BOUND.
* Initialdaten setzen
          o_chart->set_data( data = '<?xml version="1.0" encoding="utf-8"?><SimpleChartData></SimpleChartData>' ).
* Initial-Customizing setzen
          o_chart->set_customizing( data = '<?xml version="1.0" encoding="utf-8"?><SAPChartCustomizing version="2.0"></SAPChartCustomizing>' ).
        ENDIF.
**********************************************************************
* Bargraph
* einfaches Balkendiagramm, bei dem jeweils 2 Punkte einer Series
* einer Kategorie zugeordnet werden
**********************************************************************
      WHEN co_btn_example_bar.
        IF o_chart IS BOUND.
* Initialdaten setzen
          o_chart->set_data( data_table = VALUE w3htmltabtype( ( |<?xml version="1.0" encoding="utf-8"?>| )
                                                               ( |<ChartData>| )
                                                               ( |  <Categories>| )
                                                               ( |    <Category>Category 1</Category>| )
                                                               ( |    <Category>Category 2</Category>| )
                                                               ( |    <Category>Category 3</Category>| )
                                                               ( |  </Categories>| )
                                                               ( |  <Series customizing="Series1" label="Series 1">| )
                                                               ( |    <Point>| )
                                                               ( |      <Value type="y">5</Value>| )
                                                               ( |    </Point>| )
                                                               ( |    <Point>| )
                                                               ( |      <Value type="y">10</Value>| )
                                                               ( |    </Point>| )
                                                               ( |    <Point>| )
                                                               ( |      <Value type="y">7</Value>| )
                                                               ( |    </Point>| )
                                                               ( |  </Series>| )
                                                               ( |  <Series customizing="Series2" label="Series 2">| )
                                                               ( |    <Point>| )
                                                               ( |      <Value type="y">7</Value>| )
                                                               ( |    </Point>| )
                                                               ( |    <Point>| )
                                                               ( |      <Value type="y">9</Value>| )
                                                               ( |    </Point>| )
                                                               ( |    <Point>| )
                                                               ( |      <Value type="y">23</Value>| )
                                                               ( |    </Point>| )
                                                               ( |  </Series>| )
                                                               ( |</ChartData>| ) ) ).
* Initial-Customizing setzen
          o_chart->set_customizing( data_table = VALUE w3htmltabtype( ( |<?xml version="1.0" encoding="utf-8"?>| )
                                                                      ( |<SAPChartCustomizing version="2.0">| )
                                                                      ( | <GlobalSettings>| )
                                                                      ( |  <Defaults>| )
                                                                      ( |   <ChartType>Columns</ChartType>| )
                                                                      ( |   <FontFamily>Arial</FontFamily>| )
                                                                      ( |  </Defaults>| )
                                                                      ( | </GlobalSettings>| )
                                                                      ( | <Elements>| )
                                                                      ( |  <ChartElements>| )
                                                                      ( |   <Title>| )
                                                                      ( |    <Caption>Bargraph</Caption>| )
                                                                      ( |   </Title>| )
                                                                      ( |  </ChartElements>| )
                                                                      ( | </Elements>| )
                                                                      ( |</SAPChartCustomizing>| ) ) ).
        ENDIF.
**********************************************************************
* Scatterplot
* x,y-Punkte-Diagramm mit zwei Linien (Series)
* Vorgabe von Achse (min, max), Punkteigenschaften, Farbe, Legende
**********************************************************************
      WHEN co_btn_example_scatter.
        IF o_chart IS BOUND.
* Initialdaten setzen
          o_chart->set_data( data_table = VALUE w3htmltabtype( ( |<?xml version="1.0" encoding="utf-8"?>| )
                                                               ( |<ChartData>| )
                                                               ( |  <Series customizing="Series1" label="y1">| )
                                                               ( |    <Point label="P1">| )
                                                               ( |      <Value type="x">-5.1</Value>| )
                                                               ( |      <Value type="y">-2.3</Value>| )
                                                               ( |    </Point>| )
                                                               ( |    <Point label="P2">| )
                                                               ( |      <Value type="x">1.2</Value>| )
                                                               ( |      <Value type="y">1.1</Value>| )
                                                               ( |    </Point>| )
                                                               ( |    <Point label="P3">| )
                                                               ( |      <Value type="x">6.2</Value>| )
                                                               ( |      <Value type="y">7.4</Value>| )
                                                               ( |    </Point>| )
                                                               ( |  </Series>| )
                                                               ( |  <Series customizing="Series2" label="y2">| )
                                                               ( |    <Point label="P1">| )
                                                               ( |      <Value type="x">-5.1</Value>| )
                                                               ( |      <Value type="y">0.3</Value>| )
                                                               ( |    </Point>| )
                                                               ( |    <Point label="P2">| )
                                                               ( |      <Value type="x">1.2</Value>| )
                                                               ( |      <Value type="y">3.5</Value>| )
                                                               ( |    </Point>| )
                                                               ( |    <Point label="P3">| )
                                                               ( |      <Value type="x">6.2</Value>| )
                                                               ( |      <Value type="y">8.9</Value>| )
                                                               ( |    </Point>| )
                                                               ( |  </Series>| )
                                                               ( |</ChartData>| ) ) ).
* Initial-Customizing setzen
          o_chart->set_customizing( data_table = VALUE w3htmltabtype( ( |<?xml version="1.0" encoding="utf-8"?>| )
                                                                      ( |<SAPChartCustomizing version="2.0">| )
                                                                      ( | <GlobalSettings>| )
                                                                      ( |  <Dimension>Two</Dimension>| )
                                                                      ( |  <ColorPalette>Tradeshow</ColorPalette>| )
                                                                      ( |  <Defaults>| )
                                                                      ( |   <ChartType>Scatter</ChartType>| )
                                                                      ( |   <FontFamily>Arial</FontFamily>| )
                                                                      ( |  </Defaults>| )
                                                                      ( | </GlobalSettings>| )
                                                                      ( | <Elements>| )
                                                                      ( |  <ChartElements>| )
                                                                      ( |   <Title>| )
                                                                      ( |    <Caption>Scatterplot</Caption>| )
                                                                      ( |   </Title>| )
                                                                      ( |   <Subtitle>| )
                                                                      ( |    <Caption>Daten und Settings</Caption>| )
                                                                      ( |   </Subtitle>| )
                                                                      ( |   <Legend>| )
                                                                      ( |    <Alignment>ToPlotArea</Alignment>| )
                                                                      ( |    <Position>TopRight</Position>| )
                                                                      ( |   </Legend>| )
                                                                      ( |  </ChartElements>| )
                                                                      ( |  <ChartAxes>| )
                                                                      ( |   <ValueAxis id="ValueAxis1">| )
                                                                      ( |    <Visibility>true</Visibility>| )
                                                                      ( |    <Minimum>-10</Minimum>| )
                                                                      ( |    <MinimumCalculation>UserDefined</MinimumCalculation>| )
                                                                      ( |    <Maximum>10</Maximum>| )
                                                                      ( |    <MaximumCalculation>UserDefined</MaximumCalculation>| )
                                                                      ( |    <ScalingType>Linear</ScalingType>| )
                                                                      ( |    <Order>Ascending</Order>| )
                                                                      ( |    <Position>Primary</Position>| )
                                                                      ( |    <Title>| )
                                                                      ( |     <Caption>x</Caption>| )
                                                                      ( |    </Title>| )
                                                                      ( |   </ValueAxis>| )
                                                                      ( |   <ValueAxis id="ValueAxis2">| )
                                                                      ( |    <Visibility>true</Visibility>| )
                                                                      ( |    <Minimum>-10</Minimum>| )
                                                                      ( |    <MinimumCalculation>UserDefined</MinimumCalculation>| )
                                                                      ( |    <Maximum>10</Maximum>| )
                                                                      ( |    <MaximumCalculation>UserDefined</MaximumCalculation>| )
                                                                      ( |    <ScalingType>Linear</ScalingType>| )
                                                                      ( |    <Order>Ascending</Order>| )
                                                                      ( |    <Position>Primary</Position>| )
                                                                      ( |    <Title>| )
                                                                      ( |     <Caption>x</Caption>| )
                                                                      ( |    </Title>| )
                                                                      ( |   </ValueAxis>| )
                                                                      ( |  </ChartAxes>| )
                                                                      ( | </Elements>| )
                                                                      ( | <Values>| )
                                                                      ( |  <Series>| )
                                                                      ( |   <ShowLabel>true</ShowLabel>| )
                                                                      ( |   <LineColor>@20</LineColor>| )
                                                                      ( |  </Series>| )
                                                                      ( |  <Series id="Series1">| )
                                                                      ( |   <ShowLabel>true</ShowLabel>| )
                                                                      ( |   <LineColor>@20</LineColor>| )
                                                                      ( |   <Color>@20</Color>| )
                                                                      ( |  </Series>| )
                                                                      ( |  <Series id="Series2">| )
                                                                      ( |   <ShowLabel>true</ShowLabel>| )
                                                                      ( |   <LineColor>@60</LineColor>| )
                                                                      ( |   <Color>@60</Color>| )
                                                                      ( |  </Series>| )
                                                                      ( | </Values>| )
                                                                      ( |</SAPChartCustomizing>| ) ) ).
        ENDIF.
* XML Chart-Customizing speichern
      WHEN co_btn_save_cust.
        IF o_chart IS BOUND.
          DATA: it_xml TYPE w3htmltabtype.

          DATA(o_cew_save) = CAST cl_gui_chart_engine_win( o_chart->get_control( ) ).
          o_cew_save->get_customizing( IMPORTING data_table = it_xml ).

          DATA: lv_action TYPE i.
          DATA: lv_filename TYPE string.
          DATA: lv_fullpath TYPE string.
          DATA: lv_path TYPE string.

          TRY.
* Savedialog anzeigen
              cl_gui_frontend_services=>file_save_dialog( EXPORTING
                                                            default_file_name = 'chart.xml'
                                                            default_extension = 'xml'
                                                            file_filter       = |XML (*.xml)\|*.xml\|{ cl_gui_frontend_services=>filetype_all }|
                                                          CHANGING
                                                            filename          = lv_filename
                                                            path              = lv_path
                                                            fullpath          = lv_fullpath
                                                            user_action       = lv_action ).

              IF lv_action EQ cl_gui_frontend_services=>action_ok.

* XML-Daten lokal speichern
                cl_gui_frontend_services=>gui_download( EXPORTING
                                                          filename = lv_fullpath
                                                          filetype = 'BIN'
                                                        CHANGING
                                                          data_tab = it_xml ).

              ENDIF.
            CATCH cx_root INTO DATA(e_txt).
              MESSAGE e_txt->get_text( ) TYPE 'E'.
          ENDTRY.
        ENDIF.
* XML Chart-Customizing laden
      WHEN co_btn_load_cust.
        IF o_chart IS BOUND.
          DATA: lv_rc_cust TYPE i.
          DATA: it_files_cust TYPE filetable.
          DATA: lv_action_open_cust TYPE i.

* FileOpen-Dialog aufrufen
          TRY.
              cl_gui_frontend_services=>file_open_dialog( EXPORTING
                                                            file_filter = |XML (*.xml)\|*.xml\|{ cl_gui_frontend_services=>filetype_all }|
                                                          CHANGING
                                                            file_table  = it_files_cust
                                                            rc          = lv_rc_cust
                                                            user_action = lv_action_open_cust ).

              IF lv_action_open_cust = cl_gui_frontend_services=>action_ok.
* wenn Datei ausgewählt wurde
                IF lines( it_files_cust ) > 0.

                  DATA: lv_filesize_cust TYPE w3param-cont_len.
                  DATA: it_xml_cust_up TYPE w3htmltabtype.

                  cl_gui_frontend_services=>gui_upload( EXPORTING
                                                          filename   = |{ it_files_cust[ 1 ]-filename }|
                                                          filetype   = 'BIN'
                                                        IMPORTING
                                                          filelength = lv_filesize_cust
                                                        CHANGING
                                                          data_tab   = it_xml_cust_up ).

* XML-Daten setzen
                  o_chart->set_customizing( data_table = it_xml_cust_up ).

                ENDIF.
              ENDIF.

            CATCH cx_root INTO DATA(e_text_cust).
              MESSAGE e_text_cust->get_text( ) TYPE 'S' DISPLAY LIKE 'E'.
          ENDTRY.

        ENDIF.
* XML Chart-Daten laden
      WHEN co_btn_load_data.
        IF o_chart IS BOUND.
          DATA: lv_rc_data TYPE i.
          DATA: it_files_data TYPE filetable.
          DATA: lv_action_open_data TYPE i.

* FileOpen-Dialog aufrufen
          TRY.
              cl_gui_frontend_services=>file_open_dialog( EXPORTING
                                                            file_filter = |XML (*.xml)\|*.xml\|{ cl_gui_frontend_services=>filetype_all }|
                                                          CHANGING
                                                            file_table  = it_files_data
                                                            rc          = lv_rc_data
                                                            user_action = lv_action_open_data ).

              IF lv_action_open_data = cl_gui_frontend_services=>action_ok.
* wenn Datei ausgewählt wurde
                IF lines( it_files_data ) > 0.

                  DATA: lv_filesize_data TYPE w3param-cont_len.
                  DATA: it_xml_data_up TYPE w3htmltabtype.

                  cl_gui_frontend_services=>gui_upload( EXPORTING
                                                          filename   = |{ it_files_data[ 1 ]-filename }|
                                                          filetype   = 'BIN'
                                                        IMPORTING
                                                          filelength = lv_filesize_data
                                                        CHANGING
                                                          data_tab   = it_xml_data_up ).

* XML-Daten setzen
                  o_chart->set_data( data_table = it_xml_data_up ).

                ENDIF.
              ENDIF.

            CATCH cx_root INTO DATA(e_text_data).
              MESSAGE e_text_data->get_text( ) TYPE 'S' DISPLAY LIKE 'E'.
          ENDTRY.

        ENDIF.
    ENDCASE.
  ENDMETHOD.
ENDCLASS.

INITIALIZATION.
**********************************************************************
* GUI
**********************************************************************
* Splitter erzeugen
  DATA(o_splitter) = NEW cl_gui_splitter_container( parent = cl_gui_container=>default_screen
                                                    no_autodef_progid_dynnr = abap_true
                                                    rows = 2
                                                    columns = 1 ).

* absoluter Modus für Zeilenhöhe
  o_splitter->set_row_mode( mode = cl_gui_splitter_container=>mode_absolute ).

* Höhe absolut 24 Pixel für Splitter oben
  o_splitter->set_row_height( id = 1 height = 24 ).

* Splitter für oberen Container fest und verborgen
  o_splitter->set_row_sash( id = 1
                            type = cl_gui_splitter_container=>type_movable
                            value = cl_gui_splitter_container=>false ).

  o_splitter->set_row_sash( id = 1
                            type = cl_gui_splitter_container=>type_sashvisible
                            value = cl_gui_splitter_container=>false ).

* Top- und Bottom-Container holen
  DATA(o_container_top) = o_splitter->get_container( row = 1 column = 1 ).
  DATA(o_container_bottom) = o_splitter->get_container( row = 2 column = 1 ).

* Toolbar hoizontal
  DATA(o_tool) = NEW cl_gui_toolbar( parent       = o_container_top
                                     display_mode = cl_gui_toolbar=>m_mode_horizontal ).

* Eventtypten müssen gesondert registriert werden
  DATA(it_events) = VALUE lcl_events=>ty_it_events( ( eventid    = cl_gui_toolbar=>m_id_function_selected
                                                      appl_event = abap_true ) ).

  o_tool->set_registered_events( events = it_events ).

* Toolbar-Buttons hinzufügen
* Buttontypen sind in Typgruppe CNTB definiert
  o_tool->add_button( fcode       = CONV #( lcl_events=>co_btn_load_cust )
                      icon        = icon_open
                      butn_type   = cntb_btype_button
                      text        = 'Load settings'
                      quickinfo   = 'Load chart settings'
                      is_checked  = abap_false
                      is_disabled = abap_false ).

  o_tool->add_button( fcode       = ''
                      icon        = ''
                      butn_type   = cntb_btype_sep
                      text        = ''
                      quickinfo   = ''
                      is_checked  = abap_false
                      is_disabled = abap_false ).

  o_tool->add_button( fcode       = CONV #( lcl_events=>co_btn_save_cust )
                      icon        = icon_system_save
                      butn_type   = cntb_btype_button
                      text        = 'Save settings'
                      quickinfo   = 'Save chart settings'
                      is_checked  = abap_false
                      is_disabled = abap_false ).

  o_tool->add_button( fcode       = ''
                      icon        = ''
                      butn_type   = cntb_btype_sep
                      text        = ''
                      quickinfo   = ''
                      is_checked  = abap_false
                      is_disabled = abap_false ).

  o_tool->add_button( fcode       = CONV #( lcl_events=>co_btn_load_data )
                      icon        = icon_open
                      butn_type   = cntb_btype_button
                      text        = 'Load data'
                      quickinfo   = 'Load chart data'
                      is_checked  = abap_false
                      is_disabled = abap_false ).

  o_tool->add_button( fcode       = ''
                      icon        = ''
                      butn_type   = cntb_btype_sep
                      text        = ''
                      quickinfo   = ''
                      is_checked  = abap_false
                      is_disabled = abap_false ).

  o_tool->add_button( fcode       = CONV #( lcl_events=>co_btn_example_bar )
                      icon        = icon_display
                      butn_type   = cntb_btype_button
                      text        = 'Beispiel Bargraph'
                      quickinfo   = 'Beispieldaten + Settings'
                      is_checked  = abap_false
                      is_disabled = abap_false ).

  o_tool->add_button( fcode       = ''
                      icon        = ''
                      butn_type   = cntb_btype_sep
                      text        = ''
                      quickinfo   = ''
                      is_checked  = abap_false
                      is_disabled = abap_false ).

  o_tool->add_button( fcode       = CONV #( lcl_events=>co_btn_example_scatter )
                      icon        = icon_display
                      butn_type   = cntb_btype_button
                      text        = 'Beispiel Scatterplot'
                      quickinfo   = 'Beispieldaten + Settings'
                      is_checked  = abap_false
                      is_disabled = abap_false ).

  o_tool->add_button( fcode       = ''
                      icon        = ''
                      butn_type   = cntb_btype_sep
                      text        = ''
                      quickinfo   = ''
                      is_checked  = abap_false
                      is_disabled = abap_false ).

  o_tool->add_button( fcode       = CONV #( lcl_events=>co_btn_clear )
                      icon        = icon_delete
                      butn_type   = cntb_btype_button
                      text        = 'Löschen'
                      quickinfo   = 'Alles löschen'
                      is_checked  = abap_false
                      is_disabled = abap_false ).

  o_tool->add_button( fcode       = ''
                      icon        = ''
                      butn_type   = cntb_btype_sep
                      text        = ''
                      quickinfo   = ''
                      is_checked  = abap_false
                      is_disabled = abap_false ).

  o_tool->add_button( fcode       = CONV #( lcl_events=>co_btn_print )
                      icon        = icon_print
                      butn_type   = cntb_btype_button
                      text        = 'Drucken'
                      quickinfo   = 'Chart drucken'
                      is_checked  = abap_false
                      is_disabled = abap_false ).

* Eventhandler registrieren
  SET HANDLER lcl_events=>on_function_selected FOR o_tool.

**********************************************************************
* Chart
**********************************************************************
* Daten holen
  SELECT * FROM sflight INTO TABLE it_sflight UP TO 10 ROWS.

* Chart in unteren GUI-Container einbetten
  o_chart = NEW #( parent = o_container_bottom ).

**********************************************************************
* Chart-Daten generieren
**********************************************************************
* leere Defaultdaten übergeben
  DATA(it_xml_data) = VALUE w3htmltabtype( ).
  o_chart->set_data( data_table = it_xml_data ).

**********************************************************************
* Chart-Customizing generieren
**********************************************************************
* leere Defaultdaten übergeben
  DATA(it_xml_customizing) = VALUE w3htmltabtype( ).
  o_chart->set_customizing( data_table = it_xml_customizing ).

**********************************************************************
* zus. Einstellungen
**********************************************************************
* Einstellungsdialoge anzeigen
  DATA(o_adj) = CAST cl_gui_chart_engine_win( o_chart->get_control( ) ).
* Design-Anpassungen ermöglichen
  o_adj->set_design_mode( flag = abap_true event = abap_true ).
* Einstellmöglichkeiten beschränken
*  o_adj->restrict_chart_types( charttypes = 'Columns|Lines' ).
*  o_adj->restrict_property_events( events = 'ChartType' ).

* Wertänderungen ermöglichen
  o_adj->enable_value_change( ).

* Event-Handler registrieren
  SET HANDLER lcl_events=>on_click FOR o_chart.
  SET HANDLER lcl_events=>on_value_change FOR o_chart.
  SET HANDLER lcl_events=>on_property_change FOR o_chart.

* Graph anzeigen
  o_chart->render( ).

* leere Toolbar ausblenden
  cl_abap_list_layout=>suppress_toolbar( ).

* cl_gui_container=>default_screen erzingen
  WRITE: / space.

Weitere XML-Beispiele

Customizing für Scatter-Plot

<?xml version="1.0" encoding="utf-8"?>
<SAPChartCustomizing version="2.0">
 <GlobalSettings>
  <Dimension>Two</Dimension>
  <Defaults>
   <ChartType>Scatter</ChartType>
   <FontFamily>Arial</FontFamily>
  </Defaults>
 </GlobalSettings>
 <Elements>
  <ChartElements>
   <Title>
    <Caption>Beispiel-Titel</Caption>
   </Title>
   <Subtitle>
    <Caption>Untertitel</Caption>
   </Subtitle>
   <Legend>
    <Alignment>ToPlotArea</Alignment>
    <Position>Right</Position>
   </Legend>
  </ChartElements>
  <ChartAxes>
   <ValueAxis id="ValueAxis1">
    <Visibility>true</Visibility>
    <MinimumCalculation>Automatic</MinimumCalculation>
    <MaximumCalculation>Automatic</MaximumCalculation>
    <ScalingType>Linear</ScalingType>
    <Order>Ascending</Order>
    <Position>Primary</Position>
    <Title>
     <Caption>x</Caption>
    </Title>
   </ValueAxis>
  </ChartAxes>
 </Elements>
</SAPChartCustomizing>

Daten für Scatter-Plot

<?xml version="1.0" encoding="utf-8"?>
<ChartData>
  <Categories>
    <Category>Category 1</Category>
  </Categories>
  <Series customizing="Series1" label="y">
    <Point label="P1">
      <Value type="x">0</Value>
      <Value type="y">5</Value>
    </Point>
    <Point label="P2">
      <Value type="x">1</Value>
      <Value type="y">10</Value>
    </Point>
    <Point label="P3">
      <Value type="x">2</Value>
      <Value type="y">7</Value>
    </Point>
  </Series>
</ChartData>

Customizing für Bar-Chart

<?xml version="1.0" encoding="utf-8"?>
<SAPChartCustomizing version="2.0">
 <GlobalSettings>
  <Defaults>
   <ChartType>Columns</ChartType>
   <FontFamily>Arial</FontFamily>
  </Defaults>
 </GlobalSettings>
 <Elements>
  <ChartElements>
   <Title>
    <Visibility>true</Visibility>
    <Caption>Caption1</Caption>
   </Title>
  </ChartElements>
 </Elements>
</SAPChartCustomizing>

Daten für Bar-Chart

<?xml version="1.0" encoding="utf-8"?>
<ChartData>
  <Categories>
    <Category>Category 1</Category>
    <Category>Category 2</Category>
    <Category>Category 3</Category>
  </Categories>
  <Series customizing="Series1" label="Series 1">
    <Point>
      <Value type="y">5</Value>
    </Point>
    <Point>
      <Value type="y">10</Value>
    </Point>
    <Point>
      <Value type="y">7</Value>
    </Point>
  </Series>
  <Series customizing="Series2" label="Series 2">
    <Point>
      <Value type="y">7</Value>
    </Point>
    <Point>
      <Value type="y">9</Value>
    </Point>
    <Point>
      <Value type="y">23</Value>
    </Point>
  </Series>
</ChartData>

Weiterführende Infos

Easy Charts
Creating Charts
abapblog.com
catmull rom
Custom Chart Creation

[ABAP] Screenshot speichern

DATA: lv_mime_type TYPE string.
DATA: lv_image_bytes TYPE xstring.

TRY.
* Screenshot aufnehmen
    cl_gui_frontend_services=>get_screenshot( IMPORTING
                                                mime_type_str = lv_mime_type
                                                image         = lv_image_bytes ).

* MIME-Typ (PNG) ausgeben
    WRITE: / lv_mime_type.

    DATA: lv_action TYPE i.
    DATA: lv_filename TYPE string.
    DATA: lv_fullpath TYPE string.
    DATA: lv_path TYPE string.

* Savedialog anzeigen
    cl_gui_frontend_services=>file_save_dialog( EXPORTING
                                                  default_file_name = 'image.png'
                                                  default_extension = 'png'
                                                  file_filter       = '(*.png)|*.png|'
                                                CHANGING
                                                  filename          = lv_filename
                                                  path              = lv_path
                                                  fullpath          = lv_fullpath
                                                  user_action       = lv_action ).

    IF lv_action EQ cl_gui_frontend_services=>action_ok.

* XSTRING -> SOLIX (RAW)
      DATA(it_raw_data) = cl_bcs_convert=>xstring_to_solix( EXPORTING iv_xstring = lv_image_bytes ).

* Daten lokal speichern
      cl_gui_frontend_services=>gui_download( EXPORTING
                                                filename     = lv_fullpath
                                                filetype     = 'BIN'
                                                bin_filesize = xstrlen( lv_image_bytes )
                                              CHANGING
                                                data_tab     = it_raw_data ).

    ENDIF.
  CATCH cx_root INTO DATA(e_txt).
ENDTRY.
ENDTRY.