X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/examples/chart/charts.js

diff --git a/examples/chart/charts.js b/examples/chart/charts.js
new file mode 100644
index 00000000..233fbfd1
--- /dev/null
+++ b/examples/chart/charts.js
@@ -0,0 +1,156 @@
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+Ext.chart.Chart.CHART_URL = '../../resources/charts.swf';
+
+Ext.onReady(function(){
+
+    var store = new Ext.data.JsonStore({
+        fields:['name', 'visits', 'views'],
+        data: [
+            {name:'Jul 07', visits: 245000, views: 3000000},
+            {name:'Aug 07', visits: 240000, views: 3500000},
+            {name:'Sep 07', visits: 355000, views: 4000000},
+            {name:'Oct 07', visits: 375000, views: 4200000},
+            {name:'Nov 07', visits: 490000, views: 4500000},
+            {name:'Dec 07', visits: 495000, views: 5800000},
+            {name:'Jan 08', visits: 520000, views: 6000000},
+            {name:'Feb 08', visits: 620000, views: 7500000}
+        ]
+    });
+
+    // extra extra simple
+    new Ext.Panel({
+        title: 'ExtJS.com Visits Trend, 2007/2008 (No styling)',
+        renderTo: 'container',
+        width:500,
+        height:300,
+        layout:'fit',
+
+        items: {
+            xtype: 'linechart',
+            store: store,
+            xField: 'name',
+            yField: 'visits',
+			listeners: {
+				itemclick: function(o){
+					var rec = store.getAt(o.index);
+					Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('name'));
+				}
+			}
+        }
+    });
+
+    // extra simple
+    new Ext.Panel({
+        iconCls:'chart',
+        title: 'ExtJS.com Visits Trend, 2007/2008 (Simple styling)',
+        frame:true,
+        renderTo: 'container',
+        width:500,
+        height:300,
+        layout:'fit',
+
+        items: {
+            xtype: 'linechart',
+            store: store,
+            url: '../../resources/charts.swf',
+            xField: 'name',
+            yField: 'visits',
+            yAxis: new Ext.chart.NumericAxis({
+                displayName: 'Visits',
+                labelRenderer : Ext.util.Format.numberRenderer('0,0')
+            }),
+            tipRenderer : function(chart, record){
+                return Ext.util.Format.number(record.data.visits, '0,0') + ' visits in ' + record.data.name;
+            }
+        }
+    });
+
+    // more complex with a custom look
+    new Ext.Panel({
+        iconCls:'chart',
+        title: 'ExtJS.com Visits and Pageviews, 2007/2008 (Full styling)',
+        frame:true,
+        renderTo: 'container',
+        width:500,
+        height:300,
+        layout:'fit',
+
+        items: {
+            xtype: 'columnchart',
+            store: store,
+            url:'../../resources/charts.swf',
+            xField: 'name',
+            yAxis: new Ext.chart.NumericAxis({
+                displayName: 'Visits',
+                labelRenderer : Ext.util.Format.numberRenderer('0,0')
+            }),
+            tipRenderer : function(chart, record, index, series){
+                if(series.yField == 'visits'){
+                    return Ext.util.Format.number(record.data.visits, '0,0') + ' visits in ' + record.data.name;
+                }else{
+                    return Ext.util.Format.number(record.data.views, '0,0') + ' page views in ' + record.data.name;
+                }
+            },
+            chartStyle: {
+                padding: 10,
+                animationEnabled: true,
+                font: {
+                    name: 'Tahoma',
+                    color: 0x444444,
+                    size: 11
+                },
+                dataTip: {
+                    padding: 5,
+                    border: {
+                        color: 0x99bbe8,
+                        size:1
+                    },
+                    background: {
+                        color: 0xDAE7F6,
+                        alpha: .9
+                    },
+                    font: {
+                        name: 'Tahoma',
+                        color: 0x15428B,
+                        size: 10,
+                        bold: true
+                    }
+                },
+                xAxis: {
+                    color: 0x69aBc8,
+                    majorTicks: {color: 0x69aBc8, length: 4},
+                    minorTicks: {color: 0x69aBc8, length: 2},
+                    majorGridLines: {size: 1, color: 0xeeeeee}
+                },
+                yAxis: {
+                    color: 0x69aBc8,
+                    majorTicks: {color: 0x69aBc8, length: 4},
+                    minorTicks: {color: 0x69aBc8, length: 2},
+                    majorGridLines: {size: 1, color: 0xdfe8f6}
+                }
+            },
+            series: [{
+                type: 'column',
+                displayName: 'Page Views',
+                yField: 'views',
+                style: {
+                    image:'bar.gif',
+                    mode: 'stretch',
+                    color:0x99BBE8
+                }
+            },{
+                type:'line',
+                displayName: 'Visits',
+                yField: 'visits',
+                style: {
+                    color: 0x15428B
+                }
+            }]
+        }
+    });
+});
\ No newline at end of file