Tengo un Problema para la graficar los datos en una grafica de pastel de highcharts, el problema es que no logro poder graficarlo conforme a su color, estoy usando una API, ya pude realizarlo con la gráfica de barras ahora quiero realizarlo con la gráfica de pastel, ya pude realizar pero tengo errores con en el color, no se gráfica con el color que tiene cada usuario.
//variables
var personajes = [];
var votos = [];
//init
function init() {
console.log('Reading value voto...');
//request
var x = new XMLHttpRequest();
//prepare request
x.open('GET', 'http://cisatj.com/starwars/apis/getvotos?token=' + new Date().getDate(), true);
//enviar
x.send();
//handle readyState change event
x.onreadystatechange = function() {
//check status
//status 200=ok, 404=page not found, 500=access denied
//readyState 4=back with data
if (x.readyState == 4 && x.status == 200) {
var JSONdata = JSON.parse(x.responseText);
if (JSONdata.status == 0) {
votos = JSONdata.votos;
console.log(votos);
//readings
//setInterval('getReadings()', 5000); //5000 milliseconds lo lee seguido
//lo lee solo una vez
getVotos();
}
}
}
}
function getVotos() {
console.log('Readings...');
//request
var x = new XMLHttpRequest();
//prepare request
x.open('GET', 'http://cisatj.com/starwars/apis/getpersonajes.php?token=' + new Date().getDate(), true);
//enviar
x.send();
//handle readyState change event
x.onreadystatechange = function() {
//check status
//status 200=ok, 404=page not found, 500=access denied
//readyState 4=back with data
if (x.readyState == 4 && x.status == 200) {
var JSONdata = JSON.parse(x.responseText);
if (JSONdata.status == 0) {
personajes = JSONdata.personajes;
//draw charts
charts();
}
}
}
}
function charts() {
//average, max, min
console.log('Average, Max and Min values...');
//variables
var sum = 0;
var maxValue = votos[0].votos;
var minValue = votos[0].votos;
//read array
for (var i = 0; i < personajes.length; i++) {
//average
sum += votos[i].votos;
//max
if (votos[i].votos > maxValue) maxValue = votos[i].votos;
//min
if (personajes[i].votos < minValue) minValue = personajes[i].votos;
}
//average
var average = sum / personajes.length;
//display
document.getElementById('average').innerHTML = average.toFixed(1);
document.getElementById('max').innerHTML = maxValue.toFixed(1);
document.getElementById('min').innerHTML = minValue.toFixed(1);
//barchart
console.log('Drawing bar chart');
//values, colors and categories
var categoriesColumns = [];
var valuesColumns = [];
var valuesColumns2 = [];
var colors = [];
var valuesPie = [];
//add counter to value ranges
for (var r = 0; r < votos.length; r++) {
var pieData = {//un objeto de json se esta creando
name : personajes[r].id,
y : 0,
color : personajes[r].color,
}
valuesColumns2.push(pieData);//push se utiliza para agregar elementos
}
//para recorrer los datos y agregando
for(var i = 0; i < votos.length; i++) {
categoriesColumns.push(personajes[i].dateTime);
valuesColumns.push(votos[i].votos);
valuesColumns2.push(votos[i].id);
var color = personajes[i].color;
//var voto = votos[i].votos;// cuando no queda en ningun rango queda en gris
for (var r = 0; r < votos.length; r++) {
//para el color de cada columna
//if (votos[i].votos >= 770 && votos[i].votos <= 2165){
if (votos[i].votos && personajes[i].id){
//color
color = personajes[i].color;
id = personajes[i].votos;
//counter
//valuesPie[r].y++;
//valuesColumns2[r].y++;
}
}
colors.push(color);
}
//column chart
Highcharts.chart('barchart', {
chart: {
type: 'column'
},
title: {
style: { display:'none' }
},
xAxis: {
categories: categoriesColumns, //categorias para poner en numeracion en vez de fecha
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Value'
}
},
plotOptions: {
column: {
pointPadding: 0.02,
borderWidth: 0
},
//animation
series: {
animation:false, //quitar animación
colorByPoint: true, //color por columna individual
colors: colors,
//labels en las columnas
dataLabels:{
enabled:true,
color:'#555',
align:'center',
format:'{point.y:.1f}',
style: {
fontSize:'10pt',
fontFamily: 'arial'
}
}
}
},
series: [{
name: 'Votos',
data: valuesColumns //valores
}]
});
//pie chart
console.log(valuesPie);
Highcharts.chart('piechart', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
style: { display:'none' }
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false //no mostrar labels
},
showInLegend: true //mostrar leyendas
}
},
series: [{
name: 'Votos',//
animation:false,//quitar la animacion
colorByPoint: true,//cada punto tiene su valor
data: valuesColumns2//datos(name,y,color)
}]
});
}
En la gráfica de pastel pude agregar el numero de usuario que son diez, la parte que dice slice son datos que están de mas, cada numero tiene su propio color, quiero graficar los datos del usuario con su respectivo color como la grafica de barra