title: categorizing flot bar chart color based on common values
body: <p>I currently have a flot bar chart that has a list of city and states but I am having a hard time trying to find a good method to set the same color of each bar based on the state when the bar chart is listed based on city.  </p>
  
  <p>I would like to use the same colors that is defined in the flot auto-generated colors in a ascending manner which is the reason why I set the data array this way.  But I need to change it so that the cities within the same state have the same bar color.  In this example <a href="http://jsfiddle.net/u8S9X/" rel="nofollow">http://jsfiddle.net/u8S9X/</a> the bar chart colors are auto generated based on the data array but from here I am stuck on trying to figure out the best method to categorize the color based on the state for each city.</p>
  
  <p>Here is a snippet of the code:</p>
  
  <pre><code>var data = [
      {data: [[0, 1],[1, 0],[2, 0],[3, 0],[4, 0],[5, 0],[6, 0],[7, 0]]},
      {data: [[0, 0],[1, 1],[2, 0],[3, 0],[4, 0],[5, 0],[6, 0],[7, 0]]},
      {data: [[0, 0],[1, 0],[2, 2],[3, 0],[4, 0],[5, 0],[6, 0],[7, 0]]},
      {data: [[0, 0],[1, 0],[2, 0],[3, 2],[4, 0],[5, 0],[6, 0],[7, 0]]},
      {data: [[0, 0],[1, 0],[2, 0],[3, 0],[4, 2],[5, 0],[6, 0],[7, 0]]},
      {data: [[0, 0],[1, 0],[2, 0],[3, 0],[4, 0],[5, 4],[6, 0],[7, 0]]},
      {data: [[0, 0],[1, 0],[2, 0],[3, 0],[4, 0],[5, 0],[6, 7],[7, 0]]},
      {data: [[0, 0],[1, 0],[2, 0],[3, 0],[4, 0],[5, 0],[6, 0],[7, 1]]}   
  ];
  
  $.plot($("#placeholder"), data, {
      series: {
          lines: {
              fill: true,
          },
          bars: {
              show: true,
              align:'center',
              barWidth: 0.8,
          }   
      },
      xaxis: {
          ticks: [[0, "CITY, CO"],[1, "CITY, GA"],[2, "CITY, MO"],[3, "CITY, MO"],[4, "CITY, MS"],[5, "CITY, NJ"],[6, "CITY, NJ"],[7, "CITY, WA"]]
      },
      yaxis: {
          min: 0
      }
  });
  </code></pre>