Highcharts: dynamic update stacked area with extra custom data

Question

I want to display custom prompt info in stacked area chart using the technique referred in (jQuery Highchart) Is there any way to put extra custom data inside Tooltip Box?

The chart works fine on the initial data, but does not working when dynamic adding new Points.

The source code is in http://jsfiddle.net/ukNPz/1/

$(function () {

var clusterInfoChart;

var clusterOptions = {
    chart: {
        type: 'area',
        renderTo: 'container',
        events: {
            load: function () {
                S = this.series;

                setInterval(function () {

                    var seconds = Math.round(new Date() / 1000);
                    seconds = seconds - 1397529601 + 1235;
                    console.log(seconds);

                    var shift = S[0].data.length > 10;

                    S[0].addPoint([seconds, {
                        y: 1,
                        yinfo: '192.168.119.10:cpuwarn'
                    }], true, shift);
                    S[1].addPoint([seconds, {
                        y: 1,
                        yinfo: '192.168.119.10:cpuwarn'
                    }], true, shift);

                    clusterInfoChart.redraw();
                }, 3000);
            }
        }
    },
    title: {
        text: 'clusterInfo'
    },
    xAxis: {
        categories: [
            '1205', '1210', '1215', '1220', '1225', '1230', '1235'],
        tickmarkPlacement: 'on',
        title: {
            enabled: false
        }
    },
    yAxis: {
        title: {
            text: 'Events'
        },
        labels: {
            formatter: function () {
                return this.value.y;
            }
        }
    },
    tooltip: {
        formatter: function () {
            return this.point.yinfo.replace(";", "<br>");
        }
    },
    plotOptions: {
        area: {
            stacking: 'normal',
            lineColor: '#666666',
            lineWidth: 1,
            marker: {
                lineWidth: 1,
                lineColor: '#666666'
            }
        }
    },
    series: [{
        name: 'Alert',
        data: [

        {
            y: 1,
            yinfo: '192.168.119.10:cpuwarn'
        }, {
            y: 1,
            yinfo: '192.168.119.10:cpuwarn'
        }, {
            y: 2,
            yinfo: '192.168.119.10:cpuwarn;192.168.119.11:memwarn'
        }, {
            y: 1,
            yinfo: '192.168.119.10:cpuwarn'
        }, {
            y: 2,
            yinfo: '192.168.119.10:cpuwarn;192.168.119.11:memwarn'
        }, {
            y: 1,
            yinfo: '192.168.119.10:cpuwarn'
        }, {
            y: 2,
            yinfo: '192.168.119.10:cpuwarn;192.168.119.11:memwarn'
        }

        ]
    }, {
        name: 'Warn',
        data: [

        {
            y: 0,
            yinfo: ''
        }, {
            y: 1,
            yinfo: '192.168.119.10:cpuwarn'
        }, {
            y: 0,
            yinfo: ''
        }, {
            y: 2,
            yinfo: '192.168.119.10:cpuwarn;192.168.119.11:memwarn'
        }, {
            y: 1,
            yinfo: '192.168.119.10:cpuwarn'
        }, {
            y: 0,
            yinfo: ''
        }, {
            y: 1,
            yinfo: '192.168.119.10:cpuwarn'
        }

        ]
    }]
};

Highcharts.setOptions({
    global: {
        useUTC: false
    }
});

clusterInfoChart = new Highcharts.Chart(clusterOptions);
});

Paweł Fus Paweł Fus · Accepted Answer · 2014-04-15T09:33:43

Just this format isn't proper:

[seconds, {
             y: 1,
             yinfo: '192.168.119.10:cpuwarn'
 }]

Should be:

{
             x: seconds,
             y: 1,
             yinfo: '192.168.119.10:cpuwarn'
 }

Highcharts: dynamic update stacked area with extra custom data

1 Answers