I've recently made a prototype of a highchart that works strictly in jquery. I had a bunch of spaghetti code, but I also had a nice transitional animation when selecting a controller that would animate the chart and update the series. In short, it was done like so...
var chart = new Highcharts.Chart(chartOptions);
// ...
$('select#dropdown').change(function(){
// ...
chart.series[0].setData(/*data*/, false);
chart.series[1].setData(/*data*/, false);
chart.series[2].setData(/*data*/, false);
// ...
chart.redraw();
}
So the chart (1) initialized on page load, (2) Takes an argument from a dropdown box (3) decides what the new value is for a given series and (4) smoothly redraws the chart to that value.
My problem is that I'm having a very difficult time re-producing this in angular. Especially highcharts-ng, which seems to have every example under the sun EXCEPT updating existing points.
http://pablojim.github.io/highcharts-ng/examples/example.html
There are things like adding series, deleting series etc.. What about UPDATING a series? What if we wanted a series tied to a scope variable, which was constantly changing? How would I make a $scope.$watch on the drop-down box tell the chart to update the points?