extjs/examples/kitchensink/classic/samples/view/charts/line/RealTimeController.js

   1 Ext.define('KitchenSink.view.charts.line.RealTimeController', {
   2     extend: 'Ext.app.ViewController',
   3     alias: 'controller.line-real-time',
   4
   5     onTimeChartRendered: function (chart) {
   6         chart.getStore().removeAll();
   7         this.addNewTimeData();
   8         this.timeChartTask = Ext.TaskManager.start({
   9             run: this.addNewTimeData,
  10             interval: 1000,
  11             repeat: 120,
  12             scope: this
  13         });
  14     },
  15
  16     onAxisLabelRender: function (axis, label, layoutContext) { // only render interger values
  17         return Math.abs(layoutContext.renderer(label) % 1) < 1e-5 ? Math.round(label) : '';
  18     },
  19
  20     onTimeChartDestroy: function () {
  21         if (this.timeChartTask) {
  22             Ext.TaskManager.stop(this.timeChartTask);
  23         }
  24     },
  25
  26     onNumberChartRendered: function (chart) {
  27         chart.getStore().removeAll();
  28         this.addNewNumberData();
  29         this.numberChartTask = Ext.TaskManager.start({
  30             run: this.addNewNumberData,
  31             interval: 1000,
  32             repeat: 240,
  33             scope: this
  34         });
  35     },
  36
  37     onNumberChartDestroy: function () {
  38         if (this.numberChartTask) {
  39             Ext.TaskManager.stop(this.numberChartTask);
  40         }
  41     },
  42
  43     onTabChange: function (tabPanel, newCard, oldCard) {
  44         if (newCard.getItemId() === 'numeric') {
  45             Ext.TaskManager.stop(this.timeChartTask);
  46             Ext.TaskManager.start(this.numberChartTask);
  47         } else {
  48             Ext.TaskManager.stop(this.numberChartTask);
  49             Ext.TaskManager.start(this.timeChartTask);
  50         }
  51     },
  52
  53     getNextValue: function (previousValue, min, max, delta) {
  54         delta = delta || 3;
  55         min = min || 0;
  56         max = max || 20;
  57
  58         delta = Ext.Number.randomInt(-delta, delta);
  59
  60         if (Ext.isNumber(previousValue)) {
  61             return Ext.Number.constrain(previousValue + delta, min, max);
  62         }
  63         return Ext.Number.randomInt(min, max);
  64     },
  65
  66     addNewTimeData: function() {
  67         var me = this,
  68             chart = me.lookupReference('time-chart'),
  69             store = chart.getStore(),
  70             count = store.getCount(),
  71             xAxis = chart.getAxes()[1],
  72             visibleRange = 10000,
  73             second = 1000,
  74             xValue, lastRecord;
  75
  76         if (count > 0) {
  77             lastRecord = store.getAt(count - 1);
  78             xValue = lastRecord.get('xValue') + second;
  79             if (xValue - me.startTime > visibleRange) {
  80                 me.startTime = xValue - visibleRange;
  81                 xAxis.setMinimum(this.startTime);
  82                 xAxis.setMaximum(xValue);
  83             }
  84             store.add({
  85                 xValue: xValue,
  86                 metric1: me.getNextValue(lastRecord.get('metric1')),
  87                 metric2: me.getNextValue(lastRecord.get('metric2'))
  88             });
  89
  90         } else {
  91             chart.animationSuspended = true;
  92             me.startTime = Math.floor(Ext.Date.now() / second) * second;
  93             xAxis.setMinimum(me.startTime);
  94             xAxis.setMaximum(me.startTime + visibleRange);
  95
  96             store.add({
  97                 xValue: this.startTime,
  98                 metric1: me.getNextValue(),
  99                 metric2: me.getNextValue()
 100             });
 101             chart.animationSuspended = false;
 102         }
 103     },
 104
 105     addNewNumberData: function() {
 106         var chart = this.lookupReference('number-chart'),
 107             store = chart.getStore(),
 108             count = store.getCount(),
 109             xAxis = chart.getAxes()[1],
 110             visibleRange = 20,
 111             minY = 0,
 112             maxY = 100,
 113             deltaY = 5,
 114             xValue, lastRecord;
 115
 116         if (count > 0) {
 117             lastRecord = store.getAt(count - 1);
 118             xValue = lastRecord.get('xValue') + 1;
 119             if (xValue > visibleRange) {
 120                 xAxis.setMinimum(xValue - visibleRange);
 121                 xAxis.setMaximum(xValue);
 122             }
 123             store.add({
 124                 xValue: xValue,
 125                 yValue: this.getNextValue(lastRecord.get('yValue'), minY, maxY, deltaY)
 126             });
 127
 128         } else {
 129             chart.animationSuspended = true;
 130             xAxis.setMinimum(0);
 131             xAxis.setMaximum(visibleRange);
 132
 133             store.add({
 134                 xValue: 0,
 135                 yValue: this.getNextValue((minY + maxY) / 2, minY, maxY)
 136             });
 137             chart.animationSuspended = false;
 138         }
 139     }
 140
 141 });