Home/ Questions/Q 6693111
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T05:56:43+00:00

in order to make things easy to undertand i’m providing the code: http://jsbin.com/otaruq what

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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:

    enter image description here

    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>
    • 0