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         maximizable: true,
  85         title: 'Live Updated Chart',
  86         layout: 'fit',
  87         items: [{
  88             xtype: 'chart',
  89             style: 'background:#fff',
  90             store: store,
  91             id: 'chartCmp',
  92             axes: [{
  93                 type: 'Numeric',
  94                 grid: true,
  95                 minimum: 0,
  96                 maximum: 100,
  97                 position: 'left',
  98                 fields: ['views', 'visits', 'veins'],
  99                 title: 'Number of Hits',
 100                 grid: {
 101                     odd: {
 102                         fill: '#dedede',
 103                         stroke: '#ddd',
 104                         'stroke-width': 0.5
 105                     }
 106                 }
 107             }, {
 108                 type: 'Time',
 109                 position: 'bottom',
 110                 fields: 'date',
 111                 title: 'Day',
 112                 dateFormat: 'M d',
 113                 groupBy: 'year,month,day',
 114                 aggregateOp: 'sum',
 115
 116                 constrain: true,
 117                 fromDate: new Date(2011, 1, 1),
 118                 toDate: new Date(2011, 1, 7)
 119             }],
 120             series: [{
 121                 type: 'line',
 122                 axis: 'left',
 123                 xField: 'date',
 124                 yField: 'visits',
 125                 label: {
 126                     display: 'none',
 127                     field: 'visits',
 128                     renderer: function(v) { return v >> 0; },
 129                     'text-anchor': 'middle'
 130                 },
 131                 markerConfig: {
 132                     radius: 5,
 133                     size: 5
 134                 }
 135             },{
 136                 type: 'line',
 137                 axis: 'left',
 138                 xField: 'date',
 139                 yField: 'views',
 140                 label: {
 141                     display: 'none',
 142                     field: 'visits',
 143                     renderer: function(v) { return v >> 0; },
 144                     'text-anchor': 'middle'
 145                 },
 146                 markerConfig: {
 147                     radius: 5,
 148                     size: 5
 149                 }
 150             },{
 151                 type: 'line',
 152                 axis: 'left',
 153                 xField: 'date',
 154                 yField: 'veins',
 155                 label: {
 156                     display: 'none',
 157                     field: 'visits',
 158                     renderer: function(v) { return v >> 0; },
 159                     'text-anchor': 'middle'
 160                 },
 161                 markerConfig: {
 162                     radius: 5,
 163                     size: 5
 164                 }
 165             }]
 166         }]
 167     }).show();
 168     chart = Ext.getCmp('chartCmp');
 169     var timeAxis = chart.axes.get(1);
 170 });
 171