Hierarchical donut with highcharts
Hierarchical donut with highcharts,
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="periodo" style="width: 600px; height: 400px; margin: 0 auto"></div>
JavaScript
$(document).ready(function() {
//var colors = Highcharts.getOptions().colors;
var colors = [ "#94d228", "#7da8d4", "#7dd4b6", "#e62646" ];
var categorias = ["Serv. Datos","Serv. Valor Agregado","Serv. Varios","Serv. Voz"];
var series = [{"y":327.64999999999997726,"color":"colors[0]","drilldown":{"name":"Serv. Datos","color":"colors[0]","categories":["PAQUETE ROAMING"],"data":[327.64999999999997726]}},{"y":721.60000000000002274,"color":"colors[1]","drilldown":{"name":"Serv. Valor Agregado","color":"colors[1]","categories":["CONEXI\u00d3N GPRS","AJUSTES MENSAJES SMS","MENSAJES A OTROS OPERADORES","MENSAJE MULTIMEDIA","MENSAJES PREMIUM"],"data":[684.30999999999994543,14.449999999999999289,12.160000000000000142,8.9499999999999992895,1.7299999999999999822]}},{"y":172.40999999999999659,"color":"colors[2]","drilldown":{"name":"Serv. Varios","color":"colors[2]","categories":["FIANZA ANUAL"],"data":[172.40999999999999659]}},{"y":587,"color":"colors[3]","drilldown":{"name":"Serv. Voz","color":"colors[3]","categories":["PLAN A LA CARTA NACIONAL","SERV. VOZ","TA INTERNAC"],"data":[412,150,25]}}];
var periodo = '"2014-SEP"';
var selector = '#periodo';
var browserData = [],
versionsData = [],
i,
j,
dataLen = series.length,
data,
drillDataLen,
categories,
brightness;
categories = categorias;
data = series;
// Build the data arrays
for (i = 0; i < dataLen; i += 1) {
// serie dona interna
browserData.push({
name: categories[i],
y: data[i].y,
color: colors[i]
});
// serie dona externa
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(colors[i]).brighten(brightness).get()
});
}
}
// Inicializamos la...