Question

I am currently using highstock to plot the total number of items available based on time throughout the day (which then updates real-time).

If two changes to the total number of items happens at the same time, in highstock I get a vertical bar of the difference:

So in my example image we start with 4299 things, then 53 items are removed and 50 are added (technically at the same time, but are two different transactions and are two points). With a net difference of -3. (or in otherwords, I get {x: 5:44:15 and y: 4246, change: -53}, {x: 5:44:15, y: 4296, change: 50}).

So my question:
Is it possible in highstock to merge those points to get rid of the vertical bar and use 4296 as the shown value? I was hoping I could then use the tooltip formatter to loop through ‘this.points’ and display a change of -53 and a change of 50 in the tooltip so the user can see what resulted in a net change of -3.

If this is not possible, I will just merge the points myself and pass all the relevant information in the point to generate the tooltip (and chart look) that I am going for, but wanted to see if I could just utilize all the functionality of highstock first – and keep these points separate.

Thanks!

Edit::

new Highcharts.StockChart({
                        chart : {
                            renderTo : 'realTimeChart',
                            zoomType: 'x',
                            backgroundColor: '#feffdd',
                            style: {
                                fontFamily: 'Segoe UI'
                            },
                            type: 'spline'
                        },

                        plotOptions: {
                            area: { animation: false },
                            arearange: { animation: false },
                            areaspline: { animation: false },
                            areasplinerange: { animation: false },
                            bar: { animation: false },
                            column: { animation: false },
                            columnrange: { animation: false },
                            gauge: { animation: false },
                            line: { animation: false },
                            pie: { animation: false },
                            scatter: { animation: false },
                            series: { animation: false },
                            spline: { animation: false }
                        },

                        xAxis: {
                            ordinal: false
                        },

                        tooltip: {
                            animation: false,
                            formatter: function() {
                                var p = '';

                                p += '<span style="font-size: 9px;">' + Highcharts.dateFormat('%A, %b %e, %Y %H:%M:%S', this.x) +'</span><br/>';
                                $.each(this.points, function(i, point){
                                    p += '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>'+ this.y +'</b>';
                                    if (point.point.where) {
                                        p += '<br />' + point.point.where + ' changed by ' + point.point.change + (point.point.who ? ' (' + point.point.who + ')' : '');
                                    }
                                });

                                return p;

                            }
                        },

                        rangeSelector: {
                            buttons: [{
                                count: 30,
                                type: 'minute',
                                text: '30M'
                            }, {
                                count: 1,
                                type: 'hour',
                                text: '1H'
                            }, {
                                count: 6,
                                type: 'hour',
                                text: '6H'
                            }, {
                                type: 'all',
                                text: 'Day'
                            }],
                            inputEnabled: false,
                            selected: 1
                        },

                        exporting: {
                            enabled: false
                        },

                        series : [{
                            name : 'Available',
                            data : data,
                            lineWidth: 1,
                            states: {
                                hover: {
                                    enabled: false
                                }
                            }
                        }]

Data is in the format I showed previously, except the x is actually in milliseconds since epoch:

data = [
        {x: 123456789, y: 2000, where: 'Location', change: 40, who: 'Joe'},
        {x: 123456789, y: 1960, where: 'Location', change: -40, who: 'Bob'},
        ...
    ];

Answer 1

Just wanted to follow up with how I easily got around the probem. Instead of placing by second, I decided to group points together to the nearest minute rounding down (so I have blocks of minutes).

Then for each point I passed in an array of the actual points contained within that minute block as a new argument, and updated the y value for that minute block. Then I used the tooltip formatter to display all the changes within that minute block with their actual time of change. This gave me a more flowing graph instead of all these hard vertical points for the same x-axis.

To easily change a data point at a specific x-axis point, I kept a separate array of the location of the minute block inside the series.data array for highcharts, that way if I needed to update a block, I knew exactly where that time series was.

Here is how I accomplished my task:
I create the reference array:

var pointIndex = {};

I created the inital data series from historical data for the day (pulled in via ajax):

var data = [];
var time = Math.floor(actual_time / 60000) * 60000;
pointIndex[time] = data.push({x: time, y: items_available, change: [{when: actual_time}]});

So actual_time is the number of milliseconds since epoch (when the even change occured), then I round that to the nearest minute to get the minute time block, change is the argument that will hold all the actual points for display in the tooltip.

So when I add a new point I check if the minute block exists, if it does not, add a new point, otherwise update an old point:

var time = (new Date()).getTime();
var point = Math.floor(time / 60000) * 60000;
if (pointIndex[point]) {
    var change = chart.series[0].data[pointIndex[point]].change;
    change.push({when: time});
    chart.series[0].data[pointIndex[point]].update({x: point, y: items_available, change: change});
} else {
    pointIndex[point] = chart.series[0].data.length;
    chart.series[0].addPoint({x: point, y: items_available, change: [{when: time}]}, false, false);
}

(In all cases I do the actual chart refresh after I am done updating points.)

Hopefully that will help anyone else who finds theirself in the same position!

Edit:: (forgot the formatter):

tooltip: {
    animation: false,
    formatter: function() {
        var p = '';

        p += '<span style="font-size: 9px;">' + Highcharts.dateFormat('%A, %b %e, %Y %H:%M', this.x) +'</span><br/>';
        $.each(this.points, function(i, point){
            p += '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>'+ this.y +'</b>';
            if (point.point.change) {
                for(var j = 0; j < point.point.change.length; ++j) {
                    p += '<br />Change at: ' + new Date(point.point.change[j].when).toTimeString();
                }
            }
        });

        return p;

    }
}