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