examples/chart/charts.js

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