highcharts-show-last-points

highcharts-show-last-points plugin demo

by J. Albert Bowden

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://rawgithub.com/milmazz/highcharts-show-last-points/master/highcharts-show-last-points.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="chart"></div>

JavaScript

// Some styling options for yAxis
Highcharts.theme = {
    yAxis: {
        gridLineWidth: 1,
        gridLineColor: "rgb(240, 240, 240)",
        minorGridLineColor: 'rgba(255, 255, 255, 0.07)',
        lineColor: "rgb(241, 141, 5)",
        lineWidth: 1,
        tickColor: "rgb(241, 141, 5)",
        tickWidth: 1,
        showEmpty: false,
        labels: {
            style: {
                color: 'rgb(102, 102, 102)',
                fontWeight: 'bold'
            }
        },
        title: {
            style: {
                color: 'rgb(229, 64, 40)',
                font: "bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif"
            }
        }
    }
};

// Apply the styling options
Highcharts.setOptions(Highcharts.theme);

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

// Data generator helper
function data(start, end, samples, min, max) {
    var temp = [];
    var range = ~~ ((end - start) / samples);
    for (var i = 1; i < samples; i++) {
        temp.push([start.getTime() + range * i, min + Math.random() * (max - min)]);
    }
    return temp;
}

// Create a timer
var now = new Date();
var start = new Date(now - 60000);

var example_data = [{
    name: 'Signal 1',
    data: data(start, now, 20, 0, 100),
    yAxis: 0
}, {
    name: "Signal 2",
    data: data(start, now, 20, 20, 80),
    yAxis: 1
}, {
    name: "Signal 3",
    data: data(start, now, 20, 10, 100),
    yAxis: 2
}, {
    name: "Signal 4",
    data: data(start, now, 20, 20, 80),
    yAxis: 1
}, {
    name: "Signal 5",
    data: data(start, now, 20, 20, 80),
    yAxis: 1
}];

//////////////////////
// Chart definition //
//////////////////////
var chart = $("#chart").highcharts({
    legend: {
        enabled: true
    },
    chart: {
        animation: Highcharts.svg,
        events: {
            load: function () {
                // set up the updating of the chart each second
                var chart = this,
            ...