]>
Commit | Line | Data |
---|---|---|
6527f429 DM |
1 | /**\r |
2 | * The Basic Column Chart displays a set of random data in a column series. The "Reload Data"\r | |
3 | * button will randomly generate a new set of data in the store.\r | |
4 | *\r | |
5 | * Tapping or hovering a column will highlight it.\r | |
6 | * Dragging a column will change the underlying data.\r | |
7 | * Try dragging below 65 degrees Fahrenheit.\r | |
8 | */\r | |
9 | Ext.define('KitchenSink.view.charts.column.Basic', {\r | |
10 | extend: 'Ext.Panel',\r | |
11 | xtype: 'column-basic',\r | |
12 | controller: 'column-basic',\r | |
13 | // <example>\r | |
14 | // Content between example tags is omitted from code preview.\r | |
15 | bodyStyle: 'background: transparent !important',\r | |
16 | layout: 'fit',\r | |
17 | otherContent: [{\r | |
18 | type: 'Controller',\r | |
19 | path: 'classic/samples/view/charts/column/BasicController.js'\r | |
20 | }, {\r | |
21 | type: 'Store',\r | |
22 | path: 'classic/samples/store/Climate.js'\r | |
23 | }],\r | |
24 | // </example>\r | |
25 | width: 650,\r | |
26 | height: 500,\r | |
27 | \r | |
28 | tbar: [\r | |
29 | '->',\r | |
30 | {\r | |
31 | text: 'Preview',\r | |
32 | platformConfig: {\r | |
33 | desktop: {\r | |
34 | text: 'Download'\r | |
35 | }\r | |
36 | },\r | |
37 | handler: 'onDownload'\r | |
38 | },\r | |
39 | {\r | |
40 | text: 'Reload Data',\r | |
41 | handler: 'onReloadData'\r | |
42 | }\r | |
43 | ],\r | |
44 | \r | |
45 | items: {\r | |
46 | xtype: 'cartesian',\r | |
47 | reference: 'chart',\r | |
48 | store: {\r | |
49 | type: 'climate'\r | |
50 | },\r | |
51 | insetPadding: {\r | |
52 | top: 40,\r | |
53 | bottom: 40,\r | |
54 | left: 20,\r | |
55 | right: 40\r | |
56 | },\r | |
57 | interactions: {\r | |
58 | type: 'itemedit',\r | |
59 | tooltip: {\r | |
60 | renderer: 'onEditTipRender'\r | |
61 | },\r | |
62 | renderer: 'onColumnEdit'\r | |
63 | },\r | |
64 | axes: [{\r | |
65 | type: 'numeric',\r | |
66 | position: 'left',\r | |
67 | minimum: 30,\r | |
68 | titleMargin: 20,\r | |
69 | title: {\r | |
70 | text: 'Temperature in °F'\r | |
71 | },\r | |
72 | listeners: {\r | |
73 | rangechange: 'onAxisRangeChange'\r | |
74 | }\r | |
75 | }, {\r | |
76 | type: 'category',\r | |
77 | position: 'bottom'\r | |
78 | }],\r | |
79 | animation: Ext.isIE8 ? false : true,\r | |
80 | series: {\r | |
81 | type: 'bar',\r | |
82 | xField: 'month',\r | |
83 | yField: 'highF',\r | |
84 | style: {\r | |
85 | minGapWidth: 20\r | |
86 | },\r | |
87 | highlight: {\r | |
88 | strokeStyle: 'black',\r | |
89 | fillStyle: 'gold'\r | |
90 | },\r | |
91 | label: {\r | |
92 | field: 'highF',\r | |
93 | display: 'insideEnd',\r | |
94 | renderer: 'onSeriesLabelRender'\r | |
95 | }\r | |
96 | },\r | |
97 | sprites: {\r | |
98 | type: 'text',\r | |
99 | text: 'Redwood City Climate Data',\r | |
100 | fontSize: 22,\r | |
101 | width: 100,\r | |
102 | height: 30,\r | |
103 | x: 40, // the sprite x position\r | |
104 | y: 20 // the sprite y position\r | |
105 | },\r | |
106 | listeners: {\r | |
107 | afterrender: 'onAfterRender',\r | |
108 | beginitemedit: 'onBeginItemEdit',\r | |
109 | enditemedit: 'onEndItemEdit'\r | |
110 | }\r | |
111 | }\r | |
112 | \r | |
113 | });\r |