Highcharts : How to flag the local maxima on a dynamic graph drawn using HighChart

Question

Here is the jsfiddle link http://jsfiddle.net/MzQE8/19/

And here is my code

       $(function () {
       $(document).ready(function() {
       Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });

    var chart;

    $('#container').highcharts({
        chart: {
            type: 'spline',
            animation: Highcharts.svg, // don't animate in old IE
            marginRight: 10,
            events: {
                load: function() {

                    // set up the updating of the chart each second
                    var series = this.series[0];
                    setInterval(function() {
                        var x = (new Date()).getTime(), // current time
                            y = Math.random();
                        series.addPoint([x, y], true, true);

                    }, 1000);
                }
            }
        },
        title: {
            text: 'Live random data'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 450
        },
        yAxis: {
            title: {
                text: 'Value'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        plotOptions:{

            series : {
                lineWidth:1
            }
        },
        tooltip: {
            formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
                    Highcharts.numberFormat(this.y, 2);
            }
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        series: [{
            name: 'Random data',
            data: (function() {
                // generate an array of random data
                var data = [],
                    time = (new Date()).getTime(),
                    i;

                for (i = -30; i <= 0; i++) {
                    data.push({
                        x: time + i * 1000,
                        y: Math.random()
                    });
                }
                return data;
            })(),
            color:'red'
        }]
     });
  });

});

What I would Like to do here is to give different color to those points which are greater than those in its immediate neighborhood.

How to do that?

One approach that seems plausible is to keep the greatest value till now in variable and then if something new comes which is larger than the older greatest we should update that and the corresponding point in the graph be given a different color.

Is there any other more direct way to do that?

Answer 1

In the addPoint function, you can use objects (instead of array) and set color. Only what you need it is add condition which will modify default color.

var x = (new Date()).getTime(), // current time
                            y = Math.random(),
                            color = 'red'; //default color

                        //condition 

                        series.addPoint({
                            x: x, 
                            y: y,
                            color: color
                        }, true, true);

http://jsfiddle.net/MzQE8/130/