projects / extjs.git / blame
| Commit | Line | Data |
|---|---|---|
| 6527f429 DM |
1 | /**\r |
| 2 | * This example shows how to create a line chart with images as markers. Line charts allow\r | |
| 3 | * to visualize the evolution of a value over time, or the ratio between any two values.\r | |
| 4 | */\r | |
| 5 | Ext.define('KitchenSink.view.charts.line.ImageMarkers', {\r | |
| 6 | extend: 'Ext.panel.Panel',\r | |
| 7 | xtype: 'line-markers',\r | |
| 8 | controller: 'line-markers',\r | |
| 9 | \r | |
| 10 | requires: [\r | |
| 11 | 'Ext.chart.CartesianChart',\r | |
| 12 | 'Ext.chart.series.Line',\r | |
| 13 | 'Ext.chart.axis.Numeric',\r | |
| 14 | 'Ext.draw.modifier.Highlight',\r | |
| 15 | 'Ext.chart.axis.Time',\r | |
| 16 | 'Ext.chart.interactions.ItemHighlight'\r | |
| 17 | ],\r | |
| 18 | // <example>\r | |
| 19 | // Content between example tags is omitted from code preview.\r | |
| 20 | otherContent: [{\r | |
| 21 | type: 'Controller',\r | |
| 22 | path: 'classic/samples/view/charts/line/ImageMarkersController.js'\r | |
| 23 | }, {\r | |
| 24 | type: 'Store',\r | |
| 25 | path: 'classic/samples/store/Pie.js'\r | |
| 26 | }],\r | |
| 27 | // </example>\r | |
| 28 | \r | |
| 29 | layout: 'fit',\r | |
| 30 | \r | |
| 31 | width: 650,\r | |
| 32 | \r | |
| 33 | tbar: {\r | |
| 34 | reference: 'toolbar',\r | |
| 35 | items: [\r | |
| 36 | '->',\r | |
| 37 | {\r | |
| 38 | text: 'Refresh',\r | |
| 39 | handler: 'onRefresh'\r | |
| 40 | },\r | |
| 41 | {\r | |
| 42 | text: 'Switch Theme',\r | |
| 43 | handler: 'onThemeSwitch'\r | |
| 44 | },\r | |
| 45 | {\r | |
| 46 | text: 'Reset pan/zoom',\r | |
| 47 | handler: 'onPanZoomReset'\r | |
| 48 | }\r | |
| 49 | ]\r | |
| 50 | },\r | |
| 51 | \r | |
| 52 | items: [{\r | |
| 53 | xtype: 'cartesian',\r | |
| 54 | reference: 'chart',\r | |
| 55 | height: 500,\r | |
| 56 | store: {\r | |
| 57 | type: 'pie'\r | |
| 58 | },\r | |
| 59 | interactions: [\r | |
| 60 | 'panzoom',\r | |
| 61 | 'itemhighlight'\r | |
| 62 | ],\r | |
| 63 | legend: {\r | |
| 64 | position: 'bottom'\r | |
| 65 | },\r | |
| 66 | series: [\r | |
| 67 | {\r | |
| 68 | type: 'line',\r | |
| 69 | xField: 'name',\r | |
| 70 | yField: 'g1',\r | |
| 71 | fill: true,\r | |
| 72 | style: {\r | |
| 73 | smooth: true,\r | |
| 74 | miterLimit: 3,\r | |
| 75 | lineCap: 'miter',\r | |
| 76 | strokeOpacity: 1,\r | |
| 77 | fillOpacity: 0.7,\r | |
| 78 | lineWidth: 8\r | |
| 79 | },\r | |
| 80 | title: 'Square',\r | |
| 81 | highlight: {\r | |
| 82 | scale: 0.9\r | |
| 83 | },\r | |
| 84 | marker: {\r | |
| 85 | type: 'image',\r | |
| 86 | src: 'classic/resources/images/square.png',\r | |
| 87 | width: 48,\r | |
| 88 | height: 48,\r | |
| 89 | x: -24,\r | |
| 90 | y: -24,\r | |
| 91 | scale: 0.7,\r | |
| 92 | fx: {\r | |
| 93 | duration: 200\r | |
| 94 | }\r | |
| 95 | }\r | |
| 96 | },\r | |
| 97 | {\r | |
| 98 | type: 'line',\r | |
| 99 | xField: 'name',\r | |
| 100 | yField: 'g2',\r | |
| 101 | style: {\r | |
| 102 | opacity: 0.7,\r | |
| 103 | lineWidth: 8\r | |
| 104 | },\r | |
| 105 | title: 'Circle',\r | |
| 106 | highlight: {\r | |
| 107 | scale: 0.9\r | |
| 108 | },\r | |
| 109 | marker: {\r | |
| 110 | type: 'image',\r | |
| 111 | src: 'classic/resources/images/circle.png',\r | |
| 112 | width: 48,\r | |
| 113 | height: 48,\r | |
| 114 | x: -24,\r | |
| 115 | y: -24,\r | |
| 116 | scale: 0.7,\r | |
| 117 | fx: {\r | |
| 118 | duration: 200\r | |
| 119 | }\r | |
| 120 | }\r | |
| 121 | },\r | |
| 122 | {\r | |
| 123 | type: 'line',\r | |
| 124 | xField: 'name',\r | |
| 125 | yField: 'g3',\r | |
| 126 | style: {\r | |
| 127 | opacity: 0.7,\r | |
| 128 | lineWidth: 8\r | |
| 129 | },\r | |
| 130 | title: 'Pentagon',\r | |
| 131 | highlight: {\r | |
| 132 | scale: 0.9\r | |
| 133 | },\r | |
| 134 | marker: {\r | |
| 135 | type: 'image',\r | |
| 136 | src: 'classic/resources/images/pentagon.png',\r | |
| 137 | width: 48,\r | |
| 138 | height: 48,\r | |
| 139 | x: -24,\r | |
| 140 | y: -24,\r | |
| 141 | scale: 0.7,\r | |
| 142 | fx: {\r | |
| 143 | duration: 200\r | |
| 144 | }\r | |
| 145 | }\r | |
| 146 | }\r | |
| 147 | ],\r | |
| 148 | axes: [\r | |
| 149 | {\r | |
| 150 | type: 'numeric',\r | |
| 151 | position: 'left',\r | |
| 152 | fields: ['g1', 'g2', 'g3'],\r | |
| 153 | minimum: 0,\r | |
| 154 | listeners: {\r | |
| 155 | rangechange: 'onAxisRangeChange'\r | |
| 156 | }\r | |
| 157 | },\r | |
| 158 | {\r | |
| 159 | type: 'category',\r | |
| 160 | position: 'bottom',\r | |
| 161 | visibleRange: [0, 0.75],\r | |
| 162 | fields: 'name'\r | |
| 163 | }\r | |
| 164 | ]\r | |
| 165 | }],\r | |
| 166 | \r | |
| 167 | listeners: {\r | |
| 168 | afterrender: 'onAfterRender'\r | |
| 169 | }\r | |
| 170 | \r | |
| 171 | });\r |