examples/charts/LiveUpdates.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 Ext.require([
  16     'Ext.window.Window',
  17     'Ext.chart.*'
  18 ]);
  19
  20 Ext.onReady(function () {
  21     var chart;
  22     var generateData = (function() {
  23         var data = [], i = 0,
  24             last = false,
  25             date = new Date(2011, 1, 1),
  26             seconds = +date,
  27             min = Math.min,
  28             max = Math.max,
  29             random = Math.random;
  30         return function() {
  31             data = data.slice();
  32             data.push({
  33                 date:  Ext.Date.add(date, Ext.Date.DAY, i++),
  34                 visits: min(100, max(last? last.visits + (random() - 0.5) * 20 : random() * 100, 0)),
  35                 views: min(100, max(last? last.views + (random() - 0.5) * 10 : random() * 100, 0)),
  36                 veins: min(100, max(last? last.veins + (random() - 0.5) * 20 : random() * 100, 0))
  37             });
  38             last = data[data.length -1];
  39             return data;
  40         };
  41     })();
  42
  43     var group = false,
  44         groupOp = [{
  45             dateFormat: 'M d',
  46             groupBy: 'year,month,day'
  47         }, {
  48             dateFormat: 'M',
  49             groupBy: 'year,month'
  50         }];
  51
  52     function regroup() {
  53         group = !group;
  54         var axis = chart.axes.get(1),
  55             selectedGroup = groupOp[+group];
  56         axis.dateFormat = selectedGroup.dateFormat;
  57         axis.groupBy = selectedGroup.groupBy;
  58
  59         chart.redraw();
  60     }
  61
  62     var store = Ext.create('Ext.data.JsonStore', {
  63         fields: ['date', 'visits', 'views', 'veins'],
  64         data: generateData()
  65     });
  66
  67     var intr = setInterval(function() {
  68         var gs = generateData();
  69         var toDate = timeAxis.toDate,
  70             lastDate = gs[gs.length - 1].date,
  71             markerIndex = chart.markerIndex || 0;
  72         if (+toDate < +lastDate) {
  73             markerIndex = 1;
  74             timeAxis.toDate = lastDate;
  75             timeAxis.fromDate = Ext.Date.add(Ext.Date.clone(timeAxis.fromDate), Ext.Date.DAY, 1);
  76             chart.markerIndex = markerIndex;
  77         }
  78         store.loadData(gs);
  79     }, 100);
  80
  81     Ext.create('Ext.Window', {
  82         width: 800,
  83         height: 600,
  84         minHeight: 400,
  85         minWidth: 550,
  86         maximizable: true,
  87         title: 'Live Updated Chart',
  88         layout: 'fit',
  89         items: [{
  90             xtype: 'chart',
  91             style: 'background:#fff',
  92             store: store,
  93             id: 'chartCmp',
  94             axes: [{
  95                 type: 'Numeric',
  96                 grid: true,
  97                 minimum: 0,
  98                 maximum: 100,
  99                 position: 'left',
 100                 fields: ['views', 'visits', 'veins'],
 101                 title: 'Number of Hits',
 102                 grid: {
 103                     odd: {
 104                         fill: '#dedede',
 105                         stroke: '#ddd',
 106                         'stroke-width': 0.5
 107                     }
 108                 }
 109             }, {
 110                 type: 'Time',
 111                 position: 'bottom',
 112                 fields: 'date',
 113                 title: 'Day',
 114                 dateFormat: 'M d',
 115                 groupBy: 'year,month,day',
 116                 aggregateOp: 'sum',
 117
 118                 constrain: true,
 119                 fromDate: new Date(2011, 1, 1),
 120                 toDate: new Date(2011, 1, 7)
 121             }],
 122             series: [{
 123                 type: 'line',
 124                 axis: ['left', 'bottom'],
 125                 xField: 'date',
 126                 yField: 'visits',
 127                 label: {
 128                     display: 'none',
 129                     field: 'visits',
 130                     renderer: function(v) { return v >> 0; },
 131                     'text-anchor': 'middle'
 132                 },
 133                 markerConfig: {
 134                     radius: 5,
 135                     size: 5
 136                 }
 137             },{
 138                 type: 'line',
 139                 axis: ['left', 'bottom'],
 140                 xField: 'date',
 141                 yField: 'views',
 142                 label: {
 143                     display: 'none',
 144                     field: 'visits',
 145                     renderer: function(v) { return v >> 0; },
 146                     'text-anchor': 'middle'
 147                 },
 148                 markerConfig: {
 149                     radius: 5,
 150                     size: 5
 151                 }
 152             },{
 153                 type: 'line',
 154                 axis: ['left', 'bottom'],
 155                 xField: 'date',
 156                 yField: 'veins',
 157                 label: {
 158                     display: 'none',
 159                     field: 'visits',
 160                     renderer: function(v) { return v >> 0; },
 161                     'text-anchor': 'middle'
 162                 },
 163                 markerConfig: {
 164                     radius: 5,
 165                     size: 5
 166                 }
 167             }]
 168         }]
 169     }).show();
 170     chart = Ext.getCmp('chartCmp');
 171     var timeAxis = chart.axes.get(1);
 172 });
 173