CharisKomos (Talk | contribs) |
CharisKomos (Talk | contribs) |
||
Line 2: | Line 2: | ||
<head> | <head> | ||
<script src="https://2015.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> | <script src="https://2015.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> | ||
+ | <script src="https://code.highcharts.com/highcharts.js"></script> | ||
+ | <script src="https://code.highcharts.com/modules/exporting.js"></script> | ||
</head> | </head> | ||
<body> | <body> | ||
+ | <div id="container"></div> | ||
− | |||
<div style='position:absolute; z-index:1000; background-color: #ffffff; margin:150px 0px 0px 300px; width:250px; height:250px; text-align: center;'> | <div style='position:absolute; z-index:1000; background-color: #ffffff; margin:150px 0px 0px 300px; width:250px; height:250px; text-align: center;'> | ||
Line 44: | Line 46: | ||
#math_section{ font-size: 25px; } | #math_section{ font-size: 25px; } | ||
</style> | </style> | ||
+ | |||
+ | <script> | ||
+ | var colors = Highcharts.getOptions().colors, | ||
+ | categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'], | ||
+ | data = [{ | ||
+ | y: 56.33, | ||
+ | color: colors[0], | ||
+ | drilldown: { | ||
+ | name: 'MSIE versions', | ||
+ | categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0', | ||
+ | 'MSIE 10.0', 'MSIE 11.0'], | ||
+ | data: [1.06, 0.5, 17.2, 8.11, 5.33, 24.13], | ||
+ | color: colors[0] | ||
+ | } | ||
+ | }, { | ||
+ | y: 10.38, | ||
+ | color: colors[1], | ||
+ | drilldown: { | ||
+ | name: 'Firefox versions', | ||
+ | categories: ['Firefox v31', 'Firefox v32', 'Firefox v33', | ||
+ | 'Firefox v35', 'Firefox v36', 'Firefox v37', 'Firefox v38'], | ||
+ | data: [0.33, 0.15, 0.22, 1.27, 2.76, 2.32, 2.31, 1.02], | ||
+ | color: colors[1] | ||
+ | } | ||
+ | }, { | ||
+ | y: 24.03, | ||
+ | color: colors[2], | ||
+ | drilldown: { | ||
+ | name: 'Chrome versions', | ||
+ | categories: ['Chrome v30.0', 'Chrome v31.0', 'Chrome v32.0', | ||
+ | 'Chrome v33.0', 'Chrome v34.0', | ||
+ | 'Chrome v35.0', 'Chrome v36.0', 'Chrome v37.0', 'Chrome v38.0', | ||
+ | 'Chrome v39.0', 'Chrome v40.0', 'Chrome v41.0', 'Chrome v42.0', | ||
+ | 'Chrome v43.0'], | ||
+ | data: [0.14, 1.24, 0.55, 0.19, 0.14, 0.85, 2.53, 0.38, 0.6, 2.96, | ||
+ | 5, 4.32, 3.68, 1.45], | ||
+ | color: colors[2] | ||
+ | } | ||
+ | }, { | ||
+ | y: 4.77, | ||
+ | color: colors[3], | ||
+ | drilldown: { | ||
+ | name: 'Safari versions', | ||
+ | categories: ['Safari v5.0', 'Safari v5.1', 'Safari v6.1', | ||
+ | 'Safari v6.2', 'Safari v7.0', 'Safari v7.1', 'Safari v8.0'], | ||
+ | data: [0.3, 0.42, 0.29, 0.17, 0.26, 0.77, 2.56], | ||
+ | color: colors[3] | ||
+ | } | ||
+ | }, { | ||
+ | y: 0.91, | ||
+ | color: colors[4], | ||
+ | drilldown: { | ||
+ | name: 'Opera versions', | ||
+ | categories: ['Opera v12.x', 'Opera v27', 'Opera v28', 'Opera v29'], | ||
+ | data: [0.34, 0.17, 0.24, 0.16], | ||
+ | color: colors[4] | ||
+ | } | ||
+ | }, { | ||
+ | y: 0.2, | ||
+ | color: colors[5], | ||
+ | drilldown: { | ||
+ | name: 'Proprietary or Undetectable', | ||
+ | categories: [], | ||
+ | data: [], | ||
+ | color: colors[5] | ||
+ | } | ||
+ | }], | ||
+ | browserData = [], | ||
+ | versionsData = [], | ||
+ | i, | ||
+ | j, | ||
+ | dataLen = data.length, | ||
+ | drillDataLen, | ||
+ | brightness; | ||
+ | |||
+ | |||
+ | // Build the data arrays | ||
+ | for (i = 0; i < dataLen; i += 1) { | ||
+ | |||
+ | // add browser data | ||
+ | browserData.push({ | ||
+ | name: categories[i], | ||
+ | y: data[i].y, | ||
+ | color: data[i].color | ||
+ | }); | ||
+ | |||
+ | // add version data | ||
+ | drillDataLen = data[i].drilldown.data.length; | ||
+ | for (j = 0; j < drillDataLen; j += 1) { | ||
+ | brightness = 0.2 - (j / drillDataLen) / 5; | ||
+ | versionsData.push({ | ||
+ | name: data[i].drilldown.categories[j], | ||
+ | y: data[i].drilldown.data[j], | ||
+ | color: Highcharts.Color(data[i].color).brighten(brightness).get() | ||
+ | }); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | // Create the chart | ||
+ | Highcharts.chart('container', { | ||
+ | chart: { | ||
+ | renderTo: 'container', | ||
+ | type: 'pie' | ||
+ | }, | ||
+ | title: { | ||
+ | text: 'Browser market share, January, 2015 to May, 2015' | ||
+ | }, | ||
+ | subtitle: { | ||
+ | text: 'Source: <a href="http://netmarketshare.com/">netmarketshare.com</a>' | ||
+ | }, | ||
+ | yAxis: { | ||
+ | title: { | ||
+ | text: 'Total percent market share' | ||
+ | } | ||
+ | }, | ||
+ | plotOptions: { | ||
+ | pie: { | ||
+ | shadow: false, | ||
+ | center: ['50%', '50%'] | ||
+ | } | ||
+ | }, | ||
+ | tooltip: { | ||
+ | valueSuffix: '%' | ||
+ | }, | ||
+ | series: [ { | ||
+ | name: 'Versions', | ||
+ | data: versionsData, | ||
+ | size: '80%', | ||
+ | innerSize: '60%', | ||
+ | dataLabels: { | ||
+ | formatter: function () { | ||
+ | // display only if larger than 1 | ||
+ | return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + | ||
+ | this.y + '%' : null; | ||
+ | } | ||
+ | }, | ||
+ | id: 'versions' | ||
+ | }], | ||
+ | responsive: { | ||
+ | rules: [{ | ||
+ | condition: { | ||
+ | maxWidth: 400 | ||
+ | }, | ||
+ | chartOptions: { | ||
+ | series: [{ | ||
+ | id: 'versions', | ||
+ | dataLabels: { | ||
+ | enabled: false | ||
+ | } | ||
+ | }] | ||
+ | } | ||
+ | }] | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | |||
+ | </script> | ||
+ | |||
<script> | <script> |
Revision as of 01:14, 16 September 2017