Create a nice looking chart with CL_GUI_CHART_ENGINE – Part 3 – Chart Data and render详解编程语言

We know already how to use chart designer and we’re able to save/read it’s result to/from standard texts. So let’s go for most interesting part – rendering the chart. Of course we will need some data but I will use dummy one just to show you how to create the chart, you can replace this part with loop on your internal table or even better change it in the way that you’ll pass internal table.

In the method provided bellow I firstly create custom container object (
cl_gui_custom_container) to place the chart in it, then I create chart engine (
cl_gui_chart_engine), then using
 if_xml I create an xml data container which in fact can be written using simple concatenate statement but it’s not nice to change and easy to mess.

So after we receive an xml with data then I will pass it to chart engine, then I will run the method prepared in previous part (
Create a nice looking chart with CL_GUI_CHART_ENGINE – Part 2 – Customization ) to read the customization of the chart and I will pass it also to engine. Finally I will render the chart.

Importing:

I_CONTAINER_NAME TYPE CSEQUENCE -> custom container’s name

Changing:

CO_CHART_ENGINE TYPE REF TO CL_GUI_CHART_ENGINE
CO_CONTAINER TYPE REF TO CL_GUI_CUSTOM_CONTAINER

Implementation:

method create_and_init_chart.
*This is the code from IT虾米网
  dataf_lenght type i.
  dataf_xstring type xstring.
  datafo_ixml_mf type ref to if_ixml.
  datafo_ixml_sf type ref to if_ixml_stream_factory.
  dataf_ixml_data_doc   type ref to if_ixml_document.
  dataf_ostream         type ref to if_ixml_ostream.
  dataf_encoding        type ref to if_ixml_encoding.
* chart data elements:
  dataf_chartdata       type ref to if_ixml_element,
        f_categories      type ref to if_ixml_element,
        f_category        type ref to if_ixml_element,
        f_series          type ref to if_ixml_element,
        f_point           type ref to if_ixml_element,
        f_value           type ref to if_ixml_element.


  if co_container is initial.
    “create container
    create object co_container
      
exporting
        container_name i_container_name.
    “create an engine assigned to our container
    create object co_chart_engine
      
exporting
        parent co_container.
  endif.


* processing data
  fo_ixml_mf cl_ixml=>create( ).
  fo_ixml_sf fo_ixml_mf->create_stream_factory( ).
* create an empty document and set encoding
  f_ixml_data_doc fo_ixml_mf->create_document( ).
  f_encoding fo_ixml_mf->create_encoding(
                           byte_order    if_ixml_encoding=>co_little_endian
                           character_set 
‘utf-8’ ).
  f_ixml_data_doc->set_encodingf_encoding ).

* Now build a DOM, representing an XML document with chart data
  f_chartdata f_ixml_data_doc->create_simple_element(
                                        name   ‘ChartData’
                                        parent f_ixml_data_doc ).

* Categories (parent)
  f_categories f_ixml_data_doc->create_simple_element(
                                        name   ‘Categories’
                                        parent f_chartdata ).
* Categories (children)
  f_category f_ixml_data_doc->create_simple_element(
                                        name   ‘Category’
                                        parent f_categories ).
  f_category->if_ixml_node~set_value‘My first category’ ).

  f_category f_ixml_data_doc->create_simple_element(
                                      name   ‘Category’
                                      parent f_categories ).
  f_category->if_ixml_node~set_value‘My second category’ ).
  f_category f_ixml_data_doc->create_simple_element(
                                      name   ‘Category’
                                      parent f_categories ).
  f_category->if_ixml_node~set_value‘My third category’ ).


* Build series (we need only 1)
  f_series f_ixml_data_doc->create_simple_element(
            name ‘Series’
            parent f_chartdata ).
  f_series->set_attributename ‘customizing’
                           value ‘Series1’ ).

*1st category
  f_point f_ixml_data_doc->create_simple_element(
                              name ‘Point’
                              parent f_series ).
  f_point->set_attributename ‘customizing’
                          value ‘Category1’ ).
  f_point->set_attributename ‘label’
                        value ‘Best one’ ).
  f_value f_ixml_data_doc->create_simple_element(
                        name ‘Value’
                        parent f_point ).
  f_value->if_ixml_node~set_value’50’ ).

*2nd category
  f_point f_ixml_data_doc->create_simple_element(
                              name ‘Point’
                              parent f_series ).
  f_point->set_attributename ‘customizing’
                          value ‘Category2’ ).
  f_point->set_attributename ‘label’
                          value ‘Not so bad’ ).
  f_value f_ixml_data_doc->create_simple_element(
                              name ‘Value’
                              parent f_point ).
  f_value->if_ixml_node~set_value’35’ ).

*3rd category
  f_point f_ixml_data_doc->create_simple_element(
                              name ‘Point’
                              parent f_series ).
  f_point->set_attributename ‘customizing’
                           value ‘Category3’ ).
  f_point->set_attributename ‘label’
                          value ‘Worst one’ ).
  f_value f_ixml_data_doc->create_simple_element(
                              name ‘Value’
                              parent f_point ).
  f_value->if_ixml_node~set_value’15’ ).

* create ostream (into string variable) and render document into stream
  f_ostream fo_ixml_sf->create_ostream_xstringf_xstring ).
  f_ixml_data_doc->renderf_ostream ). “here f_xstring is filled

  “set data to chart
  co_chart_engine->set_dataxdata f_xstring ).

  “get customizing from Standard text – method found here
  f_xstring chart_customizing(
                                      i_textname ‘Z_MY_CHART_CUSTOMIZING’
                                      i_title    ‘My nice chart’
                                      i_subtitle ‘http://abapblog.com’).
  “set customizing
  co_chart_engine->set_customizingxdata f_xstring ).

  “render chart
  co_chart_engine->render( ).

endmethod.

Example of use:

To be able to use the method we should firstly create a screen with custom control and call it 
CHART_SAMPLE. Remember about allowing of resizing of the control so the chart can change it size together with window size change. 


Create a nice looking chart with CL_GUI_CHART_ENGINE - Part 3 - Chart Data and render详解编程语言

 
Add variable name for OK Code also to be able to handle 
PAI.

 
Create a nice looking chart with CL_GUI_CHART_ENGINE - Part 3 - Chart Data and render详解编程语言
 
Add 
PBO and 
PAI modules, 
PBO I will use to render chart and
 PAI to exit from the screen.

Create a nice looking chart with CL_GUI_CHART_ENGINE - Part 3 - Chart Data and render详解编程语言

 

At the end we would need also 
GUI Status, to simplify it I will only fill few buttons with 
END command.
Create a nice looking chart with CL_GUI_CHART_ENGINE - Part 3 - Chart Data and render详解编程语言

 
Example Code for program:

report zab_chart_pie.

datag_okcode type syucomm.
datago_abapblog type ref to zcl_abapblog_com“our class with chart methods
datago_chart type ref to cl_gui_chart_engine.
datago_container type ref to cl_gui_custom_container.


call screen 0100.

*———————————————————————-*
* MODULE pbo OUTPUT
*———————————————————————-*
*
*———————————————————————-*
module pbo output.
 set pf-status ‘STATUS_0100’.

 if go_abapblog is initial.
  create object go_abapblog.

  “render chart
  go_abapblog->create_and_init_chart(
              exporting
                i_container_name ‘CHART_SAMPLE’
              changing
                co_chart_engine go_chart
                co_container 
go_container
                                  ).

 endif.
endmodule“pbo OUTPUT


*———————————————————————-*
* MODULE pai INPUT
*———————————————————————-*
*
*———————————————————————-*
module pai input.
 if g_okcode eq ‘END’.
   leave to screen 0.
 endif.
endmodule“pai INPUT

Result of our work:
Create a nice looking chart with CL_GUI_CHART_ENGINE - Part 3 - Chart Data and render详解编程语言

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/20168.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论