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 // 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
Here we have used fixed values and labels; in practice the
values could come from an SAP transaction or from the SAP database. GuiXT script
// the "chart.js" framework
requires IE11 emulation mode of the browser control "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 |