examples/charts/Charts.js

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