1

Necesito que el eje X contenga una lista de labores, y que el eje Y contenga una lista de trabajadores. Algo como esto:

introducir la descripción de la imagen aquí

Esto es lo que estoy tratando de hacer:

var categoriesX = ["Labor1", "Labor2", ...];
var categoriesY = ["Persona1", "Persona2", ...];
$(chartId).highcharts({
    // No se qué tipo de gráfico podría usar
    ...
    xAxis: {
        categories: categoriesX,    
        title: {
            text: null
        }
    },
    yAxis: {
        categories: categoriesY,
        title: {
            text: null,
        },
    }
    ...
}

Pero, ¿cómo podría renderizar los valores usando una notación (x,y) si tanto x e y son cadenas de texto?, ¿es posible o existe una mejor solución?

Nota:

Se que podría solucionarlo creando algún tipo de tabla HTML que cambie los datos dinámicamente, pero tengo otros gráficos en la misma vista y quisiera que este también se represente como un gráfico.


Cross-post en Stack Overflow

3
  • Voy a hacer la misma pregunta que han hecho en el sitio en inglés: ¿cómo quieres que sea el resultado? Porque la mejor opción que se me ocurre es una matriz/nube de puntos. Pero no sé si tienes algo diferente en mente.
    – Alvaro Montoro
    el 12 ene. 2016 a las 17:24
  • @AlvaroMontoro si, justo estaba pensando que lo mejor sería poner aunque sea un punto en la posición X,Y
    – César
    el 12 ene. 2016 a las 17:26
  • Si va a haber valores numéricos (parece que hay horas en la tabla), quizás podrías hacer un diagrama de barras donde se muestre cuánto tiempo ha trabajado cada uno, algo como esto (aunque en ese caso ya no sería un el tipo de gráfico que parece que quieres)
    – Alvaro Montoro
    el 12 ene. 2016 a las 17:29

1 respuesta 1

7

En realidad no tengo muy claro cual es la pregunta que intentas responder con la gráfica que vas a realizar. Es más, a veces ni es necesario mostrar una gráfica. En varias ocasiones con una simple tabla es suficiente para extraer la información que necesitas de los datos.

Dicho esto, de acuerdo a las restricciones que planteas y la librería que estas usando, lo más cercano sería utilizar un heatmap.

Los heatmap son útiles cuando tienes una gran cantidad de datos que quieres visualizar de manera general y quieres identificar "puntos calientes", es decir, valores que sobresalen sobre el resto.

Un buen ejemplo de esta gráfica son las que muestra github de las contribuciones públicas, mira esta de Armin Ronacher el creador de Flask:

introducir la descripción de la imagen aquí

En highcharts un heatmap tiene un eje X y un eje Y como cualquier otra serie cartesiana. La definición de los puntos, sin embargo, requiere tres valores, x, y y también value, el cual sirve como referencia para la intensidad del color (a mayor valor mayor intensidad).

Para tu caso, este es un ejemplo de como definir los ejes X, Y y el conjunto de datos(asumiendo que es la duración en minutos de cada actividad):

   var xAxis = {
      categories: ['Armado', 'Embalaje', 'Embalaje clamshell', 'seleccion'],
   };

   var yAxis = {
      categories: ['Yesenia Kat', 'Micaela', 'Marilu', 'Dany'],
      title: null
   };

   data: [[0, 0, 89.5], [0, 1, 50.5], [0, 2, 46.17] ... ] // No pongo todos los datos

Por ejemplo [0, 0, 89.5] nos dice que a Yesenia le tomo 89.5 minutos terminar el armado.

Aquí adjunto el código para que observes como quedaría la gráfica.

http://jsfiddle.net/2tm8aw4j/2/

Nota:

  • Existen otras opciones para mostrar datos de este tipo, sin embargo, no las vi implementadas en highcharts.

  • Te recomiendo que para seleccionar gráficas leas antes Which chart or graph is right for you?

1
  • Excelente, si creo que es lo mas cercano a lo que quiero realizar. Como puse en la nota, lo mas fácil sería usar una simple tabla pero quería saber si era posible crear un gráfico a partir de esa información.
    – César
    el 13 ene. 2016 a las 11:59

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.