3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
7 Ext.chart.Chart.CHART_URL = '../../resources/charts.swf';
\r
9 Ext.onReady(function(){
\r
11 var store = new Ext.data.JsonStore({
\r
12 fields:['name', 'visits', 'views'],
\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
25 // extra extra simple
\r
27 title: 'ExtJS.com Visits Trend, 2007/2008 (No styling)',
\r
28 renderTo: 'container',
\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
50 title: 'ExtJS.com Visits Trend, 2007/2008 (Simple styling)',
\r
52 renderTo: 'container',
\r
60 url: '../../resources/charts.swf',
\r
63 yAxis: new Ext.chart.NumericAxis({
\r
64 displayName: 'Visits',
\r
65 labelRenderer : Ext.util.Format.numberRenderer('0,0')
\r
67 tipRenderer : function(chart, record){
\r
68 return Ext.util.Format.number(record.data.visits, '0,0') + ' visits in ' + record.data.name;
\r
73 // more complex with a custom look
\r
76 title: 'ExtJS.com Visits and Pageviews, 2007/2008 (Full styling)',
\r
78 renderTo: 'container',
\r
84 xtype: 'columnchart',
\r
86 url:'../../resources/charts.swf',
\r
88 yAxis: new Ext.chart.NumericAxis({
\r
89 displayName: 'Visits',
\r
90 labelRenderer : Ext.util.Format.numberRenderer('0,0')
\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
96 return Ext.util.Format.number(record.data.views, '0,0') + ' page views in ' + record.data.name;
\r
101 animationEnabled: true,
\r
126 majorTicks: {color: 0x69aBc8, length: 4},
\r
127 minorTicks: {color: 0x69aBc8, length: 2},
\r
128 majorGridLines: {size: 1, color: 0xeeeeee}
\r
132 majorTicks: {color: 0x69aBc8, length: 4},
\r
133 minorTicks: {color: 0x69aBc8, length: 2},
\r
134 majorGridLines: {size: 1, color: 0xdfe8f6}
\r
139 displayName: 'Page Views',
\r
148 displayName: 'Visits',
\r