Scott Main | 50e990c | 2012-06-21 17:14:39 -0700 | [diff] [blame] | 1 | page.title=Dashboards |
Dirk Dougherty | 3506ac8 | 2014-02-21 11:15:52 -0800 | [diff] [blame] | 2 | page.metaDescription=page.metaDescription=Charts that give you an overview of device characteristics and platform versions that are active in the Android ecosystem. |
| 3 | page.tags="android, dashboard, platforms, versions" |
| 4 | meta.tags="ecosystem, versions, whatsnew" |
Scott Main | 50e990c | 2012-06-21 17:14:39 -0700 | [diff] [blame] | 5 | @jd:body |
| 6 | |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 7 | <style> |
| 8 | div.chart, |
| 9 | div.screens-chart { |
| 10 | display:none; |
| 11 | } |
| 12 | tr .total { |
| 13 | background-color:transparent; |
| 14 | border:0; |
| 15 | color:#666; |
| 16 | } |
| 17 | tr th.total { |
| 18 | font-weight:bold; |
| 19 | } |
| 20 | </style> |
| 21 | |
| 22 | |
| 23 | |
| 24 | |
| 25 | <div class="sidebox"> |
| 26 | <h2>Google Play Install Stats</h2> |
| 27 | <p>The Google Play Developer Console also provides <a |
Dirk Dougherty | 3506ac8 | 2014-02-21 11:15:52 -0800 | [diff] [blame] | 28 | href="{@docRoot}distribute/googleplay/developer-console.html#app-stats">detailed statistics</a> |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 29 | about your users' devices. Those stats may help you prioritize the device profiles for which |
| 30 | you optimize your app.</p> |
| 31 | </div> |
| 32 | |
| 33 | <p>This page provides information about the relative number of devices that share a certain |
| 34 | characteristic, such as Android version or screen size. This information may |
| 35 | help you prioritize efforts for <a |
Scott Main | 847480c | 2013-09-03 18:01:31 -0700 | [diff] [blame] | 36 | href="{@docRoot}training/basics/supporting-devices/index.html">supporting different devices</a> |
| 37 | by revealing which devices are active in the Android and Google Play ecosystem.</p> |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 38 | |
Scott Main | 847480c | 2013-09-03 18:01:31 -0700 | [diff] [blame] | 39 | <p>This data reflects devices running the latest Google Play Store app, which is compatible |
| 40 | with Android 2.2 and higher. Each snapshot of data represents all the devices that visited the |
| 41 | Google Play Store in the prior 7 days.</p> |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 42 | |
Scott Main | 847480c | 2013-09-03 18:01:31 -0700 | [diff] [blame] | 43 | |
| 44 | <div class="note"> |
| 45 | <p><strong>Note:</strong> Beginning in September, 2013, devices running versions older than Android |
| 46 | 2.2 do not appear in this data because those devices do not support the new Google Play Store |
| 47 | app. Only the new app is able to measure the number of devices that actively visit Google Play Store |
| 48 | and we believe this measurement best reflects your potential user-base.</p> |
| 49 | </div> |
Scott Main | 50e990c | 2012-06-21 17:14:39 -0700 | [diff] [blame] | 50 | |
| 51 | |
| 52 | <h2 id="Platform">Platform Versions</h2> |
| 53 | |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 54 | <p>This section provides data about the relative number of devices running a given version of |
| 55 | the Android platform.</p> |
| 56 | |
| 57 | <p>For information about how to target your application to devices based on |
Scott Main | bf03f39 | 2013-08-01 15:23:19 -0700 | [diff] [blame] | 58 | platform version, read <a |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 59 | href="{@docRoot}training/basics/supporting-devices/platforms.html">Supporting Different |
| 60 | Platform Versions</a>.</p> |
Scott Main | 50e990c | 2012-06-21 17:14:39 -0700 | [diff] [blame] | 61 | |
| 62 | |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 63 | <div id="version-chart"> |
Scott Main | 50e990c | 2012-06-21 17:14:39 -0700 | [diff] [blame] | 64 | </div> |
| 65 | |
Scott Main | 50e990c | 2012-06-21 17:14:39 -0700 | [diff] [blame] | 66 | |
Robert Ly | 52a1816 | 2014-09-09 15:40:50 -0700 | [diff] [blame] | 67 | <p style="clear:both"><em>Data collected during a 7-day period ending on September 9, 2014. |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 68 | <br/>Any versions with less than 0.1% distribution are not shown.</em> |
| 69 | </p> |
Scott Main | 50e990c | 2012-06-21 17:14:39 -0700 | [diff] [blame] | 70 | |
Scott Main | 847480c | 2013-09-03 18:01:31 -0700 | [diff] [blame] | 71 | <p class="note"><strong>Note:</strong> Because this data is gathered from the new Google Play |
| 72 | Store app, which supports Android 2.2 and above, devices running older versions are not included. |
| 73 | However, in August, 2013, versions older than Android 2.2 accounted for about 1% of devices that |
| 74 | <em>checked in</em> to Google servers (not those that actually visited Google Play Store). |
| 75 | </p> |
Scott Main | 50e990c | 2012-06-21 17:14:39 -0700 | [diff] [blame] | 76 | |
| 77 | |
| 78 | |
| 79 | |
| 80 | |
| 81 | <h2 id="Screens">Screen Sizes and Densities</h2> |
| 82 | |
Scott Main | d46023d | 2012-09-04 20:55:57 -0700 | [diff] [blame] | 83 | |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 84 | <p>This section provides data about the relative number of devices that have a particular |
Scott Main | 50e990c | 2012-06-21 17:14:39 -0700 | [diff] [blame] | 85 | screen configuration, defined by a combination of screen size and density. To simplify the way that |
| 86 | you design your user interfaces for different screen configurations, Android divides the range of |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 87 | actual screen sizes and densities into several buckets as expressed by the table below.</p> |
Scott Main | 50e990c | 2012-06-21 17:14:39 -0700 | [diff] [blame] | 88 | |
| 89 | <p>For information about how you can support multiple screen configurations in your |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 90 | application, read <a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple |
Scott Main | 50e990c | 2012-06-21 17:14:39 -0700 | [diff] [blame] | 91 | Screens</a>.</p> |
| 92 | |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 93 | |
| 94 | <div id="screens-chart"> |
| 95 | </div> |
Scott Main | 50e990c | 2012-06-21 17:14:39 -0700 | [diff] [blame] | 96 | |
| 97 | |
Robert Ly | 52a1816 | 2014-09-09 15:40:50 -0700 | [diff] [blame] | 98 | <p style="clear:both"><em>Data collected during a 7-day period ending on September 9, 2014. |
| 99 | |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 100 | <br/>Any screen configurations with less than 0.1% distribution are not shown.</em></p> |
Scott Main | 50e990c | 2012-06-21 17:14:39 -0700 | [diff] [blame] | 101 | |
| 102 | |
| 103 | |
| 104 | |
| 105 | |
| 106 | |
| 107 | |
| 108 | |
| 109 | <h2 id="OpenGL">Open GL Version</h2> |
| 110 | |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 111 | <p>This section provides data about the relative number of devices that support a particular |
Scott Main | 50e990c | 2012-06-21 17:14:39 -0700 | [diff] [blame] | 112 | version of OpenGL ES. Note that support for one particular version of OpenGL ES also implies |
| 113 | support for any lower version (for example, support for version 2.0 also implies support for |
| 114 | 1.1).</p> |
| 115 | |
Scott Main | d46023d | 2012-09-04 20:55:57 -0700 | [diff] [blame] | 116 | |
| 117 | <img alt="" style="float:right" |
Robert Ly | 52a1816 | 2014-09-09 15:40:50 -0700 | [diff] [blame] | 118 | src="//chart.googleapis.com/chart?chs=400x250&cht=p&chd=t%3A77.5%2C22.5&chf=bg%2Cs%2C00000000&chl=GL%202.0%7CGL%203.0&chco=c4df9b%2C6fad0c" /> |
Scott Main | d46023d | 2012-09-04 20:55:57 -0700 | [diff] [blame] | 119 | |
Scott Main | 50e990c | 2012-06-21 17:14:39 -0700 | [diff] [blame] | 120 | <p>To declare which version of OpenGL ES your application requires, you should use the {@code |
| 121 | android:glEsVersion} attribute of the <a |
| 122 | href="{@docRoot}guide/topics/manifest/uses-feature-element.html">{@code <uses-feature>}</a> |
| 123 | element. You can also use the <a |
| 124 | href="{@docRoot}guide/topics/manifest/supports-gl-texture-element.html">{@code |
| 125 | <supports-gl-texture>}</a> element to declare the GL compression formats that your application |
| 126 | uses.</p> |
| 127 | |
Scott Main | 50e990c | 2012-06-21 17:14:39 -0700 | [diff] [blame] | 128 | |
Scott Main | d46023d | 2012-09-04 20:55:57 -0700 | [diff] [blame] | 129 | <table style="width:350px"> |
Scott Main | 50e990c | 2012-06-21 17:14:39 -0700 | [diff] [blame] | 130 | <tr> |
| 131 | <th scope="col">OpenGL ES Version</th> |
| 132 | <th scope="col">Distribution</th> |
| 133 | </tr> |
| 134 | <tr> |
Robert Ly | 52a1816 | 2014-09-09 15:40:50 -0700 | [diff] [blame] | 135 | <td>2.0</td> |
| 136 | <td>77.5%</td> |
Scott Main | 50e990c | 2012-06-21 17:14:39 -0700 | [diff] [blame] | 137 | </tr> |
| 138 | <tr> |
Robert Ly | 52a1816 | 2014-09-09 15:40:50 -0700 | [diff] [blame] | 139 | <td>3.0</td> |
| 140 | <td>22.5%</td> |
Scott Main | 50e990c | 2012-06-21 17:14:39 -0700 | [diff] [blame] | 141 | </tr> |
| 142 | </table> |
Scott Main | 50e990c | 2012-06-21 17:14:39 -0700 | [diff] [blame] | 143 | |
| 144 | |
Scott Main | d46023d | 2012-09-04 20:55:57 -0700 | [diff] [blame] | 145 | |
Robert Ly | 52a1816 | 2014-09-09 15:40:50 -0700 | [diff] [blame] | 146 | <p style="clear:both"><em>Data collected during a 7-day period ending on September 9, 2014</em></p> |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 147 | |
| 148 | |
| 149 | |
| 150 | |
| 151 | |
| 152 | |
| 153 | |
| 154 | |
| 155 | |
| 156 | |
| 157 | |
| 158 | |
| 159 | |
| 160 | <script> |
| 161 | var VERSION_DATA = |
| 162 | [ |
| 163 | { |
Robert Ly | 52a1816 | 2014-09-09 15:40:50 -0700 | [diff] [blame] | 164 | "chart": "//chart.googleapis.com/chart?chco=c4df9b%2C6fad0c&cht=p&chs=500x250&chl=Froyo%7CGingerbread%7CIce%20Cream%20Sandwich%7CJelly%20Bean%7CKitKat&chd=t%3A0.7%2C11.4%2C9.6%2C53.8%2C24.5&chf=bg%2Cs%2C00000000", |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 165 | "data": [ |
| 166 | { |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 167 | "api": 8, |
| 168 | "name": "Froyo", |
Robert Ly | d815d32 | 2014-07-07 07:55:18 -0700 | [diff] [blame] | 169 | "perc": "0.7" |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 170 | }, |
| 171 | { |
| 172 | "api": 10, |
| 173 | "name": "Gingerbread", |
Robert Ly | 52a1816 | 2014-09-09 15:40:50 -0700 | [diff] [blame] | 174 | "perc": "11.4" |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 175 | }, |
| 176 | { |
| 177 | "api": 15, |
| 178 | "name": "Ice Cream Sandwich", |
Robert Ly | 52a1816 | 2014-09-09 15:40:50 -0700 | [diff] [blame] | 179 | "perc": "9.6" |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 180 | }, |
| 181 | { |
| 182 | "api": 16, |
| 183 | "name": "Jelly Bean", |
Robert Ly | 52a1816 | 2014-09-09 15:40:50 -0700 | [diff] [blame] | 184 | "perc": "25.1" |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 185 | }, |
| 186 | { |
| 187 | "api": 17, |
| 188 | "name": "Jelly Bean", |
Robert Ly | 52a1816 | 2014-09-09 15:40:50 -0700 | [diff] [blame] | 189 | "perc": "20.7" |
Scott Main | f5468f6 | 2013-10-02 16:21:42 -0700 | [diff] [blame] | 190 | }, |
| 191 | { |
| 192 | "api": 18, |
| 193 | "name": "Jelly Bean", |
Robert Ly | 52a1816 | 2014-09-09 15:40:50 -0700 | [diff] [blame] | 194 | "perc": "8.0" |
Scott Main | 65907fd | 2013-12-02 11:38:42 -0800 | [diff] [blame] | 195 | }, |
| 196 | { |
| 197 | "api": 19, |
| 198 | "name": "KitKat", |
Robert Ly | 52a1816 | 2014-09-09 15:40:50 -0700 | [diff] [blame] | 199 | "perc": "24.5" |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 200 | } |
| 201 | ] |
| 202 | } |
| 203 | ]; |
| 204 | |
| 205 | |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 206 | var SCREEN_DATA = |
| 207 | [ |
| 208 | { |
| 209 | "data": { |
| 210 | "Large": { |
Dirk Dougherty | ccc5ca1 | 2014-01-08 15:52:27 -0800 | [diff] [blame] | 211 | "hdpi": "0.6", |
Robert Ly | ba5c49dcd | 2014-08-12 12:26:37 -0700 | [diff] [blame] | 212 | "ldpi": "0.5", |
Robert Ly | 52a1816 | 2014-09-09 15:40:50 -0700 | [diff] [blame] | 213 | "mdpi": "4.3", |
| 214 | "tvdpi": "1.7", |
| 215 | "xhdpi": "0.6" |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 216 | }, |
| 217 | "Normal": { |
Robert Ly | 52a1816 | 2014-09-09 15:40:50 -0700 | [diff] [blame] | 218 | "hdpi": "35.7", |
| 219 | "mdpi": "10.6", |
| 220 | "xhdpi": "19.2", |
| 221 | "xxhdpi": "16.2" |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 222 | }, |
| 223 | "Small": { |
Robert Ly | 52a1816 | 2014-09-09 15:40:50 -0700 | [diff] [blame] | 224 | "ldpi": "6.2" |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 225 | }, |
| 226 | "Xlarge": { |
Scott Main | 749120f | 2014-02-04 10:57:47 -0800 | [diff] [blame] | 227 | "hdpi": "0.3", |
Robert Ly | 52a1816 | 2014-09-09 15:40:50 -0700 | [diff] [blame] | 228 | "mdpi": "3.7", |
Robert Ly | d815d32 | 2014-07-07 07:55:18 -0700 | [diff] [blame] | 229 | "xhdpi": "0.4" |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 230 | } |
| 231 | }, |
Robert Ly | 52a1816 | 2014-09-09 15:40:50 -0700 | [diff] [blame] | 232 | "densitychart": "//chart.googleapis.com/chart?chco=c4df9b%2C6fad0c&cht=p&chs=400x250&chl=ldpi%7Cmdpi%7Ctvdpi%7Chdpi%7Cxhdpi%7Cxxhdpi&chd=t%3A6.7%2C18.6%2C1.7%2C36.6%2C20.2%2C16.2&chf=bg%2Cs%2C00000000", |
| 233 | "layoutchart": "//chart.googleapis.com/chart?chco=c4df9b%2C6fad0c&cht=p&chs=400x250&chl=Xlarge%7CLarge%7CNormal%7CSmall&chd=t%3A4.4%2C7.7%2C81.7%2C6.2&chf=bg%2Cs%2C00000000" |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 234 | } |
| 235 | ]; |
| 236 | |
| 237 | |
| 238 | |
| 239 | var VERSION_NAMES = |
| 240 | [ |
| 241 | {"api":0},{"api":1},{"api":2},{"api":3}, |
Scott Main | bf03f39 | 2013-08-01 15:23:19 -0700 | [diff] [blame] | 242 | { |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 243 | "api":4, |
| 244 | "link":"<a href='/about/versions/android-1.6.html'>1.6</a>", |
| 245 | "codename":"Donut", |
| 246 | }, |
| 247 | { "api":5}, |
| 248 | { "api":6}, |
Scott Main | bf03f39 | 2013-08-01 15:23:19 -0700 | [diff] [blame] | 249 | { |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 250 | "api":7, |
| 251 | "link":"<a href='/about/versions/android-2.1.html'>2.1</a>", |
| 252 | "codename":"Eclair", |
| 253 | }, |
| 254 | { |
| 255 | "api":8, |
| 256 | "link":"<a href='/about/versions/android-2.2.html'>2.2</a>", |
| 257 | "codename":"Froyo" |
| 258 | }, |
| 259 | { |
| 260 | "api":9, |
| 261 | "link":"<a href='/about/versions/android-2.3.html'>2.3 -<br>2.3.2</a>", |
| 262 | "codename":"Gingerbread" |
| 263 | }, |
| 264 | { |
| 265 | "api":10, |
| 266 | "link":"<a href='/about/versions/android-2.3.3.html'>2.3.3 -<br>2.3.7</a>", |
| 267 | "codename":"Gingerbread" |
| 268 | }, |
| 269 | { "api":11}, |
| 270 | { |
| 271 | "api":12, |
| 272 | "link":"<a href='/about/versions/android-3.1.html'>3.1</a>", |
| 273 | "codename":"Honeycomb" |
| 274 | }, |
| 275 | { |
| 276 | "api":13, |
| 277 | "link":"<a href='/about/versions/android-3.2.html'>3.2</a>", |
| 278 | "codename":"Honeycomb" |
| 279 | }, |
| 280 | { "api":14}, |
| 281 | { |
| 282 | "api":15, |
| 283 | "link":"<a href='/about/versions/android-4.0.html'>4.0.3 -<br>4.0.4</a>", |
| 284 | "codename":"Ice Cream Sandwich" |
| 285 | }, |
| 286 | { |
| 287 | "api":16, |
| 288 | "link":"<a href='/about/versions/android-4.1.html'>4.1.x</a>", |
| 289 | "codename":"Jelly Bean" |
| 290 | }, |
| 291 | { |
| 292 | "api":17, |
| 293 | "link":"<a href='/about/versions/android-4.2.html'>4.2.x</a>", |
| 294 | "codename":"Jelly Bean" |
Scott Main | 847480c | 2013-09-03 18:01:31 -0700 | [diff] [blame] | 295 | }, |
| 296 | { |
| 297 | "api":18, |
| 298 | "link":"<a href='/about/versions/android-4.3.html'>4.3</a>", |
| 299 | "codename":"Jelly Bean" |
Scott Main | 65907fd | 2013-12-02 11:38:42 -0800 | [diff] [blame] | 300 | }, |
| 301 | { |
| 302 | "api":19, |
| 303 | "link":"<a href='/about/versions/android-4.4.html'>4.4</a>", |
| 304 | "codename":"KitKat" |
Scott Main | 3cd0b46 | 2013-02-27 17:51:49 -0800 | [diff] [blame] | 305 | } |
| 306 | ]; |
| 307 | |
| 308 | |
| 309 | |
| 310 | |
| 311 | |
| 312 | |
| 313 | |
| 314 | |
| 315 | |
| 316 | |
| 317 | |
| 318 | |
| 319 | |
| 320 | |
| 321 | |
| 322 | |
| 323 | |
| 324 | |
| 325 | |
| 326 | $(document).ready(function(){ |
| 327 | // for each set of data (each month) |
| 328 | $.each(VERSION_DATA, function(i, set) { |
| 329 | |
| 330 | // set up wrapper divs |
| 331 | var $div = $('<div class="chart"' |
| 332 | + ((i == 0) ? ' style="display:block"' : '') |
| 333 | + ' >'); |
| 334 | var $divtable = $('<div class="col-5" style="margin-left:0">'); |
| 335 | var $divchart = $('<div class="col-8" style="margin-right:0">'); |
| 336 | |
| 337 | // set up a new table |
| 338 | var $table = $("<table>"); |
| 339 | var $trh = $("<tr><th>Version</th>" |
| 340 | + "<th>Codename</th>" |
| 341 | + "<th>API</th>" |
| 342 | + "<th>Distribution</th></tr>"); |
| 343 | $table.append($trh); |
| 344 | |
| 345 | // loop each data set (each api level represented in stats) |
| 346 | $.each(set.data, function(i, data) { |
| 347 | // check if we need to rowspan the codename |
| 348 | var rowspan = 1; |
| 349 | // must not be first row |
| 350 | if (i > 0) { |
| 351 | // if this row's codename is the same as previous row codename |
| 352 | if (data.name == set.data[i-1].name) { |
| 353 | rowspan = 0; |
| 354 | // otherwise, as long as this is not the last row |
| 355 | } else if (i < (set.data.length - 1)) { |
| 356 | // increment rowspan for each subsequent row w/ same codename |
| 357 | while (data.name == set.data[i+rowspan].name) { |
| 358 | rowspan++; |
| 359 | // unless we've reached the last row |
| 360 | if ((i + rowspan) >= set.data.length) break; |
| 361 | } |
| 362 | } |
| 363 | } |
| 364 | |
| 365 | // create table row and get corresponding version info from VERSION_NAMES |
| 366 | var $tr = $("<tr>"); |
| 367 | $tr.append("<td>" + VERSION_NAMES[data.api].link + "</td>"); |
| 368 | if (rowspan > 0) { |
| 369 | $tr.append("<td rowspan='" + rowspan + "'>" + VERSION_NAMES[data.api].codename + "</td>"); |
| 370 | } |
| 371 | $tr.append("<td>" + data.api + "</td>"); |
| 372 | $tr.append("<td>" + data.perc + "%</td>"); |
| 373 | $table.append($tr); |
| 374 | }); |
| 375 | |
| 376 | // create chart image |
| 377 | var $chart = $('<img style="margin-left:30px" alt="" src="' + set.chart + '" />'); |
| 378 | |
| 379 | // stack up and insert the elements |
| 380 | $divtable.append($table); |
| 381 | $divchart.append($chart); |
| 382 | $div.append($divtable).append($divchart); |
| 383 | $("#version-chart").append($div); |
| 384 | }); |
| 385 | |
| 386 | |
| 387 | |
| 388 | var SCREEN_SIZES = ["Small","Normal","Large","Xlarge"]; |
| 389 | var SCREEN_DENSITIES = ["ldpi","mdpi","tvdpi","hdpi","xhdpi","xxhdpi"]; |
| 390 | |
| 391 | |
| 392 | // for each set of screens data (each month) |
| 393 | $.each(SCREEN_DATA, function(i, set) { |
| 394 | |
| 395 | // set up wrapper divs |
| 396 | var $div = $('<div class="screens-chart"' |
| 397 | + ((i == 0) ? ' style="display:block"' : '') |
| 398 | + ' >'); |
| 399 | |
| 400 | // set up a new table |
| 401 | var $table = $("<table>"); |
| 402 | var $trh = $("<tr><th></th></tr>"); |
| 403 | $.each(SCREEN_DENSITIES, function(i, density) { |
| 404 | $trh.append("<th scope='col'>" + density + "</th>"); |
| 405 | }); |
| 406 | $trh.append("<th scope='col' class='total'>Total</th>"); |
| 407 | $table.append($trh); |
| 408 | |
| 409 | // array to hold totals for each density |
| 410 | var densityTotals = new Array(SCREEN_DENSITIES.length); |
| 411 | $.each(densityTotals, function(i, total) { |
| 412 | densityTotals[i] = 0; // make them all zero to start |
| 413 | }); |
| 414 | |
| 415 | // loop through each screen size |
| 416 | $.each(SCREEN_SIZES, function(i, size) { |
| 417 | // if there are any devices of this size |
| 418 | if (typeof set.data[size] != "undefined") { |
| 419 | // create table row and insert data |
| 420 | var $tr = $("<tr>"); |
| 421 | $tr.append("<th scope='row'>" + size + "</th>"); |
| 422 | // variable to sum all densities for this size |
| 423 | var total = 0; |
| 424 | // loop through each density |
| 425 | $.each(SCREEN_DENSITIES, function(i, density) { |
| 426 | var num = typeof set.data[size][density] != "undefined" ? set.data[size][density] : 0; |
| 427 | $tr.append("<td>" + (num != 0 ? num + "%" : "") + "</td>"); |
| 428 | total += parseFloat(num); |
| 429 | densityTotals[i] += parseFloat(num); |
| 430 | }) |
| 431 | $tr.append("<td class='total'>" + total.toFixed(1) + "%</td>"); |
| 432 | $table.append($tr); |
| 433 | } |
| 434 | }); |
| 435 | |
| 436 | // create row of totals for each density |
| 437 | var $tr = $("<tr><th class='total'>Total</th></tr>"); |
| 438 | $.each(densityTotals, function(i, total) { |
| 439 | $tr.append("<td class='total'>" + total.toFixed(1) + "%</td>"); |
| 440 | }); |
| 441 | $table.append($tr); |
| 442 | |
| 443 | // create charts |
| 444 | var $sizechart = $('<img style="float:left;width:380px" alt="" src="' |
| 445 | + set.layoutchart + '" />'); |
| 446 | var $densitychart = $('<img style="float:left;width:380px" alt="" src="' |
| 447 | + set.densitychart + '" />'); |
| 448 | |
| 449 | // stack up and insert the elements |
| 450 | $div.append($table).append($sizechart).append($densitychart); |
| 451 | $("#screens-chart").append($div); |
| 452 | }); |
| 453 | |
| 454 | |
| 455 | }); |
| 456 | |
| 457 | |
| 458 | |
| 459 | function changeVersionDate() { |
| 460 | var date = $('#date-versions option:selected').val(); |
| 461 | |
| 462 | $(".chart").hide(); |
| 463 | $(".chart."+date+"").show(); |
| 464 | } |
| 465 | |
| 466 | |
| 467 | function changeScreensVersionDate() { |
| 468 | var date = $('#date-screens option:selected').val(); |
| 469 | |
| 470 | $(".screens-chart").hide(); |
| 471 | $(".screens-chart."+date+"").show(); |
| 472 | } |
| 473 | |
| 474 | </script> |