jquery flot bar chart series multiples

para que sea más fácil de entender, proporciono el código: http://jsbin.com/otaruq

Lo que tenemos aquí es un conjunto de datos como este: (busque la fuente para más información)

"label": "scott", "data": [[1317427200000, "17017"], [1317513600000, "77260"]] 

donde el primer valor es una fecha en formato UTC y el segundo debe ser la puntuación.

ahora, lo que estoy tratando de hacer es tener para cada fecha en el eje y las barras que representan la puntuación lado a lado, como a continuación:

  3 | # # 2 | # # # # # # 1 | # # # # # # # # # 0 |_________________________________ 1 oct 2 oct 3 oct 

en su lugar ahora, como puedes ver, las barras se astackn cada una sobre la otra.

Cualquier ayuda sería realmente agradecida, gracias

La forma más fácil de hacer esto sería jitterear manualmente los valores de x. Descubrí que 50,0000 milisegundos es un buen temblor para el ancho de la barra.

Produce lo siguiente:

introduzca la descripción de la imagen aquí


Código completo:

 var data = [{ "label": "scott", "data": [[1317427200000-5000000*3, "17017"], [1317513600000-5000000*5, "77260"]] }, { "label": "martin", "data": [[1317427200000-5000000*2, "96113"], [1317513600000-5000000*4, "33407"]] }, { "label": "solonio", "data": [[1317427200000-5000000, "13041"], [1317513600000-5000000*3, "82943"]] }, { "label": "swarowsky", "data": [[1317427200000, "83479"], [1317513600000-5000000*2, "96357"], [1317600000000-5000000, "55431"]] }, { "label": "elvis", "data": [[1317427200000+5000000, "40114"], [1317513600000-5000000*1, "47065"]] }, { "label": "alan", "data": [[1317427200000+5000000*2, "82504"], [1317513600000, "46577"]] }, { "label": "tony", "data": [[1317513600000+5000000, "88967"]] }, { "label": "bill", "data": [[1317513600000+5000000*2, "60187"], [1317600000000, "39090"]] }, { "label": "tim", "data": [[1317513600000+5000000*3, "95382"], [1317600000000+5000000, "89699"]] }, { "label": "britney", "data": [[1317513600000+5000000*4, "76772"]] }, { "label": "logan", "data": [[1317513600000+5000000*5, "88674"]] }]; var options = { series: { bars: { show: true, barWidth: 60 * 60 * 1000, align: 'center' }, }, yaxes: { min: 0 }, xaxis: { mode: 'time', timeformat: "%b %d", minTickSize: [1, "month"], tickSize: [1, "day"], autoscaleMargin: .10 } }; $(function() { $.plot($('#placeholder'), data, options); });