Scatter Chart with Logarithmic (x axle) in Bar/Column Chart Style

by pleinx

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta/Chart.js"></script>
<h1>Scatter Chart with Logarithmic (x axle) in Bar/Column Chart Style</h1>
<div style="height: 300px; width: 536px;">
    <canvas id="canvas"></canvas>
</div>

JavaScript

var scatterChartData = {

        datasets: [{
        	  label: 'Score',
            backgroundColor: "rgba(235, 235, 235, 0.8)",
            pointBorderColor: "rgba(220,220,220,0)",
            pointBackgroundColor: "rgba(190,190,190,0)",
            data: [{
                x: 20,
                y: 74
            }, {
                x: 89.9,
                y: 74
            }
            ]
        },
            {
                label: 'Score',
                backgroundColor: "rgba(230, 230, 230, 0.8)",
                pointBorderColor: "rgba(220,220,220,0)",
                pointBackgroundColor: "rgba(190,190,190,0)",
                data: [
                    {
                        x: 89.9,
                        y: 76
                    }, {
                        x: 282,
                        y: 76
                    }
                ]
            },
            {
            		label: 'Score',
                backgroundColor: "rgba(235, 235, 235, 0.8)",
                pointBorderColor: "rgba(220,220,220,0)",
                pointBackgroundColor: "rgba(190,190,190,0)",
                data: [
                    {
                        x: 282,
                        y: 72
                    }, {
                        x: 3548,
                        y: 72
                    }
                ]
            },
            {
            		label: 'Score',
                backgroundColor: "rgba(230, 230, 230, 0.8)",
                pointBorderColor: "rgba(220,220,220,0)",
                pointBackgroundColor: "rgba(190,190,190,0)",
                data: [
                    {
                        x: 3548,
                        y: 69
                    }, {
                        x: 7079,
                        y: 69
                    }
                ]
            },
            {
            		label: 'Score',
                backgroundColor: "rgba(235, 235, 235, 0.8)",
                pointBorderColor: "rgba(220,220,220,0)",
...