| 1 | <!doctype html> |
|---|
| 2 | <html lang="en"> |
|---|
| 3 | <head> |
|---|
| 4 | <title>PieChart - Animation</title> |
|---|
| 5 | <meta charset="utf-8" /> |
|---|
| 6 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
|---|
| 7 | <meta name="description" content="%description%" /> |
|---|
| 8 | <meta name="keywords" content="" /> |
|---|
| 9 | <meta name="author" content="ComponentOne" /> |
|---|
| 10 | |
|---|
| 11 | <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" /> |
|---|
| 12 | |
|---|
| 13 | <script src="../../external/jquery-1.8.0.min.js" type="text/javascript"></script> |
|---|
| 14 | <script src="../../external/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script> |
|---|
| 15 | <script src="../../external/globalize.min.js" type="text/javascript"></script> |
|---|
| 16 | <script src="../../external/raphael-min.js" type="text/javascript"></script> |
|---|
| 17 | <script src="../../wijmo/jquery.wijmo.raphael.js" type="text/javascript"></script> |
|---|
| 18 | <script src="../../wijmo/jquery.wijmo.wijchartcore.js" type="text/javascript"></script> |
|---|
| 19 | <script src="../../wijmo/jquery.wijmo.wijpiechart.js" type="text/javascript"></script> |
|---|
| 20 | <style type="text/css"> |
|---|
| 21 | #wijpiechart |
|---|
| 22 | { |
|---|
| 23 | width: 756px; |
|---|
| 24 | height: 475px; |
|---|
| 25 | } |
|---|
| 26 | </style> |
|---|
| 27 | <script id="scriptInit" type="text/javascript"> |
|---|
| 28 | $(document).ready(function () { |
|---|
| 29 | var duration = 500; |
|---|
| 30 | var radiusOffset = 10; |
|---|
| 31 | var offset = {}; |
|---|
| 32 | |
|---|
| 33 | $("#wijpiechart").wijpiechart({ |
|---|
| 34 | showChartLabels: false, |
|---|
| 35 | hint: { |
|---|
| 36 | content: function () { |
|---|
| 37 | return this.data.label + " : " + Globalize.format(this.value / this.total, "p2"); |
|---|
| 38 | } |
|---|
| 39 | }, |
|---|
| 40 | header: { |
|---|
| 41 | text: "MMO Subscription Market Share" |
|---|
| 42 | }, |
|---|
| 43 | animation: { |
|---|
| 44 | enabled: false |
|---|
| 45 | }, |
|---|
| 46 | seriesList: [{ |
|---|
| 47 | label: "RuneScape", |
|---|
| 48 | legendEntry: true, |
|---|
| 49 | data: 7.5, |
|---|
| 50 | offset: 0 |
|---|
| 51 | }, { |
|---|
| 52 | label: "Lineage", |
|---|
| 53 | legendEntry: true, |
|---|
| 54 | data: 6.6, |
|---|
| 55 | offset: 0 |
|---|
| 56 | }, { |
|---|
| 57 | label: "Lineage II", |
|---|
| 58 | legendEntry: true, |
|---|
| 59 | data: 6.3, |
|---|
| 60 | offset: 0 |
|---|
| 61 | }, { |
|---|
| 62 | label: "Final Fantasy XI", |
|---|
| 63 | legendEntry: true, |
|---|
| 64 | data: 3.1, |
|---|
| 65 | offset: 0 |
|---|
| 66 | }, { |
|---|
| 67 | label: "Dofus", |
|---|
| 68 | legendEntry: true, |
|---|
| 69 | data: 2.8, |
|---|
| 70 | offset: 0 |
|---|
| 71 | }, { |
|---|
| 72 | label: "EVE Online", |
|---|
| 73 | legendEntry: true, |
|---|
| 74 | data: 1.5, |
|---|
| 75 | offset: 0 |
|---|
| 76 | }, { |
|---|
| 77 | label: "Everquest II", |
|---|
| 78 | legendEntry: true, |
|---|
| 79 | data: 1.2, |
|---|
| 80 | offset: 0 |
|---|
| 81 | }, { |
|---|
| 82 | label: "EverQuest", |
|---|
| 83 | legendEntry: true, |
|---|
| 84 | data: 1.1, |
|---|
| 85 | offset: 0 |
|---|
| 86 | }, { |
|---|
| 87 | label: "Lord of the Rings Online", |
|---|
| 88 | legendEntry: true, |
|---|
| 89 | data: 0.9, |
|---|
| 90 | offset: 0 |
|---|
| 91 | }, { |
|---|
| 92 | label: "City of Heroes / Villains", |
|---|
| 93 | legendEntry: true, |
|---|
| 94 | data: 0.8, |
|---|
| 95 | offset: 0 |
|---|
| 96 | }, { |
|---|
| 97 | label: "Tibia", |
|---|
| 98 | legendEntry: true, |
|---|
| 99 | data: 0.6, |
|---|
| 100 | offset: 0 |
|---|
| 101 | }, { |
|---|
| 102 | label: "All Others", |
|---|
| 103 | legendEntry: true, |
|---|
| 104 | data: 5.4, |
|---|
| 105 | offset: 0 |
|---|
| 106 | }, { |
|---|
| 107 | label: "World of Warcraft", |
|---|
| 108 | legendEntry: true, |
|---|
| 109 | data: 62.2, |
|---|
| 110 | offset: 0 |
|---|
| 111 | }], |
|---|
| 112 | seriesStyles: [{ |
|---|
| 113 | fill: "45-#466a85-#3e5f77", stroke: "#3e5f77", "stroke-width": 1.5 |
|---|
| 114 | }, { |
|---|
| 115 | fill: "45-#525252-#494949", stroke: "#494949", "stroke-width": 1.5 |
|---|
| 116 | }, { |
|---|
| 117 | fill: "45-#555e5e-#4c5454", stroke: "#4c5454", "stroke-width": 1.5 |
|---|
| 118 | }, { |
|---|
| 119 | fill: "45-#333333-#2d2d2d", stroke: "#2d2d2d", "stroke-width": 1.5 |
|---|
| 120 | }, { |
|---|
| 121 | fill: "45-#6aaba7-#5f9996", stroke: "#5f9996", "stroke-width": 1.5 |
|---|
| 122 | }, { |
|---|
| 123 | fill: "45-#a6a6a6-#959595", stroke: "#959595", "stroke-width": 1.5 |
|---|
| 124 | }, { |
|---|
| 125 | fill: "45-#6c8587-#617779", stroke: "#617779", "stroke-width": 1.5 |
|---|
| 126 | }, { |
|---|
| 127 | fill: "45-#c7de7a-#b2c76d", stroke: "#b2c76d", "stroke-width": 1.5 |
|---|
| 128 | }, { |
|---|
| 129 | fill: "45-#8ede43-#7fc73c", stroke: "#7fc73c", "stroke-width": 1.5 |
|---|
| 130 | }, { |
|---|
| 131 | fill: "45-#c3ff00-#afe500", stroke: "#afe500", "stroke-width": 1.5 |
|---|
| 132 | }, { |
|---|
| 133 | fill: "45-#a6a6a6-#959595", stroke: "#959595", "stroke-width": 1.5 |
|---|
| 134 | }, { |
|---|
| 135 | fill: "45-#53b9fc-#4aa6e2", stroke: "#4aa6e2", "stroke-width": 1.5 |
|---|
| 136 | }, { |
|---|
| 137 | fill: "45-#537bfc-#4a6ee2", stroke: "#4a6ee2", "stroke-width": 1.5 |
|---|
| 138 | }] |
|---|
| 139 | }); |
|---|
| 140 | |
|---|
| 141 | $("#wijpiechart").bind("wijpiechartmouseover", function (e, objData) { |
|---|
| 142 | if (objData != null) { |
|---|
| 143 | var animation = $("#selAnimation").val(); |
|---|
| 144 | if (animation == "None") { |
|---|
| 145 | return; |
|---|
| 146 | } |
|---|
| 147 | |
|---|
| 148 | var series = objData; |
|---|
| 149 | var sector = $("#wijpiechart").wijpiechart("getSector", series.index); |
|---|
| 150 | var shadow = sector.shadow; |
|---|
| 151 | var tracker = sector.tracker; |
|---|
| 152 | |
|---|
| 153 | //Scale |
|---|
| 154 | if (animation == "Scale") { |
|---|
| 155 | var center = sector.center; |
|---|
| 156 | sector.animate({ |
|---|
| 157 | transform: Raphael.format("s{0},{1},{2},{3}", 1.1, 1.1, sector.center.x, sector.center.y) |
|---|
| 158 | }, duration, "elastic"); |
|---|
| 159 | |
|---|
| 160 | if (shadow) { |
|---|
| 161 | shadow.animate({ |
|---|
| 162 | transform: Raphael.format("s{0},{1},{2},{3}", 1.1, 1.1, sector.center.x, sector.center.y) |
|---|
| 163 | }, duration, "elastic"); |
|---|
| 164 | } |
|---|
| 165 | if (tracker) { |
|---|
| 166 | tracker.animate({ |
|---|
| 167 | transform: Raphael.format("s{0},{1},{2},{3}", 1.1, 1.1, sector.center.x, sector.center.y) |
|---|
| 168 | }, duration, "elastic"); |
|---|
| 169 | } |
|---|
| 170 | } |
|---|
| 171 | //Explode |
|---|
| 172 | else { |
|---|
| 173 | offset = sector.getOffset(radiusOffset); |
|---|
| 174 | |
|---|
| 175 | sector.animate({ |
|---|
| 176 | translation: offset.x + " " + offset.y |
|---|
| 177 | }, duration, "elastic"); |
|---|
| 178 | |
|---|
| 179 | if (shadow) { |
|---|
| 180 | shadow.animate({ |
|---|
| 181 | translation: offset.x + " " + offset.y |
|---|
| 182 | }, duration, "elastic"); |
|---|
| 183 | } |
|---|
| 184 | if (tracker) { |
|---|
| 185 | tracker.animate({ |
|---|
| 186 | translation: offset.x + " " + offset.y |
|---|
| 187 | }, duration, "elastic"); |
|---|
| 188 | } |
|---|
| 189 | } |
|---|
| 190 | } |
|---|
| 191 | }); |
|---|
| 192 | |
|---|
| 193 | $("#wijpiechart").bind("wijpiechartmouseout", function (e, objData) { |
|---|
| 194 | if (objData != null) { |
|---|
| 195 | var animation = $("#selAnimation").val(); |
|---|
| 196 | |
|---|
| 197 | if (animation == "None") { |
|---|
| 198 | return; |
|---|
| 199 | } |
|---|
| 200 | |
|---|
| 201 | var series = objData; |
|---|
| 202 | var sector = $("#wijpiechart").wijpiechart("getSector", series.index); |
|---|
| 203 | var shadow = sector.shadow; |
|---|
| 204 | var tracker = sector.tracker; |
|---|
| 205 | |
|---|
| 206 | //Scale |
|---|
| 207 | if (animation == "Scale") { |
|---|
| 208 | sector.animate({ |
|---|
| 209 | transform: Raphael.format("s{0},{1},{2},{3}", 1, 1, sector.center.x, sector.center.y) |
|---|
| 210 | }, duration, "elastic"); |
|---|
| 211 | if (shadow) { |
|---|
| 212 | shadow.animate({ |
|---|
| 213 | transform: Raphael.format("s{0},{1},{2},{3}", 1, 1, sector.center.x, sector.center.y) |
|---|
| 214 | }, duration, "elastic"); |
|---|
| 215 | } |
|---|
| 216 | if (tracker) { |
|---|
| 217 | tracker.animate({ |
|---|
| 218 | transform: Raphael.format("s{0},{1},{2},{3}", 1, 1, sector.center.x, sector.center.y) |
|---|
| 219 | }, duration, "elastic"); |
|---|
| 220 | } |
|---|
| 221 | } |
|---|
| 222 | //Explode |
|---|
| 223 | else { |
|---|
| 224 | sector.animate({ |
|---|
| 225 | translation: -offset.x + " " + offset.y * -1 |
|---|
| 226 | }, duration, "elastic"); |
|---|
| 227 | |
|---|
| 228 | if (shadow) { |
|---|
| 229 | shadow.animate({ |
|---|
| 230 | translation: -offset.x + " " + offset.y * -1 |
|---|
| 231 | }, duration, "elastic"); |
|---|
| 232 | } |
|---|
| 233 | if (tracker) { |
|---|
| 234 | tracker.animate({ |
|---|
| 235 | translation: -offset.x + " " + offset.y * -1 |
|---|
| 236 | }, duration, "elastic"); |
|---|
| 237 | } |
|---|
| 238 | offset = { x: 0, y: 0 }; |
|---|
| 239 | } |
|---|
| 240 | } |
|---|
| 241 | }); |
|---|
| 242 | }); |
|---|
| 243 | </script> |
|---|
| 244 | </head> |
|---|
| 245 | <body class="demo-single"> |
|---|
| 246 | <div class="container"> |
|---|
| 247 | <div class="header"> |
|---|
| 248 | <h2> |
|---|
| 249 | Animation</h2> |
|---|
| 250 | </div> |
|---|
| 251 | <div class="main demo"> |
|---|
| 252 | <!-- Begin demo markup --> |
|---|
| 253 | <div id="wijpiechart" class="ui-widget ui-widget-content ui-corner-all"> |
|---|
| 254 | </div> |
|---|
| 255 | <!-- End demo markup --> |
|---|
| 256 | <div class="demo-options"> |
|---|
| 257 | <!-- Begin options markup --> |
|---|
| 258 | <div> |
|---|
| 259 | Animation: |
|---|
| 260 | <select id="selAnimation"> |
|---|
| 261 | <option selected="selected">Scale</option> |
|---|
| 262 | <option>Explode</option> |
|---|
| 263 | <option>None</option> |
|---|
| 264 | </select> |
|---|
| 265 | </div> |
|---|
| 266 | <!-- End options markup --> |
|---|
| 267 | </div> |
|---|
| 268 | </div> |
|---|
| 269 | <div class="footer demo-description"> |
|---|
| 270 | |
|---|
| 271 | <p>This sample demonstrates how to use animation to enhance your pie charts. This example uses the <b>animation</b> and <b>shadow</b> options and the <b>getOffset</b> method to explode and scale the pie chart.</p> |
|---|
| 272 | |
|---|
| 273 | |
|---|
| 274 | </div> |
|---|
| 275 | </div> |
|---|
| 276 | </body> |
|---|
| 277 | </html> |
|---|
