docs/source/charts.html

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