CPU and Memory Monitor

var gradientStyle = {
    coordinates: "user",
    line: {
        start: { x: 0, y: 0 },
        end: { x: 0, y: 100 }
    },
    stops: [{
            color: "rgb(0, 255, 0)",
            stop: 0
        },
        {
            color: "rgb(255, 0, 0)",
            stop: 1
        }]
};
var chart = ReactiveChart.chart({
    element: "_chart1_1",
    type: "x",
    xAxis: {
        ticks: {
            type: "time"
        }
    },
    yAxis: {
        maxWindow: {
            start: 0, end: 110
        }
    },
    series: {
        aggregate: {
            interval: "date",
            maxNrOfItems: 200
        },
        shape: "line",
        series: [{
                id: "cpu1",
                data: [{ y: 10, x: Date.now() }],
                style: {
                    strokeStyle: gradientStyle
                }
            },
            {
                id: "cpu2",
                data: [{ y: 10, x: Date.now() }],
                style: {
                    strokeStyle: gradientStyle
                }
            }]
    }
});
var chart2 = ReactiveChart.chart({
    element: "_chart1_2",
    type: "x",
    xAxis: chart.xAxes,
    yAxis: {
        maxWindow: {
            start: 0, end: 110
        }
    },
    series: {
        aggregate: {
            interval: "date",
            maxNrOfItems: 200
        },
        shape: "area",
        series: [{
                id: "memory",
                data: [{ y: 10, x: Date.now() }],
                style: {
                    fillStyle: gradientStyle
                }
            }]
    }
});
function createRandomWalk(data) {
    var add = 0;
    return function () {
        add = Math.min(10, Math.max(-10, Math.random() * 10 - 5));
        var y = Math.max(0, Math.min(100, data.get(data.length - 1).y + add));
        return y;
    };
}
function inserterForSeries(series) {
    var data = series.data;
    var random = createRandomWalk(data);
    return function () {
        data.push({ y: random(), x: Date.now() });
        if (data.length > 1000) {
            data.shift();
        }
    };
}
var insertCpu1 = inserterForSeries(chart.series.get("cpu1"));
var insertCpu2 = inserterForSeries(chart.series.get("cpu2"));
var insertMemory = inserterForSeries(chart2.series.get("memory"));
function insert() {
    /**
     * Let's commit all changes at the same time.
     */
    ReactiveChart.reactive.inTransaction(function () {
        insertCpu1();
        insertCpu2();
        insertMemory();
    });
    setTimeout(insert, 100);
}
insert();

Chart showing dynamic addition and removal of data and on the fly data-aggregation.