examples/charts/Charts.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.layout.container.Fit');
  17
  18 Ext.onReady(function() {
  19     var panel1 = Ext.create('widget.panel', {
  20         width: 600,
  21         height: 300,
  22         title: 'ExtJS.com Visits Trends, 2007/2008 (No styling)',
  23         renderTo: Ext.getBody(),
  24         layout: 'fit',
  25         items: {
  26             xtype: 'chart',
  27             animate: false,
  28             store: store1,
  29             insetPadding: 30,
  30             axes: [{
  31                 type: 'Numeric',
  32                 minimum: 0,
  33                 position: 'left',
  34                 fields: ['data1'],
  35                 title: false,
  36                 grid: true,
  37                 label: {
  38                     renderer: Ext.util.Format.numberRenderer('0,0'),
  39                     font: '10px Arial'
  40                 }
  41             }, {
  42                 type: 'Category',
  43                 position: 'bottom',
  44                 fields: ['name'],
  45                 title: false,
  46                 label: {
  47                     font: '11px Arial',
  48                     renderer: function(name) {
  49                         return name.substr(0, 3) + ' 07';
  50                     }
  51                 }
  52             }],
  53             series: [{
  54                 type: 'line',
  55                 axis: 'left',
  56                 xField: 'name',
  57                 yField: 'data1',
  58                 listeners: {
  59                   itemmouseup: function(item) {
  60                       Ext.example.msg('Item Selected', item.value[1] + ' visits on ' + Ext.Date.monthNames[item.value[0]]);
  61                   }
  62                 },
  63                 tips: {
  64                     trackMouse: true,
  65                     width: 80,
  66                     height: 40,
  67                     renderer: function(storeItem, item) {
  68                         this.setTitle(storeItem.get('name') + '<br />' + storeItem.get('data1'));
  69                     }
  70                 },
  71                 style: {
  72                     fill: '#38B8BF',
  73                     stroke: '#38B8BF',
  74                     'stroke-width': 3
  75                 },
  76                 markerConfig: {
  77                     type: 'circle',
  78                     size: 4,
  79                     radius: 4,
  80                     'stroke-width': 0,
  81                     fill: '#38B8BF',
  82                     stroke: '#38B8BF'
  83                 }
  84             }]
  85         }
  86     });
  87
  88     var panel2 = Ext.create('widget.panel', {
  89         width: 600,
  90         height: 300,
  91         title: 'ExtJS.com Visits Trends, 2007/2008 (Simple styling)',
  92         renderTo: Ext.getBody(),
  93         layout: 'fit',
  94         items: {
  95             xtype: 'chart',
  96             animate: false,
  97             store: store1,
  98             insetPadding: 30,
  99             axes: [{
 100                 type: 'Numeric',
 101                 minimum: 0,
 102                 position: 'left',
 103                 fields: ['data1'],
 104                 title: false,
 105                 grid: true,
 106                 label: {
 107                     renderer: Ext.util.Format.numberRenderer('0,0'),
 108                     font: '10px Arial'
 109                 }
 110             }, {
 111                 type: 'Category',
 112                 position: 'bottom',
 113                 fields: ['name'],
 114                 title: false,
 115                 label: {
 116                     font: '11px Arial',
 117                     renderer: function(name) {
 118                         return name.substr(0, 3);
 119                     }
 120                 }
 121             }],
 122             series: [{
 123                 type: 'line',
 124                 axis: 'left',
 125                 xField: 'name',
 126                 yField: 'data1',
 127                 tips: {
 128                     trackMouse: true,
 129                     width: 110,
 130                     height: 25,
 131                     renderer: function(storeItem, item) {
 132                         this.setTitle(storeItem.get('data2') + ' visits in ' + storeItem.get('name').substr(0, 3));
 133                     }
 134                 },
 135                 style: {
 136                     fill: '#38B8BF',
 137                     stroke: '#38B8BF',
 138                     'stroke-width': 3
 139                 },
 140                 markerConfig: {
 141                     type: 'circle',
 142                     size: 4,
 143                     radius: 4,
 144                     'stroke-width': 0,
 145                     fill: '#38B8BF',
 146                     stroke: '#38B8BF'
 147                 }
 148             }]
 149         }
 150     });
 151
 152     var panel3 = Ext.create('widget.panel', {
 153         width: 600,
 154         height: 300,
 155         title: 'ExtJS.com Visits Trends, 2007/2008 (Full styling)',
 156         renderTo: Ext.getBody(),
 157         layout: 'fit',
 158         items: {
 159             xtype: 'chart',
 160             animate: false,
 161             store: store1,
 162             insetPadding: 30,
 163             gradients: [{
 164               angle: 90,
 165               id: 'bar-gradient',
 166               stops: {
 167                   0: {
 168                       color: '#99BBE8'
 169                   },
 170                   70: {
 171                       color: '#77AECE'
 172                   },
 173                   100: {
 174                       color: '#77AECE'
 175                   }
 176               }
 177             }],
 178             axes: [{
 179                 type: 'Numeric',
 180                 minimum: 0,
 181                 maximum: 100,
 182                 position: 'left',
 183                 fields: ['data1'],
 184                 title: false,
 185                 grid: true,
 186                 label: {
 187                     renderer: Ext.util.Format.numberRenderer('0,0'),
 188                     font: '10px Arial'
 189                 }
 190             }, {
 191                 type: 'Category',
 192                 position: 'bottom',
 193                 fields: ['name'],
 194                 title: false,
 195                 grid: true,
 196                 label: {
 197                     font: '11px Arial',
 198                     renderer: function(name) {
 199                         return name.substr(0, 3);
 200                     }
 201                 }
 202             }],
 203             series: [{
 204                 type: 'column',
 205                 axis: 'left',
 206                 xField: 'name',
 207                 yField: 'data1',
 208                 style: {
 209                     fill: 'url(#bar-gradient)',
 210                     'stroke-width': 3
 211                 },
 212                 markerConfig: {
 213                     type: 'circle',
 214                     size: 4,
 215                     radius: 4,
 216                     'stroke-width': 0,
 217                     fill: '#38B8BF',
 218                     stroke: '#38B8BF'
 219                 }
 220             }, {
 221                 type: 'line',
 222                 axis: 'left',
 223                 xField: 'name',
 224                 yField: 'data2',
 225                 tips: {
 226                     trackMouse: true,
 227                     width: 110,
 228                     height: 25,
 229                     renderer: function(storeItem, item) {
 230                         this.setTitle(storeItem.get('data2') + ' visits in ' + storeItem.get('name').substr(0, 3));
 231                     }
 232                 },
 233                 style: {
 234                     fill: '#18428E',
 235                     stroke: '#18428E',
 236                     'stroke-width': 3
 237                 },
 238                 markerConfig: {
 239                     type: 'circle',
 240                     size: 4,
 241                     radius: 4,
 242                     'stroke-width': 0,
 243                     fill: '#18428E',
 244                     stroke: '#18428E'
 245                 }
 246             }]
 247         }
 248     });
 249 });