--- /dev/null
+<html>\r
+<head>\r
+ <title>The source code</title>\r
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body onload="prettyPrint();">\r
+ <pre class="prettyprint lang-js">Ext.chart.Chart.CHART_URL = '../../resources/charts.swf';\r
+\r
+Ext.onReady(function(){\r
+\r
+ var store = new Ext.data.JsonStore({\r
+ fields:['name', 'visits', 'views'],\r
+ data: [\r
+ {name:'Jul 07', visits: 245000, views: 3000000},\r
+ {name:'Aug 07', visits: 240000, views: 3500000},\r
+ {name:'Sep 07', visits: 355000, views: 4000000},\r
+ {name:'Oct 07', visits: 375000, views: 4200000},\r
+ {name:'Nov 07', visits: 490000, views: 4500000},\r
+ {name:'Dec 07', visits: 495000, views: 5800000},\r
+ {name:'Jan 08', visits: 520000, views: 6000000},\r
+ {name:'Feb 08', visits: 620000, views: 7500000}\r
+ ]\r
+ });\r
+\r
+ // extra extra simple\r
+ new Ext.Panel({\r
+ title: 'ExtJS.com Visits Trend, 2007/2008 (No styling)',\r
+ renderTo: 'container',\r
+ width:500,\r
+ height:300,\r
+ layout:'fit',\r
+\r
+ items: {\r
+ xtype: 'linechart',\r
+ store: store,\r
+ xField: 'name',\r
+ yField: 'visits',\r
+ listeners: {\r
+ itemclick: function(o){\r
+ var rec = store.getAt(o.index);\r
+ Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('name'));\r
+ }\r
+ }\r
+ }\r
+ });\r
+\r
+ // extra simple\r
+ new Ext.Panel({\r
+ iconCls:'chart',\r
+ title: 'ExtJS.com Visits Trend, 2007/2008 (Simple styling)',\r
+ frame:true,\r
+ renderTo: 'container',\r
+ width:500,\r
+ height:300,\r
+ layout:'fit',\r
+\r
+ items: {\r
+ xtype: 'linechart',\r
+ store: store,\r
+ url: '../../resources/charts.swf',\r
+ xField: 'name',\r
+ yField: 'visits',\r
+ yAxis: new Ext.chart.NumericAxis({\r
+ displayName: 'Visits',\r
+ labelRenderer : Ext.util.Format.numberRenderer('0,0')\r
+ }),\r
+ tipRenderer : function(chart, record){\r
+ return Ext.util.Format.number(record.data.visits, '0,0') + ' visits in ' + record.data.name;\r
+ }\r
+ }\r
+ });\r
+\r
+ // more complex with a custom look\r
+ new Ext.Panel({\r
+ iconCls:'chart',\r
+ title: 'ExtJS.com Visits and Pageviews, 2007/2008 (Full styling)',\r
+ frame:true,\r
+ renderTo: 'container',\r
+ width:500,\r
+ height:300,\r
+ layout:'fit',\r
+\r
+ items: {\r
+ xtype: 'columnchart',\r
+ store: store,\r
+ url:'../../resources/charts.swf',\r
+ xField: 'name',\r
+ yAxis: new Ext.chart.NumericAxis({\r
+ displayName: 'Visits',\r
+ labelRenderer : Ext.util.Format.numberRenderer('0,0')\r
+ }),\r
+ tipRenderer : function(chart, record, index, series){\r
+ if(series.yField == 'visits'){\r
+ return Ext.util.Format.number(record.data.visits, '0,0') + ' visits in ' + record.data.name;\r
+ }else{\r
+ return Ext.util.Format.number(record.data.views, '0,0') + ' page views in ' + record.data.name;\r
+ }\r
+ },\r
+ chartStyle: {\r
+ padding: 10,\r
+ animationEnabled: true,\r
+ font: {\r
+ name: 'Tahoma',\r
+ color: 0x444444,\r
+ size: 11\r
+ },\r
+ dataTip: {\r
+ padding: 5,\r
+ border: {\r
+ color: 0x99bbe8,\r
+ size:1\r
+ },\r
+ background: {\r
+ color: 0xDAE7F6,\r
+ alpha: .9\r
+ },\r
+ font: {\r
+ name: 'Tahoma',\r
+ color: 0x15428B,\r
+ size: 10,\r
+ bold: true\r
+ }\r
+ },\r
+ xAxis: {\r
+ color: 0x69aBc8,\r
+ majorTicks: {color: 0x69aBc8, length: 4},\r
+ minorTicks: {color: 0x69aBc8, length: 2},\r
+ majorGridLines: {size: 1, color: 0xeeeeee}\r
+ },\r
+ yAxis: {\r
+ color: 0x69aBc8,\r
+ majorTicks: {color: 0x69aBc8, length: 4},\r
+ minorTicks: {color: 0x69aBc8, length: 2},\r
+ majorGridLines: {size: 1, color: 0xdfe8f6}\r
+ }\r
+ },\r
+ series: [{\r
+ type: 'column',\r
+ displayName: 'Page Views',\r
+ yField: 'views',\r
+ style: {\r
+ image:'bar.gif',\r
+ mode: 'stretch',\r
+ color:0x99BBE8\r
+ }\r
+ },{\r
+ type:'line',\r
+ displayName: 'Visits',\r
+ yField: 'visits',\r
+ style: {\r
+ color: 0x15428B\r
+ }\r
+ }]\r
+ }\r
+ });\r
+});</pre> \r
+</body>\r
+</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff