Edit in JSFiddle

// Open source example - use and modify as you like
// See http://www.highcharts.com
$(function () {
    var updateDataSpeedMs = 1000,
        animSpeedMs = updateDataSpeedMs > 400 ? updateDataSpeedMs - 200 : updateDataSpeedMs,
        chartContainer = $('#container').highcharts({
            chart: {
                type: 'spline'
            },
            colors: ['#0dedbd', '#29c7a4', '#0abd8d', '#079b7a'],
            title: {
                style: {
                    color: '#00be63',
                    fontWeight: 'bold'
                },
                text: 'Dynamic data chart w. Highcharts',
                x: -50
            },
            xAxis: {
                categories: [],
                title: {
                    text: 'X-axis title',
                    style: {
                        color: '#00be63',
                        fontWeight: 'bold'
                    }
                }
            },
            yAxis: {
                min: 0,
                max: 100,
                tickInterval: 1,
                title: {
                    text: 'Y-axis title',
                    style: {
                        color: '#00be63',
                        fontWeight: 'bold'
                    }
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                enabled: false
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                marker: {
                    'enabled': true
                },
                name: 'Streaming Data 1',
                data: []
            }, {
                marker: {
                    'enabled': true
                },
                name: 'Streaming Data 2',
                data: []
            }, {
                marker: {
                    'enabled': true
                },
                name: 'Streaming Data 3',
                data: []
            }, {
                marker: {
                    'enabled': true
                },
                name: 'Streaming Data 4',
                data: []
            }],
            plotOptions: {
                series: {
                    animation: {
                        duration: animSpeedMs
                    }
                }
            }
        });

    // Generate next random data value from a current value (-/+ 5)
    function getYValue(prevY) {
        var newY = prevY + Math.floor((Math.random() * 10 + 1) - 5);
        if (newY < 0) newY = 0;
        if (newY > 100) newY = 100;
        return newY;
    }

    // Setup initial random data
    var chartHc = chartContainer.highcharts();
    var x = 20,
        y = [],
        i, j;
    for (j = 0; j < x; j++) {
        for (i = 0; i < 4; i++) {
            y[i] = getYValue(50 + Math.floor(Math.random() * 20 + 1) - 10);
            chartHc.series[i].addPoint([j, y[i]]);
        }
    }

    // Dynamically add new data-points to the different series
    function addData() {
        for (i = 0; i < 4; i++) {
            y[i] = getYValue(y[i]);
            chartHc.series[i].addPoint([x, y[i]]);
        }

        setTimeout(addData, updateDataSpeedMs);
        chartHc.xAxis[0].update({
            'min': ++x - 20
        }, true);
    }

    // Start
    addData();
});