Html Chart

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

by jqwidgets

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://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: "Logarithmic Scale Axis Example",
     description: "Sample logarithmic scale axis with base 2",
     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,
         showTickMarks: true
     },
     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: 'A'
         }, {
             dataField: 'b',
             displayText: 'B'
         }]
     }]
 };
 $('#jqxChart').jqxChart(settings);