sandbox.js

Ext4.onReady(function() {
    var memoryArray,
        processArray,
        colors,
        memoryStore,
        processesMemoryStore,
        cpuLoadStore,
        data,
        memoryPieChartConfig,
        barChartConfig,
        cpuLoadChartConfig,
        cpuLoadChartConfig2,
        win,
        cpuLoadTimer, pass;

    memoryArray = ['Wired', 'Active', 'Inactive', 'Free'];
    processArray = ['explorer', 'monitor', 'charts', 'desktop', 'Ext3', 'Ext4'];
    colors = ['rgb(244, 16, 0)',
              'rgb(248, 130, 1)',
              'rgb(0, 7, 255)',
              'rgb(84, 254, 0)'];

    Ext4.chart.theme.Memory = Ext4.extend(Ext4.chart.theme.Base, {
        constructor: function(config) {
            Ext4.chart.theme.Base.prototype.constructor.call(this, Ext4.apply({
                colors: colors
            }, config));
        }
    });

    function generateData(a) {
        var data = [],
            i,
            names = a,
            rest = a.length, total = rest, consume;
        for (i = 0; i < a.length; i++) {
            consume = Math.floor(Math.random() * rest * 100) / 100 + 2;
            rest = rest - (consume - 5);
            data.push({
                name: names[i],
                memory: consume
            });
        }

        return data;
    }

    memoryStore = Ext4.create('store.json', {
        fields: ['name', 'memory'],
        data: generateData(memoryArray)
    });

    processesMemoryStore = Ext4.create('store.json', {
        fields: ['name', 'memory'],
        data: generateData(processArray)
    });

    cpuLoadStore = Ext4.create('store.json', { 
      fields: ['core1', 'core2', 'time'] 
    });

    data = [];

    function generateCpuLoad() {
        function generate(factor) {
            var value = factor + ((Math.floor(Math.random() * 2) % 2) ? -1 : 1) * Math.floor(Math.random() * 9);

            if (value < 0 || value > 100) {
                value = 50;
            }

            return value;
        }

        if (data.length === 0) {
            data.push({
                core1: 0,
                core2: 0,
                time: 0
            });

            for (var i = 1; i < 100; i++) {
                data.push({
                    core1: generate(data[i - 1].core1),
                    core2: generate(data[i - 1].core2),
                    time: i
                });
            }

            cpuLoadStore.loadData(data);
        }
        else {
            cpuLoadStore.data.removeAt(0);
            cpuLoadStore.data.each(function(item, key) {
                item.data.time = key;
            });

            var lastData = cpuLoadStore.last().data;
            cpuLoadStore.loadData([{
                core1: generate(lastData.core1),
                core2: generate(lastData.core2),
                time: lastData.time + 1
            }], true);
        }

    }

    generateCpuLoad();

    memoryPieChartConfig = {
        flex: 1,
        xtype: 'chart',
        animate: {
            duration: 250
        },
        store: memoryStore,
        shadow: true,

        legend: {
            position: 'right',
            update: false
        },
        insetPadding: 40,
        theme: 'Memory:gradients',
        series: [{
            donut: 30,
            type: 'pie',
            field: 'memory',
            showInLegend: true,
            tips: {
                trackMouse: true,
                width: 140,
                height: 28,
                renderer: function(storeItem, item) {
                    //calculate percentage.
                    var total = 0;
                    memoryStore.each(function(rec) {
                        total += rec.get('memory');
                    });
                    this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('memory') / total * 100) + '%');
                }
            },
            highlight: {
                segment: {
                    margin: 20
                }
            },
            labelTitle: {
                font: '13px Arial'
            },
            label: {
                field: 'name',
                display: 'rotate',
                contrast: true,
                font: '12px Arial'
            }
        }]
    };

    barChartConfig = {
        flex: 1,
        xtype: 'chart',
        theme: 'Category1',
        store: processesMemoryStore,
        animate: {
            easing: 'ease-in-out',
            duration: 750
        },
        axes: [{
            type: 'Numeric',
            position: 'left',
            minimum: 0,
            maximum: 10,
            fields: ['memory'],
            title: 'Memory',
            labelTitle: {
                font: '13px Arial'
            },
            label: {
                font: '11px Arial'
            }
        },{
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            title: 'System Processes',
            labelTitle: {
                font: 'bold 14px Arial'
            },
            label: {
                rotation: {
                    degrees: 45
                }
            }
        },{
            type: 'Numeric',
            position: 'top',
            fields: ['memory'],
            title: 'Memory Usage',
            labelTitle: {
                font: 'bold 14px Arial'
            },
            label: {
                fill: '#FFFFFF',
                stroke: '#FFFFFF'
            },
            axisStyle: {
                fill: '#FFFFFF',
                stroke: '#FFFFFF'
            }
        }],
        series: [{
            title: 'Processes',
            type: 'column',
            xField: 'name',
            yField: 'memory',
            renderer: function(sprite, record, attr, index, store) {
                var highColor = Ext4.draw.Color.fromString('#e84b67'),
                    lowColor = Ext4.draw.Color.fromString('#b1da5a'),
                    value = record.get('memory'),
                    color;

                if (value > 5) {
                    color = lowColor.getDarker((value - 5) / 15).toString();
                }
                else {
                    color = lowColor.getLighter(((5 - value) / 20)).toString();
                }

                if (value >= 8) {
                    color = '#CD0000';
                }

                return Ext.apply(attr, {
                    fill: color
                });
            }
        }]
    };

    cpuLoadChartConfig = {
        flex: 1,
        xtype: 'chart',
        theme: 'Category1',
        animate: false,
        store: cpuLoadStore,
        legend: {
            position: 'bottom',
            update: false
        },
        axes: [{
            type: 'Numeric',
            position: 'left',
            minimum: 0,
            maximum: 100,
            fields: ['core1'],
            title: 'CPU Load',
            grid: true,
            labelTitle: {
                font: '13px Arial'
            },
            label: {
                font: '11px Arial'
            }
        }],
        series: [{
            title: 'Core 1 (3.4GHz)',
            type: 'line',
            lineWidth: 4,
            showMarkers: false,
            fill: true,
            axis: ['left'],
            xField: 'time',
            yField: 'core1',
            style: {
                'stroke-width': 1
            }
        }]
    };

    cpuLoadChartConfig2 = {
        flex: 1,
        xtype: 'chart',
        theme: 'Category2',
        animate: false,
        store: cpuLoadStore,
        legend: {
            position: 'bottom',
            update: false
        },
        axes: [{
            type: 'Numeric',
            position: 'left',
            minimum: 0,
            maximum: 100,
            grid: true,
            fields: ['core2'],
            title: 'CPU Load',
            labelTitle: {
                font: '13px Arial'
            },
            label: {
                font: '11px Arial'
            }
        }],
        series: [{
            title: 'Core 2 (3.4GHz)',
            type: 'line',
            lineWidth: 4,
            showMarkers: false,
            fill: true,
            axis: ['left'],
            xField: 'time',
            yField: 'core2',
            style: {
                'stroke-width': 1
            }
        }]
    };

    win = Ext4.widget('window', {
        x: 90,
        y: 50,
        width: 800,
        height: 600,
        title: 'System Statistics',
        renderTo: Ext4.getBody(),
        closeAction: 'hide',
        layout: 'fit',
        items: [{
            xtype: 'panel',
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            items: [{
                flex: 1,
                height: 600,
                width: 400,
                xtype: 'container',
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                items: [
                    cpuLoadChartConfig,
                    cpuLoadChartConfig2
                ]
            }, {
                flex: 1,
                width: 400,
                height: 600,
                xtype: 'container',
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                items: [
                    memoryPieChartConfig,
                    barChartConfig
                ]
            }]
        }]
    });

    pass = 0;
    function doGenerateCpuLoad() {
        clearTimeout(cpuLoadTimer);
        cpuLoadTimer = setTimeout(function() {
            if (pass % 3 === 0) {
                memoryStore.loadData(generateData(memoryArray));
            }

            if (pass % 5 === 0) {
                processesMemoryStore.loadData(generateData(processArray));
            }

            generateCpuLoad();
            doGenerateCpuLoad();
            pass++;
        }, 500);
    }

    Ext.get('chart-win-shortcut').on('click', function() {
        doGenerateCpuLoad();
        win.show();
    });
});