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