examples/charts/LiveAnimated.js

   1 Ext.require('Ext.chart.*');
   2
   3 Ext.onReady(function () {
   4     var chart;
   5     var generateData = (function() {
   6         var data = [], i = 0,
   7             last = false,
   8             date = new Date(2011, 1, 1),
   9             seconds = +date,
  10             min = Math.min,
  11             max = Math.max,
  12             random = Math.random;
  13         return function() {
  14             data = data.slice();
  15             data.push({
  16                 date:  Ext.Date.add(date, Ext.Date.DAY, i++),
  17                 visits: min(100, max(last? last.visits + (random() - 0.5) * 20 : random() * 100, 0)),
  18                 views: min(100, max(last? last.views + (random() - 0.5) * 10 : random() * 100, 0)),
  19                 users: min(100, max(last? last.users + (random() - 0.5) * 20 : random() * 100, 0))
  20             });
  21             last = data[data.length -1];
  22             return data;
  23         };
  24     })();
  25
  26     var group = false,
  27         groupOp = [{
  28             dateFormat: 'M d',
  29             groupBy: 'year,month,day'
  30         }, {
  31             dateFormat: 'M',
  32             groupBy: 'year,month'
  33         }];
  34
  35     function regroup() {
  36         group = !group;
  37         var axis = chart.axes.get(1),
  38             selectedGroup = groupOp[+group];
  39         axis.dateFormat = selectedGroup.dateFormat;
  40         axis.groupBy = selectedGroup.groupBy;
  41         chart.redraw();
  42     }
  43
  44     var store = Ext.create('Ext.data.JsonStore', {
  45         fields: ['date', 'visits', 'views', 'users'],
  46         data: generateData()
  47     });
  48
  49     var intr = setInterval(function() {
  50         var gs = generateData();
  51         var toDate = timeAxis.toDate,
  52             lastDate = gs[gs.length - 1].date,
  53             markerIndex = chart.markerIndex || 0;
  54         if (+toDate < +lastDate) {
  55             markerIndex = 1;
  56             timeAxis.toDate = lastDate;
  57             timeAxis.fromDate = Ext.Date.add(Ext.Date.clone(timeAxis.fromDate), Ext.Date.DAY, 1);
  58             chart.markerIndex = markerIndex;
  59         }
  60         store.loadData(gs);
  61     }, 1000);
  62
  63     Ext.create('Ext.Window', {
  64         width: 800,
  65         height: 600,
  66         hidden: false,
  67         maximizable: true,
  68         title: 'Live Animated Chart',
  69         renderTo: Ext.getBody(),
  70         layout: 'fit',
  71         items: [{
  72             xtype: 'chart',
  73             style: 'background:#fff',
  74             id: 'chartCmp',
  75             store: store,
  76             animate: true,
  77             axes: [{
  78                 type: 'Numeric',
  79                 grid: true,
  80                 minimum: 0,
  81                 maximum: 100,
  82                 position: 'left',
  83                 fields: ['views', 'visits', 'users'],
  84                 title: 'Number of Hits',
  85                 grid: {
  86                     odd: {
  87                         fill: '#dedede',
  88                         stroke: '#ddd',
  89                         'stroke-width': 0.5
  90                     }
  91                 }
  92             }, {
  93                 type: 'Time',
  94                 position: 'bottom',
  95                 fields: 'date',
  96                 title: 'Day',
  97                 dateFormat: 'M d',
  98                 groupBy: 'year,month,day',
  99                 aggregateOp: 'sum',
 100
 101                 constrain: true,
 102                 fromDate: new Date(2011, 1, 1),
 103                 toDate: new Date(2011, 1, 7),
 104                 grid: true
 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: 'users',
 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     });
 154     chart = Ext.getCmp('chartCmp');
 155     var timeAxis = chart.axes.get(1);
 156 });