Fine scale ( fineLinear )

Compare

by SAiTO TOSHiKi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<div style="width:75%;">
  <canvas id="canvas1"></canvas>
</div>
<div style="width:75%;">
  <canvas id="canvas2"></canvas>
</div>
<div style="width:75%;">
  <canvas id="canvas3"></canvas>
</div>
<br>
<br>
<button id="randomizeData">Randomize Data</button>

<script>
  window.chartColors = {
    red: 'rgb(255, 99, 132)',
    orange: 'rgb(255, 159, 64)',
    yellow: 'rgb(255, 205, 86)',
    green: 'rgb(75, 192, 192)',
    blue: 'rgb(54, 162, 235)',
    purple: 'rgb(153, 102, 255)',
    grey: 'rgb(231,233,237)'
  };

  window.randomScalingFactor = function() {
    return (Math.random() > 0.5 ? 1.0 : 1.0) * Math.round(Math.random() * 100);
  };
  var clone = function(obj) {
    var c = new(obj.constructor)();
    for (var p in obj) {
      if (!obj.hasOwnProperty(p)) {
        continue;
      }
      // c[p] = typeof obj[p]=== 'object'? this.clone(obj[p]): obj[p];
      if (typeof obj[p] === 'object') {
        c[p] = this.clone(obj[p]);
      } else {
        c[p] = obj[p];
      }
    }
    return c;
  };

</script>

<script>
  /* !
   * chartjs-extension-finescale.js
   *
   * Version: 0.0.1
   *
   * chartjs-extension-finescale.js Copyright 2016 koyoSE
   * Released under the MIT license
   * https://github.com/KoyoSE/chartjs-extension-finescale.git
   *
   * Chart.js Copyright 2016 Nick Downie
   * Released under the MIT license
   * https://github.com/chartjs/Chart.js/blob/master/LICENSE.md
   */
  (function e(t, n, r) {
    function s(o, u) {
      if (!n[o]) {
        if (!t[o]) {
          var a = typeof require == "function" && require;
          if (!u && a) return a(o, !0);
          if (i) return i(o, !0);
          var f = new Error("Cannot find module '" + o + "'");
          throw f.code = "MODULE_NOT_FOUND", f
        }
        var l = n[o] = {
          exports: {}
...

JavaScript

var timeFormat = 'MM/DD/YYYY HH:mm';

		function newDateString(days) {
		  return moment().add(days, 'd').format(timeFormat);
		}

		var color = Chart.helpers.color;
		var data = {
		  labels: [
		    newDateString(0),
		    newDateString(1),
		    newDateString(2),
		    newDateString(3),
		    newDateString(4),
		    newDateString(5),
		    newDateString(6)
		  ],
		  datasets: [{
		    type: 'bar',
		    label: 'Dataset 1',
		    backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
		    borderColor: window.chartColors.red,
		    data: [
		      randomScalingFactor(),
		      randomScalingFactor(),
		      randomScalingFactor(),
		      randomScalingFactor(),
		      randomScalingFactor(),
		      randomScalingFactor(),
		      randomScalingFactor()
		    ],
		  }, {
		    type: 'bar',
		    label: 'Dataset 2',
		    backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
		    borderColor: window.chartColors.blue,
		    data: [
		      randomScalingFactor(),
		      randomScalingFactor(),
		      randomScalingFactor(),
		      randomScalingFactor(),
		      randomScalingFactor(),
		      randomScalingFactor(),
		      randomScalingFactor()
		    ],
		  }, {
		    type: 'line',
		    label: 'Dataset 3',
		    backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),
		    borderColor: window.chartColors.green,
		    fill: false,
		    data: [
		      randomScalingFactor(),
		      randomScalingFactor(),
		      randomScalingFactor(),
		      randomScalingFactor(),
		      randomScalingFactor(),
		      randomScalingFactor(),
		      randomScalingFactor()
		    ],
		  }, ]
		};

		var config = {
		  type: 'bar',
		  data: data,
		  options: {
		    title: {
		      text: "linear scale (original)",
		      display: true
		    },
		    scales: {
		      xAxes: [{
		        // ------- fineTime ----------
		        // type: "fineTime", //for future
		        type: "time",
		        // -----------------------------
		...