Javascript/jQuery UI Widgets

Show Demo List

Theme:

TypeScript definitions for jQWidgets

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript compiles to clean, simple JavaScript code which runs on any browser, in Node.js, or in any JavaScript engine that supports ECMAScript 3 (or newer). TypeScript can also be found under the abbreviation - TSC.

A. Prerequisites

Node.js - to check the current installed version, type npm -v in the command line(cmd).
TypeScript - to check the current installed version, type tsc -v in the command line(cmd).

Note: To install TypeScript.

npm install -g typescript

This will install TypeScript globally

B. Getting Started

Include All Necessary Files

At the top of the main HTML (e.g. index.html) we need to add a reference to the jquery.js library. Next we need to add a reference to jqxcore.js. After that we can add the .js files for the jqxWidgets that we want to use. Finally, we need to include the app.js file that was compiled from the app.ts file. The contents of "app.ts" will be explained in detail further ahead in the article.

The index.html file must contain the following libraries in it's header in that order:

jquery.js;
jqxcore.js;
jqxdata.js;
jqxtooltip.js;
jqxbulletchart.js;
app.js;

Create The Widget

Add a reference to jqwidgets.d.ts in the app.ts file.

/// <reference path="../../app/jqwidgets-ts/jqwidgets.d.ts" />

Next we need to create a function that will be invoked from the index.htm. A different number of arguments (selectors) can be passed to the function depending on how many widgets will be used. In the current example we need to pass only one argument, the id of the DOM element that will be used for the particular widget.

function createBulletChart(selector) {
    // Initialize Widget
}

Set the options for the widget in an object of type: "jqwidgets.WidgetNameOptions":

var options: jqwidgets.BulletChartOptions =
{
    width: width,
    height: 80,
    barSize: "40%",
    title: "Revenue 2014 YTD",
    description: "(U.S. $ in thousands)",
    ranges: [
        { startValue: 0, endValue: 200, opacity: 0.5 },
        { startValue: 200, endValue: 250, opacity: 0.3 },
        { startValue: 250, endValue: 300, opacity: 0.1 }
    ],
    pointer: { value: 270, label: "Revenue 2014 YTD", size: 8, color: "Black" },
    target: { value: 260, label: "Revenue 2013 YTD", size: 4, color: "Black" },
    ticks: { position: "both", interval: 50, size: 10 },
    labelsFormat: "c",
    showTooltip: true
};

To create an instance of the widget use jqwidgets.createInstance(selector, widgetName, options).

selector - string ('#container')
widgetName - string ('jqxBulletChart')
options - object (options)

var myBulletChart: jqwidgets.jqxBulletChart =
    jqwidgets.createInstance(selector, 'jqxBulletChart', options);

Binding to events

myBulletChart.addEventHandler('change', function () {
    // Do Something
});

Method usage

myBulletChart.val(150);

Note: To compile manually "app.ts" to "app.js".

tsc app.ts

You need to use this command every time you make changes in app.ts.
Another way is to use a plug-in to do this automaticly.

tsc app.ts --out app.js --watch

This command will recompile 'app.ts' every time you save the file.

Set a property or properties using myWidget.setOptions(params: any)

myBulletChart.setOptions({ title: 'jqxBulletChart' });

Get the value of a property

var values = myBulletChart.values;

C. Example Files

index.htm

<!DOCTYPE html>
<html>
<head>
    <title>jqxBulletChart TypeScript Example</title>
    <!-- 1. Load references -->
    <link href="../../jqwidgets/styles/jqx.base.css" rel="stylesheet" />
    <script src="../../jqwidgets/jquery.js"></script>
    <script src="../../jqwidgets/jqxcore.js"></script>
    <script src="../../jqwidgets/jqxdata.js"></script>
    <script src="../../jqwidgets/jqxtooltip.js"></script>
    <script src="../../jqwidgets/jqxbulletchart.js"></script>
    <script src="app.js"></script>
    <!-- 2. Create initialization -->
    <script>
            $(document).ready(function () {
                createBulletChart('#container');
            });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<!-- 3. Display the application -->
<body>
    <div id="container"></div>
</body>
</html>

app.ts

/// <reference path="../../app/jqwidgets-ts/jqwidgets.d.ts" />
function createBulletChart(selector) {
    var width = 500;
    // Initialization options - validated in typescript
    // jqwidgets.BulletChartOptions has generated TS definition
    var options: jqwidgets.BulletChartOptions =
    {
        width: width,
        height: 80,
        barSize: "40%",
        title: "Revenue 2014 YTD",
        description: "(U.S. $ in thousands)",
        ranges: [
            { startValue: 0, endValue: 200, opacity: 0.5 },
            { startValue: 200, endValue: 250, opacity: 0.3 },
            { startValue: 250, endValue: 300, opacity: 0.1 }
        ],
        pointer: { value: 270, label: "Revenue 2014 YTD", size: 8, color: "Black" },
        target: { value: 260, label: "Revenue 2013 YTD", size: 4, color: "Black" },
        ticks: { position: "both", interval: 50, size: 10 },
        labelsFormat: "c",
        showTooltip: true
    };
    // Creates an instance
    var myBulletChart: jqwidgets.jqxBulletChart = jqwidgets.createInstance(selector, 'jqxBulletChart', options);
    // Event binding
    myBulletChart.addEventHandler('change', function () {
        // Do Something
    });
    // Method 'val' - set new value
    myBulletChart.val(150);
}