Purpose
 You want to display a  bar chart on the screen

Solution
Add the following JavaScript function in your JavaScript file:

JavaScript

To include the framework, for example the Open Source chart framework "chart.js", call up "loadJS" with the framework URL:

JavaScript

Example
We display the following chart, embedded into the SAP GUI window:



GuiXT script

GuiXT 
Pushbutton  (5,2)         "@GZ@Visualize top order positions" _
  process="VA03_show_orders.txt" _
  size=(2,27) 

 InputField    (5,31) "Customer"  (5,51) _
  size=8        _
  name="KUNNR" 

InputField    (6,31) "Maximum elements"      (6,51) _
  size=8        _
  name="maxresults"       _
  -numerical _
  -alignRight

     // the "chart.js" framework requires 
     // IE11 emulation mode of the browser control
ProcessingOption ie_browser_emulation="11001"

 Box (8,2) (24,67) _
  "Sales Analysis" 

Control (8.8,3.1) (23.6,65.9)  -closeOnHide _
  progID="about:blank" _
  name="mychart"

InputScript script

GuiXT 
CreateStructure V[return] _
  MESSAGE 

// items
CreateTable V[salesorders] _
  MATERIAL NET_VALUE SHORT_TEXT 

// items
CreateTable V[salesorders2] _
  MATERIAL NET_VALUE SHORT_TEXT 

Set V[SALESORG] "1010" 

// read order
Call "BAPI_SALESORDER_GETLIST"   _
  export.CUSTOMER_NUMBER="KUNNR" _
  export.SALES_ORGANIZATION="SALESORG" _
  import.SALES_ORDERS="salesorders" _
  import.RETURN="return"

 Sort table="salesorders" columns="NET_VALUE" -descending 

CallJS display_barchart "&V[mychart]" 

return 

 

JavaScript

JavaScript

Hint

If you set the width and height of the container element for the chart

ctx.style.width = "100%";
ctx.style.height = "100%";

and

responsive: true

for the chart options then you can resize the control in wysiwyg-mode easily:

Components
InputAssistant + Controls