title: Can't get Flot bar chart to render side by side
body: <p>I've looked though many tutorials, and no matter what I've tried, the bars of this flot chart are on top of each other.  What I've got right now is not ideal, but it's better than the bars on top of each other.  There is a bar on the right, a bar on the left, and the third bar overlaps them in the center.  I'm trying to get all 3 bars side by side.</p>
  
  <p>I've already tried the solutions provided on many links such as:
  <a href="https://stackoverflow.com/questions/28296984/jquery-flot-multi-bar-chart-side-by-side">jQuery flot multi bar chart side by side</a></p>
  
  <p>Javascript:</p>
  
  <pre><code>    &lt;!-- Custom Theme JavaScript --&gt;
      &lt;script src="../js/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Flot Charts JavaScript --&gt;
      &lt;script src="../js/flot/excanvas.min.js"&gt;&lt;/script&gt;
      &lt;script src="../js/flot/jquery.flot.js"&gt;&lt;/script&gt;
      &lt;script src="../js/flot/jquery.flot.resize.js"&gt;&lt;/script&gt;
      &lt;script src="../js/flot/jquery.flot.time.js"&gt;&lt;/script&gt;
      &lt;script src="../js/flot/jquery.flot.tooltip.min.js"&gt;&lt;/script&gt;
      &lt;script src="../js/flot/jquery.flot.categories.js"&gt;&lt;/script&gt;
      &lt;script src="../js/flot/jquery.flot.threshold.js"&gt;&lt;/script&gt;
      &lt;script src="../js/flot/jquery.flot.orderBars.js"&gt;&lt;/script&gt;
  
  &lt;div id="flot-bar-chart" class="chart" style="width:90%;height:200px; margin: 0 auto;"&gt;&lt;/div&gt;
  
  &lt;script&gt;
  
  
  //Flot Bar Chart
  
  $(function() {
  
      var barOptions = {
          series: {
              bars: {
                  show: true,
              }
          },
          xaxis: {
              ticks:[
                  [0,'Jan'],
                  [1,'Feb'],
                  [2,'Mar'],
                  [3,'Apr'],
                  [4,'May'],
                  [5,'June'],
                  [6,'July'],
                  [7,'Aug'],
                  [8,'Sep'],
                  [9,'Oct'],
                  [10,'Nov'],
                  [11,'Dec']
              ],
              autoscaleMargin: .02
          },
          grid: {
              hoverable: true
          },
          legend: {
                    noColumns: 0,
                    container: $("#chartLegend")
                },
          tooltip: true,
          tooltipOpts: {
              content: " %y "
          }
      };
  
      var barData = {
          label: "All Agents",
          bars: {
                  show: true,
                  barWidth: 0.4,
                  align: "right"
              },
          color: "Cyan",
          data: [
              [0, &lt;?php echo $count_all_Jan; ?&gt;],
              [1, &lt;?php echo $count_all_feb; ?&gt;],
              [2, &lt;?php echo $count_all_mar; ?&gt;],
              [3, &lt;?php echo $count_all_apr; ?&gt;],
              [4, &lt;?php echo $count_all_may; ?&gt;],
              [5, &lt;?php echo $count_all_jun; ?&gt;],
              [6, &lt;?php echo $count_all_jul; ?&gt;],
              [7, &lt;?php echo $count_all_aug; ?&gt;],
              [8, &lt;?php echo $count_all_sep; ?&gt;],
              [9, &lt;?php echo $count_all_oct; ?&gt;],
              [10, &lt;?php echo $count_all_nov; ?&gt;],
              [11, &lt;?php echo $count_all_dec; ?&gt;]
          ]
      };
  
      var barData2 = {
          label: "Full CAPing",
          bars: {
                  show: true,
                  barWidth: 0.4,
                  align: "left"
              },
          color: "red",
          data: [
              [0, &lt;?php echo $count_a_Jan; ?&gt;],
              [1, &lt;?php echo $count_a_feb; ?&gt;],
              [2, &lt;?php echo $count_a_mar; ?&gt;],
              [3, &lt;?php echo $count_a_apr; ?&gt;],
              [4, &lt;?php echo $count_a_may; ?&gt;],
              [5, &lt;?php echo $count_a_jun; ?&gt;],
              [6, &lt;?php echo $count_a_jul; ?&gt;],
              [7, &lt;?php echo $count_a_aug; ?&gt;],
              [8, &lt;?php echo $count_a_sep; ?&gt;],
              [9, &lt;?php echo $count_a_oct; ?&gt;],
              [10, &lt;?php echo $count_a_nov; ?&gt;],
              [11, &lt;?php echo $count_a_dec; ?&gt;]
          ]
      };
  
      var barData3 = {
          label: "Quarter CAPing",
          bars: {
                  show: true,
                  barWidth: 0.4,
                  align: "center"
              },
          color: "green",
          data: [
              [0, &lt;?php echo $count_q_Jan; ?&gt;],
              [1, &lt;?php echo $count_q_feb; ?&gt;],
              [2, &lt;?php echo $count_q_mar; ?&gt;],
              [3, &lt;?php echo $count_q_apr; ?&gt;],
              [4, &lt;?php echo $count_q_may; ?&gt;],
              [5, &lt;?php echo $count_q_jun; ?&gt;],
              [6, &lt;?php echo $count_q_jul; ?&gt;],
              [7, &lt;?php echo $count_q_aug; ?&gt;],
              [8, &lt;?php echo $count_q_sep; ?&gt;],
              [9, &lt;?php echo $count_q_oct; ?&gt;],
              [10, &lt;?php echo $count_q_nov; ?&gt;],
              [11, &lt;?php echo $count_q_dec; ?&gt;]
          ]
      };
  
      $.plot($("#flot-bar-chart"), [barData, barData2, barData3], barOptions);
  
  });
  
  &lt;/script&gt;
  
          &lt;style&gt;
          #chartLegend {
                border-radius: 8px 8px 8px 8px;
                border-top: 1px solid grey;
                border-bottom: 1px solid grey;
          }
          #chartLegend th, #chartLegend td {
                padding: 5px;          
                display: inline-block;
            }
          &lt;/style&gt;                                
          &lt;div id="chartLegend" align="center"&gt;&lt;/div&gt;
  </code></pre>