4.9 },
                { "month": "Apr", "min": 4.1, "max": 13.9, "avg": 8.7 },
                { "month": "May", "min": 8.0, "max": 18.4, "avg": 13.1 },
                { "month": "Jun", "min": 11.3, "max": 22.2, "avg": 16.6 },
                { "month": "Jul", "min": 13.3, "max": 25.3, "avg": 18.4 },
                { "month": "Aug", "min": 13.0, "max": 24.4, "avg": 17.6 },
                { "month": "Sep", "min": 10.3, "max": 20.8, "avg": 14.3 },
                { "month": "Oct", "min": 6.6, "max": 14.9, "avg": 9.2 },
                { "month": "Nov", "min": 2.1, "max": 8.4, "avg": 4.2 },
                { "month": "Dec", "min": -0.5, "max": 4.5, "avg": 1.5 }
             ];

            var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
                var dataItem = data[itemIndex];
                return '<DIV style="text-align:left"><b>Month: ' +
                        categoryValue + '</b><br />Min: ' +
                        dataItem.min + '°<br />Max: ' +
                        dataItem.max + '°<br />Average: ' +
                        dataItem.avg + '°</DIV>';
            };

            // prepare jqxChart settings
            var settings = {
                title: "Weather in Geneva, Switzerland",
                description: "Climatological Information about Geneva",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 10, top: 5, right: 10, bottom: 5 },
                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                enableCrosshairs: true,
                source: data,
                xAxis:
                    {
                        textRotationAngle: 0,
                        dataField: 'month',
                        showTickMarks: true,
                        tickMarksInterval: 1,
                        tickMarksColor: '#888888',
                        unitInterval: 1,
                        showGridLines: true,
                        gridLinesInterval: 1,
                        gridLinesColor: '#888888'
                    },
                colorScheme: 'scheme05',
                seriesGroups:
                    [
                        {
                            type: 'rangecolumn',
                            columnsGapPercent: 100,
                            toolTipFormatFunction: toolTipCustomFormatFn,
                            valueAxis:
                            {
                                unitInterval: 5,
                                displayValueAxis: true,
                                description: 'Temperature [C]',
                                axisSize: 'auto',
                                tickMarksColor: '#888888',
                                minValue: -5,
                                maxValue: 30,
                                alternatingBackgroundColor: '#E5E5E5',
                                alternatingBackgroundColor2: '#F5F5F5',
                                alternatingBackgroundOpacity: 0.5
                            },
                            series: [
                                    { dataFieldTo: 'max', displayText: 'Temperature Range', dataFieldFrom: 'min', opacity: 1 }
                                ]
                        },
                        {
                            type: 'spline',
                            toolTipFormatFunction: toolTipCustomFormatFn,
                            valueAxis:
                            {
                                unitInterval: 5,
                                displayValueAxis: false,
                                minValue: -5,
                                maxValue: 30
                            },
                            series: [
                                    { dataField: 'avg', displayText: 'Average Temperature', opacity: 1, lineWidth: 2 }
                                ]
                        }

                    ]
            };

            $('#chartContainer').jqxChart(settings);

            var chart = $('#chartContainer').jqxChart('getInstance');

            $("#checkboxSwapAxis").jqxCheckBox({ width: 120, checked: false });
            $("#checkboxSwapAxis").on('change', function (event) {
                var swap = event.args.checked;

                for (var i = 0; i < chart.seriesGroups.length; i++)
                    chart.seriesGroups[i].orientation = swap ? 'horizontal' : 'vertical';

                chart.refresh();
            });

        });
    </script>
</head>
<body class='default'>
    <div id='chartContainer' style="width:850px; height:500px"></div>
    <div style='margin-top: 5px;' id='checkboxSwapAxis'>Swap X and Y axes</div>
</body>
</html>