Vue-chartjs - horizontal scrolling time chart

by Andres Abadia

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-chartjs.full.min.js"></script>
<div id="myApp">
  <div id="graphHolder">
    <line-chart :chart-data="graphdata" :options="graphoptions"></line-chart>
  </div>
</div>

CSS

#graphHolder {
  width: 400px;
  height: 300px;
  border: 1px solid black;
  overflow-x: scroll;
  overflow-y: hidden;
}

JavaScript

//todo get this to work...
import Chart from 'vue-chartjs';

Vue.component('line-chart-time', Vue.extend('Line',{
  props: ["options"],
  mounted() {
    this.renderChart(this.data, this.options)
  }
}));


var lineChart = Vue.component('line-chart-time');
var vm = new Vue({
      el: '#myApp',
      components: {
        lineChart
      },
      data() {
      	return {
        	graphdata: {},
		      graphoptions: {}
        };
      },
      mounted() {
        this.drawGraph();
      },
      methods: {
        generateOptions() {
            return {
              responsive: false,
              maintainAspectRatio: false,
              scales: {
                xAxes: [{
                  type: 'time',
                  time: {
                    unit: 'hour',
                    displayFormats: {
                      'hour': 'HH:mm',
                    }
                  },
                  ticks: {

                  }
                }],
              }
            }
          },
          drawGraph() {
            this.graphoptions = this.generateOptions();
            let data = this.generateData();
            let labels = this.generateLabels();
            
            this.graphdata = {
              labels: labels,
              data: data
            }
          },
          randomData() {
            return Math.round(Math.random() * 20);
          },
          generateData() {
            let data = [];
            for (let i = 0; i < 10; i++) {
              data.push(this.randomData(i));
            }
            return data;
          },
          newDate(hours) {
            return moment().add(hours, 'h');
          },
          generateLabels() {
            let lbls = [];
            for (let i = 0; i < 10; i++) {
              lbls.push(this.newDate(i));
            }

            return lbls;
          }
         }
      });