examples/charts/LiveUpdates.js

   1 Ext.require([
   2     'Ext.window.Window',
   3     'Ext.chart.*'
   4 ]);
   5
   6 Ext.onReady(function () {
   7     var chart;
   8     var generateData = (function() {
   9         var data = [], i = 0,
  10             last = false,
  11             date = new Date(2011, 1, 1),
  12             seconds = +date,
  13             min = Math.min,
  14             max = Math.max,
  15             random = Math.random;
  16         return function() {
  17             data = data.slice();
  18             data.push({
  19                 date:  Ext.Date.add(date, Ext.Date.DAY, i++),
  20                 visits: min(100, max(last? last.visits + (random() - 0.5) * 20 : random() * 100, 0)),
  21                 views: min(100, max(last? last.views + (random() - 0.5) * 10 : random() * 100, 0)),
  22                 veins: min(100, max(last? last.veins + (random() - 0.5) * 20 : random() * 100, 0))
  23             });
  24             last = data[data.length -1];
  25             return data;
  26         };
  27     })();
  28
  29     var group = false,
  30         groupOp = [{
  31             dateFormat: 'M d',
  32             groupBy: 'year,month,day'
  33         }, {
  34             dateFormat: 'M',
  35             groupBy: 'year,month'
  36         }];
  37
  38     function regroup() {
  39         group = !group;
  40         var axis = chart.axes.get(1),
  41             selectedGroup = groupOp[+group];
  42         axis.dateFormat = selectedGroup.dateFormat;
  43         axis.groupBy = selectedGroup.groupBy;
  44
  45         chart.redraw();
  46     }
  47
  48     var store = Ext.create('Ext.data.JsonStore', {
  49         fields: ['date', 'visits', 'views', 'veins'],
  50         data: generateData()
  51     });
  52
  53     var intr = setInterval(function() {
  54         var gs = generateData();
  55         var toDate = timeAxis.toDate,
  56             lastDate = gs[gs.length - 1].date,
  57             markerIndex = chart.markerIndex || 0;
  58         if (+toDate < +lastDate) {
  59             markerIndex = 1;
  60             timeAxis.toDate = lastDate;
  61             timeAxis.fromDate = Ext.Date.add(Ext.Date.clone(timeAxis.fromDate), Ext.Date.DAY, 1);
  62             chart.markerIndex = markerIndex;
  63         }
  64         store.loadData(gs);
  65     }, 100);
  66
  67     Ext.create('Ext.Window', {
  68         width: 800,
  69         height: 600,
  70         maximizable: true,
  71         title: 'Live Updated Chart',
  72         layout: 'fit',
  73         items: [{
  74             xtype: 'chart',
  75             style: 'background:#fff',
  76             store: store,
  77             id: 'chartCmp',
  78             axes: [{
  79                 type: 'Numeric',
  80                 grid: true,
  81                 minimum: 0,
  82                 maximum: 100,
  83                 position: 'left',
  84                 fields: ['views', 'visits', 'veins'],
  85                 title: 'Number of Hits',
  86                 grid: {
  87                     odd: {
  88                         fill: '#dedede',
  89                         stroke: '#ddd',
  90                         'stroke-width': 0.5
  91                     }
  92                 }
  93             }, {
  94                 type: 'Time',
  95                 position: 'bottom',
  96                 fields: 'date',
  97                 title: 'Day',
  98                 dateFormat: 'M d',
  99                 groupBy: 'year,month,day',
 100                 aggregateOp: 'sum',
 101
 102                 constrain: true,
 103                 fromDate: new Date(2011, 1, 1),
 104                 toDate: new Date(2011, 1, 7)
 105             }],
 106             series: [{
 107                 type: 'line',
 108                 axis: 'left',
 109                 xField: 'date',
 110                 yField: 'visits',
 111                 label: {
 112                     display: 'none',
 113                     field: 'visits',
 114                     renderer: function(v) { return v >> 0; },
 115                     'text-anchor': 'middle'
 116                 },
 117                 markerConfig: {
 118                     radius: 5,
 119                     size: 5
 120                 }
 121             },{
 122                 type: 'line',
 123                 axis: 'left',
 124                 xField: 'date',
 125                 yField: 'views',
 126                 label: {
 127                     display: 'none',
 128                     field: 'visits',
 129                     renderer: function(v) { return v >> 0; },
 130                     'text-anchor': 'middle'
 131                 },
 132                 markerConfig: {
 133                     radius: 5,
 134                     size: 5
 135                 }
 136             },{
 137                 type: 'line',
 138                 axis: 'left',
 139                 xField: 'date',
 140                 yField: 'veins',
 141                 label: {
 142                     display: 'none',
 143                     field: 'visits',
 144                     renderer: function(v) { return v >> 0; },
 145                     'text-anchor': 'middle'
 146                 },
 147                 markerConfig: {
 148                     radius: 5,
 149                     size: 5
 150                 }
 151             }]
 152         }]
 153     }).show();
 154     chart = Ext.getCmp('chartCmp');
 155     var timeAxis = chart.axes.get(1);
 156 });