Html Chart

Set the categoryAxis property of the jqxChart. Author: http://jqwidgets.com

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<div id='jqxChart' style="width:530px; height:400px; position: relative; left: 0px; top: 0px;"></div>

JavaScript

var sampleData = [{
     a: 0.35,
     b: 14.5
 }, {
     a: 1,
     b: 2.5
 }, {
     a: 10,
     b: 0.2
 }, {
     a: 100,
     b: 205
 }, {
     a: 1,
     b: 100
 }, {
     a: 5.11,
     b: 10.13
 }, {
     a: 20.13,
     b: 10.13
 }, {
     a: 600,
     b: 300
 }];
 var settings = {
     title: "Demo",
     description: "",
     padding: {
         left: 5,
         top: 5,
         right: 5,
         bottom: 5
     },
     titlePadding: {
         left: 0,
         top: 0,
         right: 0,
         bottom: 10
     },
     source: sampleData,
     enableAnimations: true,
     categoryAxis: {
         dataField: '',
         description: '',
         showGridLines: true,
         formatFunction: function (value) {
       								  var cities = ["Abanda", "Abbeville", "Abbotsford", "Abbott", "Abbottstown", "Abbyville", "Abercrombie", "Aberdeen"];
                        return cities[value];
                    },
         showTickMarks: true,
                        rangeSelector: {
                            serieType: 'area',
                            padding: { /*left: 0, right: 0,*/ top: 20, bottom: 0 },
                            // Uncomment the line below to render the selector in a separate container
                            //renderTo: $('#selectorContainer'),
                            backgroundColor: 'white',
                            size: 110,
                            gridLines: {visible: false},
                        }
     },
     seriesGroups: [{
         type: 'column',
         valueAxis: {
             description: 'Value',
             logarithmicScale: true,
             logarithmicScaleBase: 2,
             unitInterval: 1,
             tickMarksInterval: 1,
             gridLinesInterval: 1,
             formatSettings: {
                 decimalPlaces: 3
             },

             horizontalTextAlignment: 'right'
         },
         series: [{
             dataField: 'a',
             displayText: 'Cities'
       ...