Highcharts Demo
author(s): Torstein Hønsi
by hakan
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>
CSS
#container {
max-width: 660px;
margin: auto;
height: 400px;
margin: 0 auto;
}
JavaScript
var colors = Highcharts.getOptions().colors,
categories = [
"Chrome",
"Firefox",
"Internet Explorer",
"Safari",
"Edge",
"Opera",
"Other"
],
data = [
{
"y": 62.74,
"color": colors[2],
"drilldown": {
"name": "Chrome",
"categories": [
"Redan",
],
"data": [
17618,
]
}
},
{
"y": 10.57,
"color": colors[1],
"drilldown": {
"name": "Firefox",
"categories": [
"Inom 1 vecka",
],
"data": [
45617,
]
}
},
{
"y": 7.23,
"color": colors[0],
"drilldown": {
"name": "Internet Explorer",
"categories": [
"Inom 2 veckor",
],
"data": [
20000,
]
}
},
{
"y": 5.58,
"color": colors[3],
"drilldown": {
"name": "Safari",
"categories": [
{ "name": "Senare",
"antal": "17",
}
],
"data": [
78000,
]
}
},
],
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 /...