examples/charts/LiveAnimated.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('Ext.chart.*');
  16
  17 Ext.onReady(function () {
  18     var chart;
  19     var generateData = (function() {
  20         var data = [], i = 0,
  21             last = false,
  22             date = new Date(2011, 1, 1),
  23             seconds = +date,
  24             min = Math.min,
  25             max = Math.max,
  26             random = Math.random;
  27         return function() {
  28             data = data.slice();
  29             data.push({
  30                 date:  Ext.Date.add(date, Ext.Date.DAY, i++),
  31                 visits: min(100, max(last? last.visits + (random() - 0.5) * 20 : random() * 100, 0)),
  32                 views: min(100, max(last? last.views + (random() - 0.5) * 10 : random() * 100, 0)),
  33                 users: min(100, max(last? last.users + (random() - 0.5) * 20 : random() * 100, 0))
  34             });
  35             last = data[data.length -1];
  36             return data;
  37         };
  38     })();
  39
  40     var group = false,
  41         groupOp = [{
  42             dateFormat: 'M d',
  43             groupBy: 'year,month,day'
  44         }, {
  45             dateFormat: 'M',
  46             groupBy: 'year,month'
  47         }];
  48
  49     function regroup() {
  50         group = !group;
  51         var axis = chart.axes.get(1),
  52             selectedGroup = groupOp[+group];
  53         axis.dateFormat = selectedGroup.dateFormat;
  54         axis.groupBy = selectedGroup.groupBy;
  55         chart.redraw();
  56     }
  57
  58     var store = Ext.create('Ext.data.JsonStore', {
  59         fields: ['date', 'visits', 'views', 'users'],
  60         data: generateData()
  61     });
  62
  63     var intr = setInterval(function() {
  64         var gs = generateData();
  65         var toDate = timeAxis.toDate,
  66             lastDate = gs[gs.length - 1].date,
  67             markerIndex = chart.markerIndex || 0;
  68         if (+toDate < +lastDate) {
  69             markerIndex = 1;
  70             timeAxis.toDate = lastDate;
  71             timeAxis.fromDate = Ext.Date.add(Ext.Date.clone(timeAxis.fromDate), Ext.Date.DAY, 1);
  72             chart.markerIndex = markerIndex;
  73         }
  74         store.loadData(gs);
  75     }, 1000);
  76
  77     Ext.create('Ext.Window', {
  78         width: 800,
  79         height: 600,
  80         minHeight: 400,
  81         minWidth: 550,
  82         hidden: false,
  83         maximizable: true,
  84         title: 'Live Animated Chart',
  85         renderTo: Ext.getBody(),
  86         layout: 'fit',
  87         items: [{
  88             xtype: 'chart',
  89             style: 'background:#fff',
  90             id: 'chartCmp',
  91             store: store,
  92             shadow: false,
  93             animate: true,
  94             axes: [{
  95                 type: 'Numeric',
  96                 grid: true,
  97                 minimum: 0,
  98                 maximum: 100,
  99                 position: 'left',
 100                 fields: ['views', 'visits', 'users'],
 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                 grid: true
 122             }],
 123             series: [{
 124                 type: 'line',
 125                 smooth: false,
 126                 axis: ['left', 'bottom'],
 127                 xField: 'date',
 128                 yField: 'visits',
 129                 label: {
 130                     display: 'none',
 131                     field: 'visits',
 132                     renderer: function(v) { return v >> 0; },
 133                     'text-anchor': 'middle'
 134                 },
 135                 markerConfig: {
 136                     radius: 5,
 137                     size: 5
 138                 }
 139             },{
 140                 type: 'line',
 141                 axis: ['left', 'bottom'],
 142                 smooth: false,
 143                 xField: 'date',
 144                 yField: 'views',
 145                 label: {
 146                     display: 'none',
 147                     field: 'visits',
 148                     renderer: function(v) { return v >> 0; },
 149                     'text-anchor': 'middle'
 150                 },
 151                 markerConfig: {
 152                     radius: 5,
 153                     size: 5
 154                 }
 155             },{
 156                 type: 'line',
 157                 axis: ['left', 'bottom'],
 158                 smooth: false,
 159                 xField: 'date',
 160                 yField: 'users',
 161                 label: {
 162                     display: 'none',
 163                     field: 'visits',
 164                     renderer: function(v) { return v >> 0; },
 165                     'text-anchor': 'middle'
 166                 },
 167                 markerConfig: {
 168                     radius: 5,
 169                     size: 5
 170                 }
 171             }]
 172         }]
 173     });
 174     chart = Ext.getCmp('chartCmp');
 175     var timeAxis = chart.axes.get(1);
 176 });
 177