source: trunk/web/addons/job_monarch/lib/extjs-30/examples/chart/charts.js @ 625

Last change on this file since 625 was 625, checked in by ramonb, 15 years ago

lib/extjs-30:

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