This is a simple html page that uses qdt-components.

Html

    < head>
        < script type="text/javascript" src="qdt-components.js">< /script>
    < /head>
    < body>
        < div id="qdt1">< /div>
        < div id="qdt2">< /div>
    < /body>
        
Javascript

    var qConfig = {
        "config": {
            "host": "sense-demo.qlik.com",
            "secure": true,
            "port": 443,
            "prefix": "/",
            "appId": "133dab5d-8f56-4d40-b3e0-a6b401391bde"
        },
        "connections": { 
            "vizApi": false, 
            "engineApi": true 
        }
    }
    var vizOptions = {}
    var QdtComponent = new window.QdtComponents(qConfig.config, qConfig.connections);
    QdtComponent.render('QdtSelectionToolbar', {height:'300px'}, document.getElementById('qdt1'));
    QdtComponent.render('QdtBarchart', {type: 'horizontal', cols: ['Case Owner Group', `Num(Avg([Case Duration Time]), '##')`], options: vizOptions, height:'300px'}, document.getElementById('qdt2'));