jquery flot bar chart multiple series
Question
in order to make things easy to undertand i'm providing the code: http://jsbin.com/otaruq
what we have here is a data set like this: (look the source for more)
"label": "scott",
"data": [[1317427200000, "17017"], [1317513600000, "77260"]]
where the first value is a date in UTC format and second should be score.
now, what i'm trying to do is to have for each date in the y axis the bars representing the score side by side, like below:
3 | # #
2 | # # # # # #
1 | # # # # # # # # #
0 |_________________________________
1 oct 2 oct 3 oct
instead now as you can see the bars are staked each one over the other.
any help would be really appreaciated, thank's
1 answers
solution1
14 ACCPTED 2011-10-09 14:24:25
The easiest way to do this would be to manually jitter your x values. I found that 50,0000 milliseconds is a good jitter for your bar width.
It produces the following:
Full code:
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); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> </head> <body> <div id="placeholder" style="width:800px;height:400px;"></div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.