Realtime data binding JavaScript

I've got this requirement where i'm not very successful in breaking through client side technology. Hope someone might have already solved this kind of puzzle on what i don't wanna break my head again and burn my time.

My Requirement is :

  • I've a server which does have a data processing engine which will feed a database for every 30 seconds on an average.
  • I need a client side web application where i want to draw some graphs as per data generated by my server Engine.
  • I could find suitable library for my Graphing requirements (Flotr2)
  • I've setup a Node.js server with socket.io comm for my back end data streaming.

I can simply listen on socket using plain js and call functions to draw graphs.

But, my application has to be highly configurable. i want multiple column data from Database to draw on single graph to fulfill my requirement (which means, multiple values on single element).

If i implement my client-side using plain JavaScript, at some point my code would become un-maintainable and also i might be re-inventing existing wheel.

So, i'm looking for client side library for data binding (one value to one element, multiple values to single element, multiple values to multiple elements)

I'm basically a back-end and mobile guy but not JS guy. I've browsed web and got some random suggestions to use Knockout.Js, Angular.js, Backbone.js, Meteor.js, which i can't rely one.

Edit:

I've already tried Knockout.js for client-side data binding. I'm stuck with my second and third use-case (Many values to single element and many values to many elements).

Let say from server i got {"a":55,"b":5,"c":46} as data. I've two HTML elements with id "x","y". I want to bind values a,b to element "x" and values b,c to element "y". is it possible? any simple fiddle would be great help.

So, can somebody point me right direction and share your thoughts here.

knockout.js- Good for data binding to your view. Less learning curve easy to implement.

angular.js- this is a full stack client side framework (MVC/MVVM). Provide controllers, services and modules to architect your front end. Data binding is only one part of angular.js job. You will need to bit more time on learning as it's more complex framework than knockout.

ember.js - if the data data update frequency is high and rendering performance is an issue to you this could be an option as well. Rendering performance is much higher in ember than angular.js and knockout.js (according to my experience. Do some testing on your data model, supported browsers before coming to a conclusion).

There are some more good frameworks like backbone.js for your requirements. But I don't have any experience with them.

Good read - http://weblogs.asp.net/dwahlin/javascript-data-binding-frameworks

Edit 1:

knockout.js computed function can be used to bind multiple values to an element.

View model

var self = this;
self.valueA = ko.observable(55);
self.valueB = ko.otbservable(5);
self.valueC = ko.otbservable(46);
self.valueX = ko.computed(function(){
    return self.valueA() + self.valueB();
});
self.valueY = ko.computed(function(){
    return self.valueB() - self.valueC();
});

HTML

Value X, <span data-bind='text: valueX'> </span>

Value Y, <span data-bind='text: valueY'> </span>

Look examples here http://www.knockmeout.net/