this.loadSpec = function(url) {
var self = this;
vega.loader()
.load(url)
.then(function(data) {
self.vegaSpec = JSON.parse(data);
self.render();
//console.log("spec loaded");
});
};

this.render = function() {
this.view = new vega.View(vega.parse(this.vegaSpec))
.renderer('canvas') // set renderer (canvas or svg)
.initialize('#view') // initialize view within parent DOM container
.hover() // enable hover encode set processing
.run();
};

this.updateData = function(dataName, newData) {
var self = this;
//console.log('vegaUpdateData');
self.view.remove(dataName, function(d) {
return true;
}).run();
self.view.insert(dataName, newData).run();
}
};

var dataModel = {
newData: function() {
return [{
"category": "A",
"amount": 100 * Math.random()
}, {
"category": "B",
"amount": 100 * Math.random()
}, {
"category": "C",
"amount": 100 * Math.random()
}, {
"category": "D",
"amount": 100 * Math.random()
}, {
"category": "E",
"amount": 100 * Math.random()
}, {
"category": "F",
"amount": 100 * Math.random()
}, {
"category": "G",
"amount": 100 * Math.random()
}, {
"category": "H",
"amount": 100 * Math.random()
}];
}

};

var myViewModel = {
vmVegaHelper: new vegaHelper(),
changeData: function() {
//console.log('changeData');
this.vmVegaHelper.updateData('table',dataModel.newData());
},
loadViz: function(){
this.vmVegaHelper.loadSpec('https://vega.github.io/vega/examples/bar-chart.vg.json');
}
};

ko.applyBindings(myViewModel);

myViewModel.loadViz();