用线绘制透明条形图？

Question

I've had great success getting flot to create line graphs, in part due to the quality of responses on this forum!

However either I'm trying to do something special, or can't figure out the search terms. I'm trying to plot two datasets on the same graph:

Line graphs that represent temperatures Bar graphs that represent when a device is active (it is either a 1 or a 0 value in the RRD). I want these as transparent background bars so I can see if the device is triggering properly and how long it is on for.

I have two problems;

• I can't get the device data to show as transparent graphs. Just line data
• I haven't tried merging the two datasets into a single graph yet. I'd like the device bar data to show as a full vertical bar, right now the y-axis is from 0 to 1.2, so there is a gap at the top of the graph. When I try and use a second axis, I get the numbers on the right hand side, but the the line graph doesn't show it's axis correctly.

Here is a snippet of the data that I'm working with:

"data" : [
     {
        "bars" : {
           "fillColor" : {
              "colors" : [
                 {
                    "opacity" : 1
                 },
                 {
                    "opacity" : 1
                 }
              ]
           },
           "lineWidth" : 0,
           "show" : "true"
        },
        "color" : "blue",
        "data" : [
           [
              "1421280000000",
              "0"
           ],
           [
              "1421452800000",
              "0"
           ],
           [
              "1421625600000",
              "0"
           ],
           [
              "1421798400000",
              "1"
           ],
           [
              "1421971200000",
              "1"
           ],
           [
              "1422144000000",
              "1"
           ],
           [
              "1422316800000",
              "0"
           ],
           [
              "1422489600000",
              "0"
           ],
           [
              "1422662400000",
              "0"
           ],
           [
              "1422835200000",
              "0"
           ]
        ]
    }
        "label" : "D1",
        "yaxes" : 1
     },
     {
        "bars" : {
           "fillColor" : {
              "colors" : [
                 {
                    "opacity" : 1
                 },
                 {
                    "opacity" : 1
                 }
              ]
           },
           "lineWidth" : 0,
           "show" : "true"
        },
        "color" : "red",
        "data" : [
           ]
              "1421280000000",
              "1"
           ],
           [
              "1421452800000",
              "1"
           ],
           [
              "1421625600000",
              "1"
           ],
           [
              "1421798400000",
              "0"
           ],
           [
              "1421971200000",
              "1"
           ],
           [
              "1422144000000",
              "0"
           ],
           [
              "1422316800000",
              "0"
           ],
           [
              "1422489600000",
              "0"
           ],
           [
              "1422662400000",
              "1"
           ],
           [
              "1422835200000",
              "0"
           ]
        ],
        "label" : "D2",
        "yaxes" : 1
     }  
  ],

Answer 1

Your bars have the default width of 1 x axis unit and since your x values are so big this means that the bars have a width of 0 pixels. Add something like this to your bars options to make them wider and proceed from there:

"barWidth": 24 * 60 * 60 * 1000, // 1 day in milliseconds

Here is a fiddle with the full example. You will see that some bars hide each other, to counter this look at the side-by-side or stacked-bars plugins on the flot site.