examples/charts/AreaBrowserStats.js

   1 Ext.require('Ext.chart.*');
   2 Ext.require('Ext.data.*');
   3 Ext.require('Ext.Window');
   4 Ext.require('Ext.layout.container.Fit');
   5 Ext.require('Ext.fx.target.Sprite');
   6
   7 var jsonData = [
   8     {
   9         date: '1/1/2009',
  10         IE: 44.8,
  11         Firefox: 45.5,
  12         Chrome: 3.9,
  13         Safari: 3,
  14         Opera: 2.3,
  15         Other: 0.5
  16     },
  17     {
  18         date: '2/1/2009',
  19         IE: 43.6,
  20         Firefox: 46.4,
  21         Chrome: 4,
  22         Safari: 3,
  23         Opera: 2.2,
  24         Other: 0.8
  25     },
  26     {
  27         date: '3/1/2009',
  28         IE: 43.3,
  29         Firefox: 46.5,
  30         Chrome: 4.2,
  31         Safari: 3.1,
  32         Opera: 2.3,
  33         Other: 0.6
  34     },
  35     {
  36         date: '4/1/2009',
  37         IE: 42.1,
  38         Firefox: 47.1,
  39         Chrome: 4.9,
  40         Safari: 3,
  41         Opera: 2.2,
  42         Other: 0.7
  43     },
  44     {
  45         date: '5/1/2009',
  46         IE: 41,
  47         Firefox: 47.7,
  48         Chrome: 5.5,
  49         Safari: 3,
  50         Opera: 2.2,
  51         Other: 0.6
  52     },
  53     {
  54         date: '6/1/2009',
  55         IE: 40.7,
  56         Firefox: 47.3,
  57         Chrome: 6,
  58         Safari: 3.1,
  59         Opera: 2.1,
  60         Other: 0.8
  61     },
  62     {
  63         date: '7/1/2009',
  64         IE: 39.4,
  65         Firefox: 47.9,
  66         Chrome: 6.5,
  67         Safari: 3.3,
  68         Opera: 2.1,
  69         Other: 0.8
  70     },
  71     {
  72         date: '8/1/2009',
  73         IE: 39.3,
  74         Firefox: 47.4,
  75         Chrome: 7,
  76         Safari: 3.3,
  77         Opera: 2.1,
  78         Other: 0.9
  79     },
  80     {
  81         date: '9/1/2009',
  82         IE: 39.6,
  83         Firefox: 46.6,
  84         Chrome: 7.1,
  85         Safari: 3.6,
  86         Opera: 2.2,
  87         Other: 0.9
  88     },
  89     {
  90         date: '10/1/2009',
  91         IE: 37.5,
  92         Firefox: 47.5,
  93         Chrome: 8,
  94         Safari: 3.8,
  95         Opera: 2.3,
  96         Other: 0.9
  97     },
  98     {
  99         date: '11/1/2009',
 100         IE: 37.7,
 101         Firefox: 47,
 102         Chrome: 8.5,
 103         Safari: 3.8,
 104         Opera: 2.3,
 105         Other: 0.7
 106     },
 107     {
 108         date: '12/1/2009',
 109         IE: 37.2,
 110         Firefox: 46.4,
 111         Chrome: 9.8,
 112         Safari: 3.6,
 113         Opera: 2.3,
 114         Other: 0.7
 115     },
 116     {
 117         date: '1/1/2010',
 118         IE: 36.2,
 119         Firefox: 46.3,
 120         Chrome: 10.8,
 121         Safari: 3.7,
 122         Opera: 2.2,
 123         Other: 0.8
 124     },
 125     {
 126         date: '2/1/2010',
 127         IE: 35.3,
 128         Firefox: 46.5,
 129         Chrome: 11.6,
 130         Safari: 3.8,
 131         Opera: 2.1,
 132         Other: 0.7
 133     },
 134     {
 135         date: '3/1/2010',
 136         IE: 34.9,
 137         Firefox: 46.2,
 138         Chrome: 12.3,
 139         Safari: 3.7,
 140         Opera: 2.2,
 141         Other: 0.7
 142     },
 143     {
 144         date: '4/1/2010',
 145         IE: 33.4,
 146         Firefox: 46.4,
 147         Chrome: 13.6,
 148         Safari: 3.7,
 149         Opera: 2.2,
 150         Other: 0.7
 151     },
 152     {
 153         date: '5/1/2010',
 154         IE: 32.2,
 155         Firefox: 46.9,
 156         Chrome: 14.5,
 157         Safari: 3.5,
 158         Opera: 2.2,
 159         Other: 0.7
 160     },
 161     {
 162         date: '6/1/2010',
 163         IE: 31,
 164         Firefox: 46.6,
 165         Chrome: 15.9,
 166         Safari: 3.6,
 167         Opera: 2.1,
 168         Other: 0.8
 169     },
 170     {
 171         date: '7/1/2010',
 172         IE: 30.4,
 173         Firefox: 46.4,
 174         Chrome: 16.7,
 175         Safari: 3.4,
 176         Opera: 2.3,
 177         Other: 0.8
 178     },
 179     {
 180         date: '8/1/2010',
 181         IE: 30.7,
 182         Firefox: 45.8,
 183         Chrome: 17,
 184         Safari: 3.5,
 185         Opera: 2.3,
 186         Other: 0.7
 187     },
 188     {
 189         date: '9/1/2010',
 190         IE: 31.1,
 191         Firefox: 45.1,
 192         Chrome: 17.3,
 193         Safari: 3.7,
 194         Opera: 2.2,
 195         Other: 0.6
 196     },
 197     {
 198         date: '10/1/2010',
 199         IE: 29.7,
 200         Firefox: 44.1,
 201         Chrome: 19.2,
 202         Safari: 3.9,
 203         Opera: 2.2,
 204         Other: 0.9
 205     },
 206     {
 207         date: '11/1/2010',
 208         IE: 28.6,
 209         Firefox: 44,
 210         Chrome: 20.5,
 211         Safari: 4.0,
 212         Opera: 2.3,
 213         Other: 0.6
 214     },
 215     {
 216         date: '12/1/2010',
 217         IE: 27.5,
 218         Firefox: 43.5,
 219         Chrome: 22.4,
 220         Safari: 3.8,
 221         Opera: 2.2,
 222         Other: 0.6
 223     }
 224 ];
 225
 226 Ext.onReady(function () {
 227     var fields = ['IE', 'Chrome', 'Firefox', 'Safari', 'Opera', 'Other'];
 228
 229     var browserStore = Ext.create('Ext.data.JsonStore', {
 230         fields: fields,
 231         data: jsonData
 232     });
 233
 234     var colors = ['rgb(47, 162, 223)',
 235                   'rgb(60, 133, 46)',
 236                   'rgb(234, 102, 17)',
 237                   'rgb(154, 176, 213)',
 238                   'rgb(186, 10, 25)',
 239                   'rgb(40, 40, 40)'];
 240
 241     Ext.chart.theme.Browser = Ext.extend(Ext.chart.theme.Base, {
 242         constructor: function(config) {
 243             Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({
 244                 colors: colors
 245             }, config));
 246         }
 247     });
 248
 249     var win = Ext.create('Ext.Window', {
 250         width: 800,
 251         height: 600,
 252         hidden: false,
 253         shadow: false,
 254         maximizable: false,
 255         title: 'What is the trend in Browser Usage?',
 256         renderTo: Ext.getBody(),
 257         layout: 'fit',
 258         items: {
 259             id: 'chartCmp',
 260             xtype: 'chart',
 261             style: 'background:#fff',
 262             animate: true,
 263             theme: 'Browser:gradients',
 264             defaultInsets: 30,
 265             store: browserStore,
 266             legend: {
 267                 position: 'right'
 268             },
 269             axes: [{
 270                 type: 'Numeric',
 271                 position: 'left',
 272                 fields: fields,
 273                 title: 'Usage %',
 274                 grid: true,
 275                 decimals: 0,
 276                 minimum: 0,
 277                 maximum: 100
 278             }, {
 279                 type: 'Category',
 280                 position: 'bottom',
 281                 fields: ['date'],
 282                 title: 'Month of the Year',
 283                 label: {
 284                     renderer: function(v) {
 285                         return v.match(/([0-9]*)\/[0-9]*\/[0-9][0-9]([0-9]*)/).slice(1).join('/');
 286                     }
 287                 }
 288             }],
 289             series: [{
 290                 type: 'area',
 291                 axis: 'left',
 292                 highlight: true,
 293                 tips: {
 294                   trackMouse: true,
 295                   width: 170,
 296                   height: 28,
 297                   renderer: function(storeItem, item) {
 298                       this.setTitle(item.storeField + ' - '
 299                               + Ext.Date.format(new Date(storeItem.get('date')), 'M y')
 300                               + ' - ' + storeItem.get(item.storeField) + '%');
 301                   }
 302                 },
 303                 xField: 'name',
 304                 yField: fields,
 305                 style: {
 306                     lineWidth: 1,
 307                     stroke: '#666',
 308                     opacity: 0.86
 309                 }
 310             }]
 311         }
 312     });
 313 });