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