charts.js 2 bar chart logarithmic x axis

Responsive Bar Chart with logarithmic scaled x axle. http://nnnick.github.io/Chart.js/docs-v2/

HTML

<script src="https://8a6df3e86d1d86b5f57119cb828d06dcb58cc502.googledrive.com/host/0B3PS4oT3UuQ_bUlNWElra3JVeHc/moment.min.js"></script>
<script src="https://8a6df3e86d1d86b5f57119cb828d06dcb58cc502.googledrive.com/host/0B3PS4oT3UuQ_bUlNWElra3JVeHc/Chart.js"></script>
<div class="chart">
  <div>
      <canvas data-uid="91e71952422917e9e6b5127b1bfaf892"height="305" width="534"></canvas>
  </div>
</div>

CSS

.chart {
  width: 75%;
  margin: 20px auto;
}

JavaScript

var $ = jQuery;

// FOR TESTING ENABLE/DISABLE THE SCATTER POINTS
var hidePoints = true;

// FOR TOOLTIP TRIGGER RADIUS
var tooltipTriggerRadius = 35;

var rgba = 'rgba(0,0,0,0)', borderWidth = 0;
if(!hidePoints) {
  rgba = 'rgba(0,0,0,1)';
  borderWidth = 1;
}
	 
var $ = jQuery;
var scatterChartData = {
  datasets: [
    {
      label: "Band 1",
      backgroundColor: "rgba(235, 235, 235, 0.8)",
      pointBorderWidth: borderWidth,
      pointBorderColor: rgba,
      pointBackgroundColor: rgba,
      borderColor: "rgba(0,0,0,0)",
      hitRadius: 30,
      data: [
        {
          x: 20,
          y: 114.137
        }, {
          x: 55,
          y: 114.137
        }, {
          x: 89.1,
          y: 114.137
        }]
    } ,
    {
      label: "Band 2",
      backgroundColor: "rgba(230, 230, 230, 0.8)",
      pointBorderWidth: borderWidth,
      pointBorderColor: rgba,
      pointBackgroundColor: rgba,
      borderColor: "rgba(0,0,0,0)",
      hitRadius: 30,
      data: [
        {
          x: 89.1,
          y: 106.002
        }, {
          x: 186,
          y: 106.002
        }, {
          x: 282,
          y: 106.002
        }]
    } ,
    {
      label: "Band 3",
      backgroundColor: "rgba(220, 220, 220, 0.8)",
      pointBorderWidth: borderWidth,
      pointBorderColor: rgba,
      pointBackgroundColor: rgba,
      borderColor: "rgba(0,0,0,0)",
      hitRadius: 30,
      data: [
        {
          x: 282,
          y: 98.081
        }, {
          x: 1915,
          y: 98.081
        }, {
          x: 3548,
          y: 98.081
        }]
    } ,
    {
      label: "Band 4",
      backgroundColor: "rgba(205, 205, 205, 0.8)",
      pointBorderWidth: borderWidth,
      pointBorderColor: rgba,
      pointBackgroundColor: rgba,
      borderColor: "rgba(0,0,0,0)",
      hitRadius: 30,
      data: [
        {
          x: 3548,
          y: 94.405
        }, {
          x: 5314,
          y: 94.405
        }, {
          x: 7079,
          y: 94.405
 ...