title: Using Flot with multiple bars with orderbars.js and categories
body: <p>I am having trouble creating multiple bars with flot.  There is a plugin that can be downloaded here: <a href="http://www.benjaminbuffet.com/public/js/jquery.flot.orderBars.js" rel="nofollow">http://www.benjaminbuffet.com/public/js/jquery.flot.orderBars.js</a> that makes graphs with multiple bars per x category like this:  <a href="http://www.pikemere.co.uk/blog/tutorial-flot-how-to-create-bar-charts/" rel="nofollow">http://www.pikemere.co.uk/blog/tutorial-flot-how-to-create-bar-charts/</a> (see under the customized bar charts).  However, his example is a bit different in that it uses the time function rather than categories.  </p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;head&gt;
  
  &lt;script language="javascript" type="text/javascript" src="/flot/jquery.js"&gt;&lt;/script&gt;
  &lt;script language="javascript" type="text/javascript" src="/flot/jquery.flot.js"&gt; &lt;/script&gt;
  &lt;script language="javascript" type="text/javascript" src="/flot/jquery.flot.categories.js"&gt;&lt;/script&gt;
  &lt;script language="javascript" type="text/javascript" src="/flot/jquery.flot.orderBars.js"&gt;&lt;/script&gt;
  
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
  
          var data1 = [
          {
          label: "Male" ,
          data: [["True", 1],["False", 2]] ,
          bars: {
              show: true,
              barWidth: 0.13,
              order: 1
              }
          },
          {
          label: "Female" ,
          data: [["True", 3],["False", 4]],
          bars: {
              show: true,
              barWidth: 0.13,
              order: 2
              }
          }           
          ];
  
          $.plot($("#placeholder"), data1, {      
          xaxis: {
              mode: "categories"
          },
  
          });
      });
  &lt;/script&gt;
  
  
  &lt;title&gt;Test&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="placeholder" style="width:600px;height:300px"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>With the above code, the graph displays, but without any bars.  If I remove the order:1 and order:2, it displays correctly, except with the bars overlapping each other rather than being offset by each other (I think it just ignores the orderbars plugin).</p>
  
  <p>This is a very simplified example of what I really want to do, but if someone knows how I can get it to do what I want fairly simply, I would be very much appreciative.  </p>
  
  <p>To sum up, what I want is to have two sets of two bars.  The first set with "True" under them and the second second set with "False" under them.  I do not want to use numbers to represent the values, if possible as it will greatly complicate my more complex situation.  But if I must, I would still like to know how to do it that way.</p>