Purpose
You want to display a  bar chart on the screen

Solution
Add the following JavaScript function in your JavaScript file:

// load additional JavaScript framework
function loadJS(url) {

    var script = document.createElement("script")
    script.type = "text/javascript";
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
};

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


// load chart framework "chart.js"
loadJS("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js");

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



GuiXT script

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

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

// create chart and display it in SAP GUI
function display_barchart(ie) {

    // create canvas element as container for the chart
    var ctx = ie.document.createElement("canvas");
    ctx.style.width = "100%";
    ctx.style.height = "100%";

    // delete any previous elements
    ie.document.body.innerHTML = "";

    // padding
    ie.document.body.style.padding = "20px";

    // add the element to our chart area in the SAP GUI window
    ie.document.body.appendChild(ctx);

    /* We create a new object and use it as dictionary
       containing the label and the value of the dataset */
    var vals = new Object();

    for (var i = 1; i <= guixt.Get("salesorders.rowcount") ; i++) {

        // Initialize all values so we can add something later
        vals[guixt.Get("salesorders.SHORT_TEXT." + i)] = 0;
    }


    for (var i = 1; i <= guixt.Get("salesorders.rowcount") ; i++) {

        // Orderpositions can occur many times,
	// so we sum the values of each material
        vals[guixt.Get("salesorders.SHORT_TEXT." + i)] 
		+= parseFloat(guixt.Get("salesorders.NET_VALUE." + i));

    }

    // Save the dictionary to arrays so we can give it to the chart
    var array_keys = new Array();
    var array_values = new Array();

    var c = 1;
    for (var key in vals) {

        // Shorten the text and add it to the array
        array_keys.push(key.substring(0, 8) + '.');

        // save the value to the array
        array_values.push(vals[key]);

        c += 1;

        // The user can enter the maximal number of results on the screen
        if (c > guixt.Get("maxresults")) break;

    }

    var barChartData = {
        labels: array_keys,
        datasets: [
            {
                data: array_values,               
                label: "",
                backgroundColor: 
		['rgba(52,152,219,1)', 'rgba(46,204,113,1)',
                 'rgba(155,89,182,1)', 'rgba(241,196,15,1)', 
		 'rgba(189,195,199,1)',
                 'rgba(83,21,119,0.3)', 'rgba(205,251,187,0.7)', ],

                borderColor: 
		['rgba(136,136,136,0.5)', 'rgba(170,170,170,1)',
                'rgba(155,89,182,1)', 'rgba(241,196,15,1)',
		 'rgba(189,195,199,1)',
                'rgba(83,21,119,0.4)', 'rgba(205,251,187,1)', ]
            },
        ]
    };  

    new Chart(ctx, {
        type: 'bar',
        data: barChartData,
        options: {
            title: {
                display: true,
                text: 'The top ' + guixt.Get("maxresults") 
		+ ' selling products'
            },
            legend: { display: false },
            responsive: true,
            animation: {
                duration: 0
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }         
        }
    });
}

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