0

Mediante ajax obtengo el dato que quiero mostrar en mi gráfico de la siguiente manera:

$.ajax({
    url: '/grafico/3',
    type: 'GET',
    async: true,
    dataType: "json",
    success: function (data) {
        console.log(data);
        graficoMedia(data);
    }
});

Este data me devuelve lo siguiente:

introducir la descripción de la imagen aquí

Luego, creo mi gráfico solid gauge de la siguiente manera:

function graficoMedia (array) {
$('#chart3').highcharts({
chart: {
    type: 'solidgauge'
},

title: null,

pane: {
    center: ['50%', '85%'],
    size: '140%',
    startAngle: -90,
    endAngle: 90,
    background: {
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
        innerRadius: '60%',
        outerRadius: '100%',
        shape: 'arc'
    }
},

tooltip: {
    enabled: false
},

// the value axis
yAxis: {
    stops: [
        [0.1, '#55BF3B'], // green
        [0.5, '#DDDF0D'], // yellow
        [0.9, '#DF5353'] // red
    ],
    lineWidth: 0,
    minorTickInterval: null,
    tickAmount: 2,
    title: {
        y: -70
    },
    labels: {
        y: 16
    },
    min: 0,
    max: 15,
    title: {
        text: 'Media'
    }
},

plotOptions: {
    solidgauge: {
        dataLabels: {
            y: 5,
            borderWidth: 0,
            useHTML: true
        }
    }
},
credits: {
    enabled: false
},

series: [{
    name: 'Media',
    data: array[0].Media,
    dataLabels: {
        format: '<div style="text-align:center"><span style="font-size:25px;color:' +
            ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
               '<span style="font-size:12px;color:silver">media</span></div>'
    },
    tooltip: {
        valueSuffix: ' Media'
    }
}]
});
}

Pero este no se muestra correctamente:

introducir la descripción de la imagen aquí

Pero sin embargo si cambio mi campo data dentro de series de la siguiente forma:

series: [{
name: 'Media',
data: [4],
dataLabels: {
    format: '<div style="text-align:center"><span style="font-size:25px;color:' +
        ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
           '<span style="font-size:12px;color:silver">media</span></div>'
},
tooltip: {
    valueSuffix: ' Media'
}
}]

Este si que funciona correctamente:

introducir la descripción de la imagen aquí

Gracias de antemano.

2 respuestas 2

1

Para solucionarlo, he modificado la función graficoMedia tal que así:

function graficoMedia (array) {

var media = [];
media.push(parseFloat(array[0].media));

var chart = $('#chart').highcharts({
//merge: 'gaugeOptions',
chart: {
    type: 'solidgauge'
},

title: null,

pane: {
    center: ['50%', '85%'],
    size: '140%',
    startAngle: -90,
    endAngle: 90,
    background: {
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
        innerRadius: '60%',
        outerRadius: '100%',
        shape: 'arc'
    }
},

tooltip: {
    enabled: false
},

// the value axis
yAxis: {
    stops: [
        [0.1, '#55BF3B'], // green
        [0.5, '#DDDF0D'], // yellow
        [0.9, '#DF5353'] // red
    ],
    lineWidth: 0,
    minorTickInterval: null,
    tickAmount: 2,
    title: {
        y: -70
    },
    labels: {
        y: 16
    },
    min: 0,
    max: 15,
    /*title: {
        text: 'Media'
    }*/
},

plotOptions: {
    solidgauge: {
        dataLabels: {
            y: 5,
            borderWidth: 0,
            useHTML: true
        }
    }
},
credits: {
    enabled: false
},

series: [{
    name: 'Media',
    data: media,
    dataLabels: {
        format: '<div style="text-align:center"><span style="font-size:25px;color:' +
            ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
               '<span style="font-size:12px;color:silver">Media</span></div>'
    },
    tooltip: {
        valueSuffix: ' Media'
    }
}],

exporting: {
    enabled: false
}
});
}

Una vez recibido los datos por ajax, lo convierto en formato float y ya se los paso como data al gráfico.

Muchas gracias a la ayuda de @Héctor J. Orihuela Ruiz.

0

Buenas, en

series: [{
    name: 'Media',
    data: array[0].Media,

Tienes puesto data: array[0].Media, cuando lo que está esperando es un array de datos, por lo tanto debería ser:

series: [{
name: 'Media',
data: array,

Ya que le estarías pasando un array de datos.

Si no te funcionase así, haría un método que parsease el array de la respuesta a un array Javascript creado por ti, por si hubiese diferencias.

PD: Qué usas en el servidor para que te devuelva esa respuesta? podrías poner el código del servidor por favor?

Saludos

12
  • Ante todo, gracias por tu respuesta. En este gráfico, como puedes ver, solo necesito pasarle un dato para mostrar, sin ser necesario un array. También probé, directamente desde ajax antes de llamar a la función graficoMedia pasarle una variable que contenga este valor 'array[0].Media', pero aún así sigue sin funcionar. He probado también configurando 'data' con una función y dentro de ella devolver el dato array[0].Media, tampoco funciona. También lo he intentado como string, es decir, mediante la función devolver el dato "["+array[0].Media+"]" y nada. No sé cómo probar más. Commented el 29 jun. 2017 a las 8:33
  • Sí, comprendo que sólo necesites un dato pero según dice la página de HighCharts, la propiedad "data:" requiere un array, aunque sólo sea un número, de hecho tú mismo pones "data: [4]". Por lo tanto, yo haría dos cosas: Primero, "console.log(data[0].Media);" en el success del ajax para comprobar que efectivamente así se accede al valor. Segundo, create un array que no tenga nada que ver con el data de un número como el "[4]" y pásaselo como parámetro a la función "graficoMedia" y mira a ver si así lo pinta. Commented el 29 jun. 2017 a las 8:51
  • No me cabían más comentarios: Tercero, si todo eso no funciona, prueba a realizar lo mismo de pasarle un array por parámetro fuera del success para ver si el tiempo de respuesta del servidor está influyendo. Y no me des las gracias, es un placer ser de ayuda, a ver si lo sacamos :) Commented el 29 jun. 2017 a las 8:55
  • He realizado todas las pruebas que me comentas y obtengo los siguientes resultados: La primera me devuelve correctamente un 4. La segunda si creo el array dentro del success de ajax tampoco muestra nada. La tercera sí que funciona, si le paso un parámetro externo como vector, funciona tanto si ejecuto la función graficoMedia dentro del success como fuera del mismo. Por lo tanto, ¿qué puede estar ocurriendo? ¿El tiempo de respuesta en mi servidor es demasiado grande? Commented el 29 jun. 2017 a las 15:47
  • Disculpa la demora. Mi experiencia me dice que muchas veces cuando dependo de la respuesta ajax, por lo tanto, quizás haya que hacerle un sleep o controlarlo con un callback. La siguiente prueba a realizar es poner un console.log dentro del método graficoMedia para ver qué es lo que llega, o bien depurándolo con las herramientas del navegador (F12). Ahí podrás comprobar el orden de ejecución, no sé si me explico. Ya me comentas qué tal. Commented el 30 jun. 2017 a las 6:31

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.