[Solved]-knockoutJS dynamic chart with high charts-Highcharts

I have experience with both KO and Highcharts but weirdly I've never combined them in this manner. It would be nice to simply hold a KO model in memory that mimics the config object of HC and the two just play nice. Unfortunately this isn't going to happen as KO's observables are functions and HC expects pure json. You could do this but you'd have to destroy the chart each time and recreate with an unmapped copy of your KO model so probably not what you were thinking.

When you say dynamic I am assuming you mean the data only?

There are a number of methods on the chart/series objects documented here that can be used to connect your model to you chart. A really simple and incomplete way would be something like.

self.addUser = function() {
    var user = new User("Foo", 0, 0, new Reading(0, 0));
    self.users.push();
    self.subscribe();

    // chart handler
    /// need to convert the readingsArray into a data array
    chart.addSeries({ name: user.name, data: [180, 175, 195, 180] });
}

Alternatively you could subscribe to the users array and update the chart accordingly. (Note I didn't map your user readings data to the array but you get the idea)

viewModel.users.subscribe(function() {
  .. update chart here
});

See here for more details on subscribing to observables.

Here is the fiddle I created to test this.

http://jsfiddle.net/madcapnmckay/uVTNU/

I'm afraid there is going to be a bit of manual mapping of your model objects to highchart's data format.

Hope this helps.