angular echart

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
    <script data-require="echarts@*" data-semver="3.1.10" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.1.10/echarts.min.js
"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="util.js"></script>
    <script src="echart.directive.js"></script>
  </head>

  <body ng-controller="MainCtrl as vm">
    <h1>Hello Plunker!</h1>
    <button ng-click="vm.addSales()">Add sales</button>
    <button ng-click="vm.moveSales()">Move sales</button>
    <echart option="vm.option" x="vm.x" y="vm.y" series="vm.series" legend="vm.legend" style="height: 300px"></echart>
    <!-- <echart option="vm.option" x="vm.x" y="vm.y" series="vm.series" style="height: 300px"></echart> -->
  </body>

</html>

// Code goes here

angular.module('app', [])

.controller('MainCtrl', MainCtrl);

function MainCtrl(util) {
  var vm = this;
  vm.option = {
    tooltip: {
      show: true,
      formatter: function(params, ticket) {
        var d = new Date(+params.name);
        var dateOption = {
          hour: 'numeric',
          minute: 'numeric',
          hour12: false
        };
        var name = d.toLocaleTimeString('en-US', dateOption);
        return params.seriesName + '<br />' + name + ': ' + params.value;
      }
    }
  };
  vm.x = [{
    type: 'category',
    name: 'Time',
    boundaryGap: true,
    axisLabel: {
      formatter: function(params) {
        var d = new Date(params);
        var dateOption = {
          hour: 'numeric',
          minute: 'numeric',
          hour12: false
        };
        return d.toLocaleTimeString('en-US', dateOption);
      }
    },
    data: setLabels(Date.now())
  }];
  vm.y = [{
    type: 'value',
    name: '€'
  }];
  vm.series = [{
    "name": "Sales",
    "type": "bar",
    "data": vm.x[0].data.map(function (label) {
      return '-';
    })
  }];
  vm.legend = {
    data: ['Sales']
  };
  vm.addSales = addSales;
  vm.moveSales = moveSales;
  var data = vm.series[0].data;

  function addSales(val, index) {
    /*var val = val || 1;
    var index = index || util.randomInt(vm.x[0].data.length - 1);
    data[index] = (data[index] === '-') ? val : data[index] + val;*/
    data[data.length - 1] = (data[data.length - 1] == '-') ? 1 : data[data.length - 1] + 1;
  }

  function moveSales() {
    var xData = vm.x[0].data;
    var next = xData[xData.length - 1] + 9e+5;
    xData.shift();
    xData.push(next);
    data.shift();
    data.push(util.randomNull(5, 1, '-'));
  }

  function setLabels(time) {
    var timeline = [];
    var now = (time) ? new Date(time) : new Date();
    now.setMilliseconds(0);
    now.setSeconds(0);
    var minutes = now.getMinutes();
    minutes = Math.round(minutes / 15) * 15;
    now.setMinutes(minutes);
    var option = {
      hour: 'numeric',
      minute: 'numeric',
      hour12: false
    }
    for (var i = now.getTime(); i >= now.getTime() - 7.2e+6; i -= 9e+5) {
      timeline.unshift(i);
    }
    return timeline;
  }
}

/* Styles go here */

// Code goes here

angular.module('app')

.directive('echart', echart);

function echart() {
  var directive = {
    scope: {
      x: '=',
      y: '=',
      series: '=',
      legend: '=',
      option: '=?',
    },
    link: link,
  };

  return directive;

  function link(scope, elem, attrs, controllers) {
    init();

    function init() {
      var height = elem[0].style.getPropertyValue('height') || '300px';
      var width = elem[0].style.getPropertyValue('width') || '600px';
      elem.css({
        display: 'block',
        height: height,
        width: width
      });
      var myChart = echarts.init(elem[0]);
      var option = angular.extend({}, scope.option);
      option.xAxis = scope.x;
      option.yAxis = scope.y;
      option.series = scope.series;
      option.legend = scope.legend;
      myChart.setOption(option);

      scope.$watch('x', function(newVal, oldVal) {
        option.xAxis = newVal;
        myChart.setOption(option);
      }, true);

      scope.$watch('series', function(newVal, oldVal) {
        if (newVal && newVal !== oldVal) {
          option.series = newVal;
          myChart.setOption(option);
        }
      }, true);
    }

  }
}

// Code goes here

angular.module('app')

.factory('util', util);

function util() {
  return {
    randomInt: randomInt,
    randomNull: randomNull,
  };
  
  function randomInt(range, min) {
    var min = min || 0;
    return Math.round(Math.random() * range + min);
  }
  
  function randomNull(range, min, empty) {
    var empty = empty || null;
    var ratio = Math.floor(Math.random() * range);
    if (ratio === 0) {
      return empty;
    } else {
      return randomInt(range, min);
    }
  }
}