main.js

$(document).ready(function(){
    var chart;
    var socket = io.connect('/');
    socket.on('chart-change', function(str){
      var newsObject = JSON.parse(str);
      myApplication.$data.currencies = newsObject.list.split('%%');
      if (newsObject.removedItem.length === 3) {
        chart.load({
      		columns: myApplication.$data.cols,
      		unload: [newsObject.removedItem],
      	});
      }
    });

    var myApplication = new Vue({
      el: '#app',
      data: {
        newCurrency: "",
        fetchedData: {},
        cols: [],
        currencies : '',
        errorMsg:""
      },

      created: function () {
        // this.fetchHistory();
        this.fetchData();
      },

      watch: {
        currencies: 'drawChart'
      },

      methods: {
        fetchData: function () {
          var _this = this;
          $.get('/api/offline-data/', function(data){
            _this.fetchedData = data.data || {};
            _this.currencies = data.history.split('%%');
            return _this.drawChart();
            });
          },

          drawChart: function () {
            var _this = this;
            var Xs = Object.keys(_this.fetchedData);
            Xs.unshift("x");
            _this.cols = [];
            _this.currencies.map(function(curr) {
              var tempArray = [];
              tempArray.push(curr);
              for (var year in _this.fetchedData) {
                if (_this.fetchedData.hasOwnProperty(year) && typeof _this.fetchedData[year][curr] !== 'undefined') {
                  tempArray.push(_this.fetchedData[year][curr]);
                } else {
                  _this.removeCurrency(curr);
                  break;
                }
              }
              _this.cols.push(tempArray);
            });

            _this.cols.unshift(Xs);

            chart.load({
              columns: _this.cols
            });

          },

          addCurrency: function () {
            if (this.newCurrency.length === 3 && this.currencies.indexOf(this.newCurrency) < 0) {
              this.currencies.push(this.newCurrency.toUpperCase());
              this.emitNews();
              this.errorMsg = "";
            } else {
              this.errorMsg = "Please insert a correct currency";
            }
          },

          removeCurrency: function (currency) {
            var indexOfCurrency = this.currencies.indexOf(currency);
            if (indexOfCurrency > -1) {
              this.currencies.splice(indexOfCurrency, 1);
              this.emitNews(currency);
              chart.load({
                columns: this.cols,
                unload: [currency],
              });
            }
          },
          emitNews: function(removedItem){
            var list = this.currencies.join('%%');
            var newsStr = JSON.stringify({
              'list': list,
              'removedItem': removedItem || ""
            });
            socket.emit('chart-change', newsStr);
          }
        },
    });

    chart = bb.generate({
      "data": {
        "x": "x",
        "xFormat": "%Y",
        "columns": myApplication.$data.cols
      },
      "axis": {
        "x": {
          "type": "dateseries",
        }
      },
      "bindto": "#chart-container"
    });

});