Chart.js Time Series Sample

by dotacoach

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>
<canvas class="tmln" id="nnm3ejlz"></canvas>

CSS

canvas.tmln {
          width: 100% !important;
          height: auto !important;
          max-height: 275px;
        }

JavaScript

var data = {
          datasets: [{
              label: 'Time giving lessons',
              data: [{
                x: moment('2016-05-14'),
                y: 8
              }, {
                x: moment('2016-05-19'),
                y: 2.5
              }],
              backgroundColor: '#A4458C',
            },

          ]
        };

        var ctx = document.getElementById("nnm3ejlz").getContext("2d");
        var myLineChart = new Chart(ctx, {
          type: 'line',
          data: data,
          options: {
            fill: false,
            responsive: true,

            scales: {
              xAxes: [{
                type: 'time',
                display: true,
                scaleLabel: {
                  display: true,
                  labelString: "Date",
                }
              }],

              yAxes: [{
                display: true,
                scaleLabel: {
                  display: true,
                  labelString: "Hours",
                }
              }]
            }
          },
        });