Adding dynamic mean to time series chart

Question

I will try to explain my problem as much accurate as possible. I am looking for a javascript chart library filling the two following conditions:

From an ajax request retrieving time series, 
display dynamically data when changing the time window.

such as it is perfectly done on highstocks: http://www.highcharts.com/stock/demo/basic-line

And

plot an horizontal line corresponding to the mean, 
changing when the user update the time window on the chart.

Actually it is possible to display an horizontal line. But they are fixed on the whole data and do not change accordingly when the time window is modified:

http://www.highcharts.com/stock/demo/yaxis-plotlines

I am quite new to the topic and would like to know if it'sp ossible to modify Highstock classes to have such a result. Or maybe some other js libraries exists?

Answer 1

Using a combination of the answer here:

• Highchart, get total of visible series data after setExtremes

And an example of dynamic average using all visible series that I made for a previous question, here:

• http://jsfiddle.net/jlbriggs/gweuLegq/

I put together this example, using the afterSetExtremes event, like this:

xAxis      : { 
            events:{
                afterSetExtremes:function() {
                    var ext = this.getExtremes();
                  getAverage(this.chart, ext.min, ext.max, show, width, avgColor, dashStyle);                
                }
            }
        },

Working example here:

• http://jsfiddle.net/jlbriggs/c93543yL/

The idea is:

1) capture the afterSetExtremes event

2) get the resulting axis min and max

3) loop through the series data

4) if a point is between the min and max, increment the count, and add the point's y value to the sum

5) calculate the average accordingly, check for existence of average series, if exists, update, if not, add

It could as easily use a plot line that you add/remove as needed instead of a series, but I like having it as a series so that it has a legend entry.