ChartJS - Configuring Gauges

The data for this demo is obtained from the Yahoo! Weather Web service.

HTML

<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script src="http://cdn3.devexpress.com/jslib/13.2.7/js/dx.chartjs.js?v=2"></script>
<div>
    <select id="citySelector">
        <option value="44418">London</option>
        <option value="638242">Berlin</option>
        <option value="2459115">New York</option>
        <option value="24553382">Moscow</option>   
        <option value="1225448">Bangkok</option> 
    </select>

    <div id="gaugeContainer" style="height:400px; width:300px; display: inline-block"></div>
    <div id="linearGaugeContainer" style="height:400px; width:100px; display: inline-block"></div>
    <div id="barGaugeContainer" style="height:400px; width:400px; display: inline-block"></div>

    <img style="margin:0px auto;display:block" src="http://chartjs.devexpress.com/Content/images/poweredby-61x25.png"/>
</div>

JavaScript

var scaleSettings = {
    startValue: -50,
    endValue: 50,
    majorTick: {
        color: 'black',
        tickInterval: 10
    },
    minorTick: {
        visible: true,
        color: 'black',
        tickInterval: 1
    }
};

var rangesArray =  [{
    startValue: -50,
    endValue: 0,
    color: 'blue'
}, {
    startValue: 0,
    endValue: 50,
    color: 'red'
}];

$(function () {
    $("#gaugeContainer").dxCircularGauge({
        scale: scaleSettings,
        value: 24,
        valueIndicator: { color: 'red', spindleGapSize: 5 },
        subvalues: [19],
        subvalueIndicator: { color: 'green' },
        rangeContainer: {
            ranges: rangesArray,
            offset: 5
        }
    });

    $("#linearGaugeContainer").dxLinearGauge({
        geometry: {
            orientation: 'vertical'
        },
        scale: scaleSettings,
        value: 24,
        valueIndicator: { color: 'red', offset: 10 },
        subvalues: [19],
        subvalueIndicator: { color: 'green', offset: -5 },
        rangeContainer: {
            ranges: rangesArray,
            offset: -5
        }
    });

    $("#barGaugeContainer").dxBarGauge({
        startValue: -50,
        endValue: 50,
        label: {
            format: 'decimal',
            customizeText: function () {
                return this.valueText + '&deg;C'
            }
        },
        palette: 'Bright',
        tooltip: {
            enabled: true,
            format: 'decimal',
            customizeText: function () {
                var cityName;
                switch (this.index) {
                    case 0: cityName = 'London'
                        break;
                    case 1: cityName = 'Berlin'
                        break;
                    case 2: cityName = 'New York'
                        break;
                    case 3: cityName = 'Moscow'
                        break;
                    case 4: cityName = 'Bangkok'
                        break;
                  ...