Purpose
You want to make use of an existing JavaScript framework.

Today there exist powerful JavaScript frameworks - many of them Open Source - for various tasks.

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:

Here we have used fixed values and labels; in practice the values could come from an SAP transaction or from the SAP database.

The sample chart is taken from the following collection of chart.js samples:
 http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started

GuiXT script

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

Box (2,6) (18,85) _
  "World population"

Control (2.7,6.3) (18,85.4) _
  progID="about:blank" _
  name="mychart"

CallJS display_chart "&V[mychart]"

JavaScript

// 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);
};

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



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

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

    // 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);


    new Chart(ctx, {
        type: 'line',
        data: {
            labels: [1500, 1600, 1700, 1750, 1800, 
                                 1850, 1900, 1950, 1999, 2050],
            datasets: [{
                data: [86, 114, 106, 106, 107, 111,
                                          133, 221, 783, 2478],
                label: "Africa",
                borderColor: "#3e95cd",
                fill: false
            }, {
                data: [282, 350, 411, 502, 635, 809,
                                        947, 1402, 3700, 5267],
                label: "Asia",
                borderColor: "#8e5ea2",
                fill: false
            }, {
                data: [168, 170, 178, 190, 203, 276,
                                          408, 547, 675, 734],
                label: "Europe",
                borderColor: "#3cba9f",
                fill: false
            }, {
                data: [40, 20, 10, 16, 24, 38, 74, 167, 508, 784],
                label: "Latin America",
                borderColor: "#e8c3b9",
                fill: false
            }, {
                data: [6, 3, 2, 2, 7, 26, 82, 172, 312, 433],
                label: "North America",
                borderColor: "#c45850",
                fill: false
            }
            ]
        },
        options: {
            title: {
                display: true,
                text: 'World population per region (in millions)'
            },
           animation: {
                duration: 0
            }
        }
    });


}

 

Components
InputAssistant + Controls