1. Inicio
  2. Pregunta y respuesta
  3. Uso de Highcharts.js para crear un gráfico de estilo de tarjeta perforada

Uso de Highcharts.js para crear un gráfico de estilo de tarjeta perforada

2012-02-14 10 views
6

Me gustaría replicar el gráfico de estilo "tarjeta perforada" presentado en github mediante notas altas.Uso de Highcharts.js para crear un gráfico de estilo de tarjeta perforada

GitHub Punch Card Graph

estoy realmente luchando con éste, aquí hay un jsfiddle que comienza a buscarme allí. Prefiero tener días en el y el tiempo en la x, pero no sé cómo debo hacer esto.

Cualquier ayuda apreciada.

TIA!

Fuente

2012-02-14 Bobby B

+0

Se ha actualizado jsfiddle con una modificación de la sugerencia de mangobug. Todo lo que queda es conseguir tiempo en el eje y. –

+1

Aquí hay otra actualización que obtiene las etiquetas de los ejes yyx como desee: http://jsfiddle.net/CA2cT/8/ – Mark

+0

¡Acabado perfecto! Gracias por arrastrar eso al otro lado de la línea. –

Respuesta

8

No pude voltear el eje, pero resolví muchas cosas para ti.

HTML:

<div id="container" style="height: 400px"></div>

JS:

var chart = new Highcharts.Chart({ 
chart: { 
    renderTo: 'container', 
    defaultSeriesType: 'scatter' 
}, 

xAxis: { 
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
}, 
yAxis: { 

}, 
plotOptions: { 
    scatter: { 
     marker: { 
      radius: 4, 
      states: { 
       hover: { 
        enabled: true, 
        lineColor: 'rgb(100,100,100)' 
       } 
      } 
     }, 
     states: { 
      hover: { 
       marker: { 
        enabled: false 
       } 
      } 
     } 
    } 
}, 
series: [{ 
    data: [{y: 161}, {y: 167}, {y: 165}, {y: 140}, {y: 172}, {y: 163}, {y: 187}, {y: 107}, {y: 147}, {y: 145}, {y: 112}, {y: 199}] 
}] 
});

Fuente

2012-02-14 14:55:25

+0

Súper cerca - muy apreciado. Si pudiera descubrir cómo mostrar las horas 00:00 a 24:00 en el eje y, entonces este sería un ganador. Actualicé el violín para mostrar Sun-Sat en el eje x. Gracias por acercarme más. –

+3

Me alegra haber sido de ayuda, aunque un voto positivo hubiera sido realmente alentador: P ** bromeando **. Trataría de buscar nuevas mejoras. –

2

I updated the jsFiddle de @mangobug que lo guíe hacia una manera más cerca de hacer lo que quiere

Fuente

2012-02-14 15:24:37 Grooveek

+0

'Uncaught ReferenceError: Highcharts no está definido' –

4

supongo que es Hasta ahora, pero tal vez esta solución ayudará a otras personas en la misma situación.

Aquí está mi solución:

$(function() { 
    $('#container').highcharts({ 

    chart: { 
     defaultSeriesType: 'scatter' 
    }, 

    title: { 
     text: 'Punchcard' 
    }, 

    xAxis: { 
     type: "datetime", 
     dateTimeLabelFormats: { 
     hour: '%I %P' 
     }, 
     tickInterval: 3600000 * 1 
    }, 

    yAxis: { 
     categories: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'], 
    }, 

    series: [{ 
     data: [ 

     {y: 0, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 0, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }}, 

     {y: 1, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 1, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }}, 

     {y: 2, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 2, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }}, 

     {y: 3, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 3, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }}, 

     {y: 4, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 4, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }}, 

     {y: 5, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 5, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }}, 

     {y: 6, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }}, 
     {y: 6, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }}, 

     ] 
    }] 

    }); 

});

Y aquí es la demostración: http://jsfiddle.net/KmPJE/1/

Avísame si funciona para usted.

Fuente

2013-07-01 23:02:30 kerberoS

+0

Muy buen trabajo: buen seguimiento en una publicación anterior. –

+0

¡Ningún problema! Actualmente estoy trabajando en un mejor enfoque utilizando los gráficos de burbujas en lugar de scatter. – kerberoS

Cuestiones relacionadas

 Cuestiones relacionadas