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