2

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?

Shaunak
  • 17,377
  • 5
  • 53
  • 84
sdawson26
  • 139
  • 4
  • 15

1 Answers1

1

The key is to update the data array in the series and the highcharts will take care of the smooth transition. for example:

 $scope.chartConfig.series[0].data = rnd;

Here I have updated the example for you to show smooth update transition: JsFiddle

And an example with Drop Down and watch : JsFiddle

Hope that helps. let me know if you have any questions on how it works.

Shaunak
  • 17,377
  • 5
  • 53
  • 84
  • Shaunak I do have one additional question: What if $scope.chartConfig.series[0].data needed to be equal to a value that was created by a function... In other words, I've got 2 arguments (the object that holds the data, and the route that we're traversing into): `//Let a propertyExpr string define a traversal route into an object $scope.dataResult = function(obj, propertyExpr) { return $parse(propertyExpr)(obj); }` `$scope.chartConfig.series[0].data = dataResult(obj, exp);` How would I make the watch function update the dataResult that is equal to series[0]? Thank you very much!! – sdawson26 Apr 05 '14 at 14:06
  • Since you answered my question, I'm going to go ahead and mark this one as answered and post a secondary question here: http://stackoverflow.com/questions/22882107/scope-watch-make-it-return-a-function-on-another-scope – sdawson26 Apr 05 '14 at 14:28
  • I've done this but don't see any smooth transition. None of the fiddles you linked have a smooth transition on the bars like a vanilla series[0].data[i].update(new_value) does. – Dave Briand Jul 01 '15 at 21:50
  • @DaveBriand while Highchart updates their libraries pretty fast, I still see animated transations on the fiddles I linked in the answer. I use the same method in plenty apps I have online. Can you please create a fiddle to the kind of animation you are talking about using the `update` ? May be that will help figuring out what the difference is. – Shaunak Sep 23 '15 at 03:34
  • @Shaunak I've dumped highcharts for d3. I had figured it out but had to change some of the code in angular-highcharts when the series was updating. Can't remember what - sorry :) – Dave Briand Sep 23 '15 at 14:27