]>
Commit | Line | Data |
---|---|---|
6527f429 DM |
1 | Ext.define('KitchenSink.view.charts.line.RealTime', {\r |
2 | extend: 'Ext.tab.Panel',\r | |
3 | xtype: 'line-real-time',\r | |
4 | controller: 'line-real-time',\r | |
5 | \r | |
6 | // <example>\r | |
7 | // Content between example tags is omitted from code preview.\r | |
8 | otherContent: [{\r | |
9 | type: 'Controller',\r | |
10 | path: 'classic/samples/view/charts/line/RealTimeController.js'\r | |
11 | }],\r | |
12 | bodyStyle: 'background: transparent !important',\r | |
13 | layout: {\r | |
14 | type: 'vbox',\r | |
15 | pack: 'center'\r | |
16 | },\r | |
17 | // </example>\r | |
18 | \r | |
19 | width: 650,\r | |
20 | \r | |
21 | items: [{\r | |
22 | title: 'Time Axis',\r | |
23 | layout: 'fit',\r | |
24 | items: {\r | |
25 | xtype: 'cartesian',\r | |
26 | reference: 'time-chart',\r | |
27 | insetPadding: '40 40 20 20',\r | |
28 | width: '100%',\r | |
29 | height: 500,\r | |
30 | store: Ext.create('Ext.data.JsonStore', {\r | |
31 | fields: ['yValue', 'metric1', 'metric2']\r | |
32 | }),\r | |
33 | axes: [{\r | |
34 | type: 'numeric',\r | |
35 | minimum: 0,\r | |
36 | maximum: 20,\r | |
37 | grid: true,\r | |
38 | position: 'left',\r | |
39 | title: 'Number of Hits'\r | |
40 | }, {\r | |
41 | type: 'time',\r | |
42 | dateFormat: 'G:i:s',\r | |
43 | segmenter: {\r | |
44 | type: 'time',\r | |
45 | step: {\r | |
46 | unit: Ext.Date.SECOND,\r | |
47 | step: 1\r | |
48 | }\r | |
49 | },\r | |
50 | label: {\r | |
51 | fontSize: 10\r | |
52 | },\r | |
53 | grid: true,\r | |
54 | position: 'bottom',\r | |
55 | title: 'Seconds',\r | |
56 | fields: ['xValue'],\r | |
57 | majorTickSteps: 10\r | |
58 | }],\r | |
59 | series: [{\r | |
60 | type: 'line',\r | |
61 | title: 'Metric 1',\r | |
62 | marker: {\r | |
63 | type: 'cross',\r | |
64 | size: 5\r | |
65 | },\r | |
66 | style: {\r | |
67 | miterLimit: 0\r | |
68 | },\r | |
69 | xField: 'xValue',\r | |
70 | yField: 'metric1'\r | |
71 | }, {\r | |
72 | type: 'line',\r | |
73 | title: 'Metric 2',\r | |
74 | marker: {\r | |
75 | type: 'arrow',\r | |
76 | size: 5\r | |
77 | },\r | |
78 | style: {\r | |
79 | miterLimit: 0\r | |
80 | },\r | |
81 | xField: 'xValue',\r | |
82 | yField: 'metric2'\r | |
83 | }],\r | |
84 | listeners: {\r | |
85 | afterrender: 'onTimeChartRendered',\r | |
86 | destroy: 'onTimeChartDestroy'\r | |
87 | }\r | |
88 | }\r | |
89 | }, {\r | |
90 | title: 'Numeric Axis',\r | |
91 | itemId: 'numeric',\r | |
92 | layout: 'fit',\r | |
93 | items: {\r | |
94 | xtype: 'cartesian',\r | |
95 | reference: 'number-chart',\r | |
96 | insetPadding: '40 40 20 20',\r | |
97 | width: '100%',\r | |
98 | height: 500,\r | |
99 | store: Ext.create('Ext.data.JsonStore', {\r | |
100 | fields: ['yValue', 'xValue']\r | |
101 | }),\r | |
102 | axes: [{\r | |
103 | type: 'numeric',\r | |
104 | minimum: 0,\r | |
105 | maximum: 100,\r | |
106 | grid: true,\r | |
107 | position: 'left',\r | |
108 | title: 'Number of Hits'\r | |
109 | }, {\r | |
110 | type: 'numeric',\r | |
111 | grid: true,\r | |
112 | position: 'bottom',\r | |
113 | title: 'Seconds',\r | |
114 | fields: ['xValue'],\r | |
115 | style: {\r | |
116 | textPadding: 0\r | |
117 | },\r | |
118 | renderer: 'onAxisLabelRender'\r | |
119 | }],\r | |
120 | series: [{\r | |
121 | type: 'line',\r | |
122 | title: 'Values',\r | |
123 | label: {\r | |
124 | display: 'over',\r | |
125 | field: 'yValue'\r | |
126 | },\r | |
127 | marker: {\r | |
128 | radius: 4\r | |
129 | },\r | |
130 | style: {\r | |
131 | lineWidth: 4,\r | |
132 | miterLimit: 0\r | |
133 | },\r | |
134 | xField: 'xValue',\r | |
135 | yField: ['yValue']\r | |
136 | }],\r | |
137 | listeners: {\r | |
138 | afterrender: 'onNumberChartRendered',\r | |
139 | destroy: 'onNumberChartDestroy'\r | |
140 | }\r | |
141 | }\r | |
142 | }],\r | |
143 | \r | |
144 | listeners: {\r | |
145 | tabchange: 'onTabChange'\r | |
146 | }\r | |
147 | \r | |
148 | });\r |