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(); }); });