Purpose
Data is to be visualized in the form of a diagram or chart on the SAP GUI.
Solution
Embed an HTML page that uses a JavaScript library for visualizing data.
Use the GuiXT object in JavaScript to obtain the data.
Example:
There are a number of sophisticated javaScript frameworks for data visualization. Many of them are open-source and can be used straight away. In this example the Chart.JS library is used. The library is embedded into a local HTML page and this page is then embedded and controlled with the GuiXT control on the screen.

The chart is intended to show the items with the highest sales of a customer's purchase orders:
The GuiXT Script:

Control        (7.5,69.7)     (23.9,173.4) _
 
progid="file://C:\guixtscripts\html\chart.html"        _
  name="mychartcontrol"

 

connectHTML name="mychartcontrol" // -shownames
 

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

 

InputField    (6,72) "Maximum elements"      (6,92) _
 
size=8        _
 
name="maxresults"       _
 
-numerical _
 
-alignright 

 

InputField    (5,72) "Customer"  (5,92) _
 
size=8        _
 
name="KUNNR"


The connection between GuiXT and the embedded HTML file

The embedded page is a standard document that you can modify and test in your browser. The idea is that you then use the keyword connectHTML so you can use GuiXT to invoke JavaScript code and also use the data in GuiXT variables in JavaScript functions.
You can use the option -showNames to display the name of any element when you point the mouse onto it. Our InputScript will push the button with the ID "create", so the name in the option is "button_create". We also set display:none in the style for the button so it is not visible on the SAP GUI screen.
The InpuScript

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 

connecthtml name="mychartcontrol" click="button_create" 

return



The HTML page

The connection to GuiXT is made by:
var guixt;

function guixt_initialize(obj) {
            guixt = obj;
        };


We can then fetch the data from GuiXT with the command:

guixt.Get("salesorders.SHORT_TEXT." + i


Please download the HTML page with the embedded JavaScript library here:
chartjs_guixt.zip

Further Information:
Object "guixt" in VBScript and JavaScript

Components
InputAssistant + Controls