0

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 Grafica

2
  • Saludos, veo tienes ´valuesColumns2.push(votos[i].id);´ previo a ello tienes ´valuesColumns2.push(pieData);´ esto último me parece esta bien; da la impresión que estas agregando más datos y que estos ultimos son interpretados por el HighCharts como mayores en valor; nota que del 1 al 10 son los mismos colores de BarChar los que estas viendo (y son más grandes que los primero se "pierden") son los nombreados Slice.
    – user34391
    Commented el 27 ago. 2017 a las 0:39
  • exacto los nombrados slice tiene los datos (que son votos) como se muestra en el barchar pero no encuentro la mera de poder hacer lo mismo en la gráfica de piechart para que sean los mismo colores que en barchart asi como el numero que es el id
    – Daniel
    Commented el 27 ago. 2017 a las 1:33

1 respuesta 1

1

Prueba lo siguiente:

//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 

    }





//operaciones con arreglos para el examen extra

    //para recorrer los datos y agregando 
    for(var i = 0; i < votos.length; i++) {
        categoriesColumns.push(personajes[i].dateTime);
        valuesColumns.push(votos[i].votos);


        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)
    }]
});
}

Ahora te indico lo que al parecer te falta; en la parte

    //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 

    }

siguiendo tu código debes asignar a y su valor; quedando como sigue:

    //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 : votos[r].votos,
            color : personajes[r].color,

        }
        valuesColumns2.push(pieData);//push se utiliza para agregar elementos 

    }
1
  • Gracias problema resuelto :)
    – Daniel
    Commented el 27 ago. 2017 a las 2:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.