cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

google charts in Abap

JanaSharb
Explorer

on ‎2023 Aug 15 7:07 AM

483

Hi Experts,

I have a task to display some customer data as a Chart.

The following code shows just blank, although it works well on jsfiddle!!

Please any Idea why it is not working in ABAP ?

Did I miss something?

Regards,

 DATA(it_html)  = VALUE html_table( ( |<html>| )
                                       ( |<head>| )
                                       ( |<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>| )
                                       ( | <script type="text/javascript">| )
                                       ( |google.charts.load('current',\{'packages':['line'] \});| )
                                       ( |google.charts.setOnLoadCallback(drawChart);| )
                                       ( |function drawChart() \{| )
                                       ( |var data = new google.visualization.DataTable()| )
                                       ( |data.addColumn('date', 'test');| )
                                       ( |data.addColumn('number', 'tool1');| )
                                       ( |data.addColumn('number', 'tool2');| )
                                       ( |data.addColumn('number', 'tool3');| )
                                       ( |data.addRows([| )
                                        ( |[new Date(2023,7,1),  10, 1000, 50],| )
                                         ( |[new Date(2023,7,30),  10, 1000, 50],| )
                                          ( |]);| )
                                          ( |var options = \{| )
                                          ( |chart: \{| )
                                          ( |title: 'Company Performance',| )
                                          ( |subtitle: 'Sales, Expenses, and Profit: 2014-2017',| )
                                          ( |\},| )
                                          ( |vAxis: \{minValue: 0,| )
                                          ( |maxValue: 10000,| )
                                          ( | format: "percent"| )
                                          ( |\},| )
                                          ( |width: 900,| )
                                          ( |height: 500,| )
                                          ( |\};| )
                                          ( |var chart = new google.charts.Line(document.getElementById('line'));| )
                                          ( |chart.draw(data, options);| )
                                            ( | \}| )
                                               ( | </script>| )
                                                ( |</head>| )
                                                ( |<body>| )
                                                 ( | <div id="line"></div>| )
                                                  ( |</body>| )
                                                   ( | </html>| )

                                       ).
CALL METHOD go_picture_html->load_data
      EXPORTING
        url          = lv_url_html
      IMPORTING
        assigned_url = lv_url_html
      CHANGING
        data_table   = it_html
      EXCEPTIONS
        OTHERS       = 1.

    IF sy-subrc = 0.
      "Rahmen weglassen
      CALL METHOD go_picture_html->set_ui_flag
        EXPORTING
          uiflag = cl_gui_html_viewer=>uiflag_no3dborder.

      "HTML-File anzeigen
      CALL METHOD go_picture_html->show_data
        EXPORTING
          url = lv_url_html.
    ELSE.
      MESSAGE i001(00) WITH 'Fehler mit dem Laden des HTML'.
      LEAVE LIST-PROCESSING.
    ENDIF.

Know the answer?

Help others by sharing your knowledge.

Answer

Need more details?

Request clarification before answering.

Show replies
Show replies
Sandra_Rossi
Active Contributor
‎2023 Aug 15 3:04 PM

Apart what Tomas said, I'd recommend to not hardcode HTML/Javascript in ABAP code, but have the file in any place you want (e.g. SMW0, MIME repository or whatever).

If you want to hardcode for some reason (proof of concept, etc.), I recommend something like that:

data(text) = concat_lines_of( sep = |\r\n| table = VALUE string_table(
    ( `<head>` )
    ( `<script type="text/javascript...` )
    ( `...` ) ).

data(soli_tab) = cl_bcs_convert=>string_to_soli( text ).

go_picture_html->load_data( ...
      CHANGING data_table = soli_tab
      ...

Accepted Solutions (0)

Answers (1)

Answers (1)

Tomas_Buryanek
Product and Topic Expert
Product and Topic Expert
‎2023 Aug 15 12:38 PM

There is something strange happening with the HTML+JS code in the CL_GUI_HTML_VIEWER.

I do not know what is the exact issue. But when I add "new line" (\n) control characters at the end of each line, then it shows Google chart OK. But result page code has empty line between each code line.

Without new line characters code is strange.

Try to experiment more with loading code to internal table + to the CL_GUI_HTML_VIEWER.

Show replies
Show replies
Tomas_Buryanek
Product and Topic Expert
Product and Topic Expert
‎2023 Aug 22 11:53 AM
0 Kudos

Additional thought:

If the HTML+JS code is "embedded" / hardcoded in ABAP code like this, then it would be worth to try "minify" it.

There are online services or IDE plugins to "minify" HTML & JS code. It will make code much more compact. It will became almost unreadable. But that can be reversed by "pretty printer", when someone needs to update it.

Ask a Question