examples/chart/charts.js

   1 /*!
   2  * Ext JS Library 3.2.0
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.chart.Chart.CHART_URL = '../../resources/charts.swf';
   8
   9 Ext.onReady(function(){
  10
  11     var store = new Ext.data.JsonStore({
  12         fields:['name', 'visits', 'views'],
  13         data: [
  14             {name:'Jul 07', visits: 245000, views: 3000000},
  15             {name:'Aug 07', visits: 240000, views: 3500000},
  16             {name:'Sep 07', visits: 355000, views: 4000000},
  17             {name:'Oct 07', visits: 375000, views: 4200000},
  18             {name:'Nov 07', visits: 490000, views: 4500000},
  19             {name:'Dec 07', visits: 495000, views: 5800000},
  20             {name:'Jan 08', visits: 520000, views: 6000000},
  21             {name:'Feb 08', visits: 620000, views: 7500000}
  22         ]
  23     });
  24
  25     // extra extra simple
  26     new Ext.Panel({
  27         title: 'ExtJS.com Visits Trend, 2007/2008 (No styling)',
  28         renderTo: 'container',
  29         width:500,
  30         height:300,
  31         layout:'fit',
  32
  33         items: {
  34             xtype: 'linechart',
  35             store: store,
  36             xField: 'name',
  37             yField: 'visits',
  38                         listeners: {
  39                                 itemclick: function(o){
  40                                         var rec = store.getAt(o.index);
  41                                         Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('name'));
  42                                 }
  43                         }
  44         }
  45     });
  46
  47     // extra simple
  48     new Ext.Panel({
  49         iconCls:'chart',
  50         title: 'ExtJS.com Visits Trend, 2007/2008 (Simple styling)',
  51         frame:true,
  52         renderTo: 'container',
  53         width:500,
  54         height:300,
  55         layout:'fit',
  56
  57         items: {
  58             xtype: 'linechart',
  59             store: store,
  60             url: '../../resources/charts.swf',
  61             xField: 'name',
  62             yField: 'visits',
  63             yAxis: new Ext.chart.NumericAxis({
  64                 displayName: 'Visits',
  65                 labelRenderer : Ext.util.Format.numberRenderer('0,0')
  66             }),
  67             tipRenderer : function(chart, record){
  68                 return Ext.util.Format.number(record.data.visits, '0,0') + ' visits in ' + record.data.name;
  69             }
  70         }
  71     });
  72
  73     // more complex with a custom look
  74     new Ext.Panel({
  75         iconCls:'chart',
  76         title: 'ExtJS.com Visits and Pageviews, 2007/2008 (Full styling)',
  77         frame:true,
  78         renderTo: 'container',
  79         width:500,
  80         height:300,
  81         layout:'fit',
  82
  83         items: {
  84             xtype: 'columnchart',
  85             store: store,
  86             url:'../../resources/charts.swf',
  87             xField: 'name',
  88             yAxis: new Ext.chart.NumericAxis({
  89                 displayName: 'Visits',
  90                 labelRenderer : Ext.util.Format.numberRenderer('0,0')
  91             }),
  92             tipRenderer : function(chart, record, index, series){
  93                 if(series.yField == 'visits'){
  94                     return Ext.util.Format.number(record.data.visits, '0,0') + ' visits in ' + record.data.name;
  95                 }else{
  96                     return Ext.util.Format.number(record.data.views, '0,0') + ' page views in ' + record.data.name;
  97                 }
  98             },
  99             chartStyle: {
 100                 padding: 10,
 101                 animationEnabled: true,
 102                 font: {
 103                     name: 'Tahoma',
 104                     color: 0x444444,
 105                     size: 11
 106                 },
 107                 dataTip: {
 108                     padding: 5,
 109                     border: {
 110                         color: 0x99bbe8,
 111                         size:1
 112                     },
 113                     background: {
 114                         color: 0xDAE7F6,
 115                         alpha: .9
 116                     },
 117                     font: {
 118                         name: 'Tahoma',
 119                         color: 0x15428B,
 120                         size: 10,
 121                         bold: true
 122                     }
 123                 },
 124                 xAxis: {
 125                     color: 0x69aBc8,
 126                     majorTicks: {color: 0x69aBc8, length: 4},
 127                     minorTicks: {color: 0x69aBc8, length: 2},
 128                     majorGridLines: {size: 1, color: 0xeeeeee}
 129                 },
 130                 yAxis: {
 131                     color: 0x69aBc8,
 132                     majorTicks: {color: 0x69aBc8, length: 4},
 133                     minorTicks: {color: 0x69aBc8, length: 2},
 134                     majorGridLines: {size: 1, color: 0xdfe8f6}
 135                 }
 136             },
 137             series: [{
 138                 type: 'column',
 139                 displayName: 'Page Views',
 140                 yField: 'views',
 141                 style: {
 142                     image:'bar.gif',
 143                     mode: 'stretch',
 144                     color:0x99BBE8
 145                 }
 146             },{
 147                 type:'line',
 148                 displayName: 'Visits',
 149                 yField: 'visits',
 150                 style: {
 151                     color: 0x15428B
 152                 }
 153             }]
 154         }
 155     });
 156 });