There are good reasons to prefer JavaScript over VBScript in a  new project, if both are possible:

For certain tasks, especially in Windows system administration, VBScript is still a good choice.

With GuiXT Controls it is up to you to choose the appropriate language, VBScript or JavaScript.  The GuiXT keyword CallJS is the right one to call JavaScript functions; see the keyword documentation and the JavaScript tutorials for details.

As an example we implement the chart of tutorial 10 in JavaScript:


 

The GuiXT script and the InputScripts are exactly identical (use CallJS instead of CallVBS). The script function, now in JavaScript, is as follows:

function generate_chart(img)
{
                            
    var cd =  guixt.CreateObject("ChartDirector.API");
    
    // Set license code
    cd.setLicenseCode("xxxx-xxxx-xxxx-xxxx-xxxx-xxxx");
    
   
    // The data for the bar chart
    var data = new Array();
    var labels = new Array();
   
    for (var k=1;k<=13;k++)
    {
     data.push(parseInt(guixt.Get("chart.amount."  + k)));
     labels.push(guixt.Get("chart.label."  + k));
    };
        
    // The colors for the bar chart
    var colors = new Array(0xb8bc9c,0xa0bdc4,0x999966,0xb8bc9c, 0xa0bdc4,0x999966,
                  0xb8bc9c,0xa0bdc4,0x999966,0xb8bc9c,0xa0bdc4,0x30cc30);
    
    
    // Create an XYChart object of size 800 x 320 pixels, golden background
    var c = cd.XYChart(800, 460, cd.goldColor(), -1, 2);
    
    // Add a title box using 12 point Arial Bold font 
    c.addTitle(guixt.Get("chart.title"), "arialbd.ttf", 12, 0x606060);
    
    // Set the plotarea at (60, 40) and of size 720 x 360 pixels
    c.setPlotArea(60, 40, 720, 360);
    
    // Add a multi-color bar chart layer using the given data and colors
    var layer = c.addBarLayer3(data, colors);
    
    //  Use a 1 pixel 3D border for the bars
    layer.setBorderColor(-1, 1);
    
    // Set bar shape to circular (cylinder)
    layer.setBarShape(cd.CircleShape);
    
    // Enable bar label for the whole bar
    layer.setAggregateLabelStyle();
    
    // Set the labels on the x axis.
    c.xAxis().setLabels(labels);
    
    // Add a title to the y axis
    c.yAxis().setTitle("in thousands €");
    
    
    // Output the chart
    img.Picture = c.makePicture();
        
}