title: Flot Bar Chart design
body: <p>I've made this bar chart <a href="http://imageshack.com/a/img901/7186/cnOfhh.png" rel="nofollow">http://imageshack.com/a/img901/7186/cnOfhh.png</a>, and the code for it is:</p>
  
  <pre><code>//compute &amp; mark average color
  for (var i = 0; i &lt; zdata.length; i++) {
      if (zdata[i].TargetTime == null) zdata[i].TargetTime = 0;
      if (zdata[i].TimePlayed == null) zdata[i].TimePlayed = 0;
  
      if (zdata[i].TargetTime &gt;= zdata[i].TimePlayed) {
          zdata[i]['Color'] = 'green';
      } else {
          zdata[i]['Color'] = 'red';
      }
  }
  //localsitelist
  var element = {
      rt: 'D',
      Id: rid,
      courselist: clist,
      selcourseId: selCid,
      selcourse: selCname,
      cartlist: wData,
      selSiteId: lsid,
      selsite: sitename,
      dataList: zdata
  }; //, carts: _mVM.availableCarts()}; //
  //if rid exists, is update, else its new
  var found = -1;
  for (var k = 0; k &lt; document.pvm.rapArray().length; k++) {
      if (document.pvm.rapArray()[k].Id() == rid) {
          document.pvm.rapArray()[k].update(element);
          //build chart data
          var values = []; //, series = Math.floor(Math.random() * 6) + 6;
  
          for (var i = 0; i &lt; zdata.length; i++) {
              values[i] = {
                  data: [
                      [zdata[i].HoleSequence, zdata[i].TimePlayed]
                  ],
                  color: zdata[i].Color
              };
          }
          //var data = [{ data: [[0, 1]], color: "red" },  { data: [[1, 2]], color: "yellow" },{ data: [[2, 3]], color: "green" }];
          BarChart('#ChartD-Overview' + rid, values);
          found = 1;
          break;
      }
  }
  if (found == -1) {
      var rvm = new panelViewModel(element);
      document.pvm.rapArray.push(rvm);
      //build chart data
      var values = []; //, series = Math.floor(Math.random() * 6) + 6;
  
      for (var i = 0; i &lt; zdata.length; i++) {
          values[i] = {
              data: [
                  [zdata[i].HoleSequence, zdata[i].TimePlayed]
              ],
              color: zdata[i].Color
          };
      }
      BarChart('#ChartD-Overview' + rvm.Id(), values);
  }
  </code></pre>
  
  <p>and the BarChart function:</p>
  
  <pre><code>function BarChart(id, data) {
  
      $.plot(id, data, {
          series: {
              bars: {
                  show: true,
                  barWidth: 0.6,
                  align: "center"
              }
          },
          stack: true,
          xaxis: {
              mode: "categories",
              tickLength: 0
          }
      });
  }
  </code></pre>
  
  <p>The problem is that I can't manage to get something like this <a href="https://imageshack.us/i/expGGpOkp" rel="nofollow">https://imageshack.us/i/expGGpOkp</a>, the little line should be <code>zdata[i].TargetTime</code>. I've tried something using stacked bar chart idea but the result was way different... What am I doing wrong? Can anyone help me with a suggestion to start with to get the same bar chart like in the last image?</p>