CODEWITHSUNDEEP
animationhighcharts
Szymon Rozga
Szymon Rozga

Reputation: 18168

Highcharts custom animation support

Is there any way to fire a custom gradient or color animation on a bar in HighCharts either when the series data is updated or just based on other custom application events?

For example, when data arrives into our application, HighCharts can animate the bar to a new point nicely. However, changes to our data will be fairly small so seeing the bar actually change will be challenging for our users. We would, however, like to visually indicate that a change occurred. Maybe a minor flash. Maybe we gradient transition. Not sure yet, but we'll be limited by HighChart's capabilities.

Does a developer have any control over animating these bars other than the animation duration and easing as per http://api.highcharts.com/highstock#chart.animation ?

Upvotes: 1

Views: 544

Answers (1)

ZekeDroid
ZekeDroid

Reputation: 7209

I actually just finished writing a script that will do this. The trick is to fire a function with a setInterval() which, at each point, increases the lum (for example) by a few points. Then reaches a high and comes back down to the original color.

I used this function for the lum change:

function ColorLuminance(hex, lum) {
    // validate hex string
    hex = String(hex).replace(/[^0-9a-f]/gi, '');
    if (hex.length < 6) {
      hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
    }
    lum = lum || 0;

    // convert to decimal and change luminosity
    var rgb = "#",
      c, i;
    for (i = 0; i < 3; i++) {
      c = parseInt(hex.substr(i * 2, 2), 16);
      c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
      rgb += ("00" + c).substr(c.length);
    }
    return rgb;
  }

Your task would then be to write a script, say in jQuery, like this one:

$.each(chart.series, function(j, series) {
  for (var i = 0.000; i < 1; i += 0.01) {
    setTimeout(function() {
      series.update({
        color: ColorLuminance(curr_color, i)
      });
    }, 100);
  }
});

That function doesn't quite do it but I'm about to finish it so will edit once I solve it.

Upvotes: 1

Related Questions