Chart js - scatter time

by cubicalmonkey

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.js"></script>
<div style="width:75%">
  <div>
    <canvas id="canvas"></canvas>
  </div>
</div>

JavaScript

var randomTime = function() {
  //return random time stamp between today and 255 days ago
  return (moment().subtract(Math.floor(Math.random() * 255), 'days')).startOf('day').valueOf();
};

var randomInt = function() {
  return Math.random() * 255;
};
var randomColor = function(opacity) {
  return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
};
var scatterChartData = {
  datasets: [{
    label: "My First dataset",
    data: [[
      251,
      0
    ],
    [
      252,
      0
    ],
    [
      253,
      0
    ],
    [
      254,
      0
    ],
    [
      255,
      0
    ],
    [
      256,
      0
    ],
    [
      257,
      0
    ]]
  }]
};
$.each(scatterChartData.datasets, function(i, dataset) {
  dataset.borderColor = randomColor(0.4);
  dataset.backgroundColor = randomColor(0.1);
  dataset.pointBorderColor = randomColor(0.7);
  dataset.pointBackgroundColor = randomColor(0.5);
  dataset.pointBorderWidth = 1;
});

var ctx = document.getElementById("canvas").getContext("2d");
window.myScatter = Chart.Line(ctx, {
  data: scatterChartData,
  options: {
    title: {
      display: true,
      text: 'Chart.js Scatter Chart'
    },
    scales: {
      xAxes: [{
        position: 'bottom',
        gridLines: {
          zeroLineColor: "rgba(0,255,0,1)"
        },
        ticks: {
          userCallback: function(label, index, labels) {
            return moment(label).format("DD/MM/YY");
          }


        },
        scaleLabel: {
          display: true,
          labelString: 'x axis'
        }
      }],
      yAxes: [{
        position: 'right',
        gridLines: {
          zeroLineColor: "rgba(0,255,0,1)"
        },
        scaleLabel: {
          display: true,
          labelString: 'y axis'
        }
      }]
    }
  }
});