ftChart

sample-1

by SAiTO TOSHiKi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>
<script src="https://rawgit.com/chartjs/Chart.js/master/samples/utils.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://rawgit.com/chartjs/chartjs-plugin-zoom/master/chartjs-plugin-zoom.min.js"></script>
<h1>How to make the lines and bars in this Chart.js <a href="https://github.com/chartjs/Chart.js/blob/master/samples/scales/time/combo-time-scale.html">combo time scale</a>:</h1>
<div style="width: 100%;">
  <canvas id="canvas"></canvas>
</div>
<p></p>
<h1>More like the ones at <a href="http://bitcoinity.org/markets">Bitcoinity</a>?</h1>
<img src="https://evilsocket.net/images/2016/05/bitcoinity.png" style="width: 100%;">
<img src="https://evilsocket.net/images/2016/05/bitcoinity.png">

CSS

canvas {
  background: #000;
}

JavaScript

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

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

var color = Chart.helpers.color;
var config = {
  type: 'bar',
  data: {
    labels: [
      newDateString(0),
      newDateString(1),
      newDateString(2),
      newDateString(3),
      newDateString(4),
      newDateString(5),
      newDateString(6),
      newDateString(7),
      newDateString(8),
      newDateString(9),
      newDateString(10),
      newDateString(11),
      newDateString(12),
      newDateString(13),
      newDateString(14),
      newDateString(15),
      newDateString(16)
    ],
    datasets: [{
      type: 'bar',
      label: 'Dataset 1',
      borderWidth: 2,
      backgroundColor: 'rgba(50,50,80,0.5)',
      borderColor: 'rgba(60,60,90,0.5)',
      data: [
        Math.abs(randomScalingFactor()),
        Math.abs(randomScalingFactor()),
        Math.abs(randomScalingFactor()),
        Math.abs(randomScalingFactor()),
        Math.abs(randomScalingFactor()),
        Math.abs(randomScalingFactor()),
        Math.abs(randomScalingFactor()),
        Math.abs(randomScalingFactor()),
        Math.abs(randomScalingFactor()),
        Math.abs(randomScalingFactor()),
        Math.abs(randomScalingFactor()),
        Math.abs(randomScalingFactor()),
        Math.abs(randomScalingFactor()),
        Math.abs(randomScalingFactor()),
        Math.abs(randomScalingFactor()),
        Math.abs(randomScalingFactor()),
        Math.abs(randomScalingFactor())
      ],
    }, {
      type: 'line',
      label: 'Dataset 2',
      backgroundColor: color(window.chartColors.yellow).rgbString(),
      borderColor: window.chartColors.yellow,
      lineTension: 0,
      pointRadius: 0,
      fill: false,
      data: [
        Math.abs(randomScalingFactor()),
        Math.abs(randomScalingFactor()),
        Math.abs(randomScalingFactor()),
        Math.abs(randomScalingFactor()),
        Math.abs(randomScalingFactor()),
       ...