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         minHeight: 400,
 267         minWidth: 550,
 268         hidden: false,
 269         shadow: false,
 270         maximizable: false,
 271         title: 'What is the trend in Browser Usage?',
 272         renderTo: Ext.getBody(),
 273         layout: 'fit',
 274         items: {
 275             id: 'chartCmp',
 276             xtype: 'chart',
 277             style: 'background:#fff',
 278             animate: true,
 279             theme: 'Browser:gradients',
 280             defaultInsets: 30,
 281             store: browserStore,
 282             legend: {
 283                 position: 'right'
 284             },
 285             axes: [{
 286                 type: 'Numeric',
 287                 position: 'left',
 288                 fields: fields,
 289                 title: 'Usage %',
 290                 grid: true,
 291                 decimals: 0,
 292                 minimum: 0,
 293                 maximum: 100
 294             }, {
 295                 type: 'Category',
 296                 position: 'bottom',
 297                 fields: ['date'],
 298                 title: 'Month of the Year',
 299                 label: {
 300                     renderer: function(v) {
 301                         return v.match(/([0-9]*)\/[0-9]*\/[0-9][0-9]([0-9]*)/).slice(1).join('/');
 302                     }
 303                 }
 304             }],
 305             series: [{
 306                 type: 'area',
 307                 axis: 'left',
 308                 highlight: true,
 309                 tips: {
 310                   trackMouse: true,
 311                   width: 170,
 312                   height: 28,
 313                   renderer: function(storeItem, item) {
 314                       this.setTitle(item.storeField + ' - '
 315                               + Ext.Date.format(new Date(storeItem.get('date')), 'M y')
 316                               + ' - ' + storeItem.get(item.storeField) + '%');
 317                   }
 318                 },
 319                 xField: 'name',
 320                 yField: fields,
 321                 style: {
 322                     lineWidth: 1,
 323                     stroke: '#666',
 324                     opacity: 0.86
 325                 }
 326             }]
 327         }
 328     });
 329 });
 330