title: Chart.js Bar Chart - grouping and mapping data
body: <p>I am trying to use <a href="http://www.chartjs.org/docs/#bar-chart-introduction" rel="nofollow">Chart.js</a> Bar Chart to display a set of data.
  My data is weekly based so to my method I send the year and week and get the data back in 3 columns; Product, Area and Amount.</p>
  
  <p>What I want is to have to Products horizontaly and in each Product I want different bars for each Area and offcourse the Amount verticaly. (Bonus: If an Area nothing in that product it should not be shown in that particular Product)</p>
  
  <p>The problem is that the number of Products and the number of Areas can vary from each week. And I can't seem to find a good way to loop through the data and create the datasets the way chart.js wants. </p>
  
  <p>Also tried using Underscore.js to group it but the fact that the each Area doesn't always have an amount for a spesific product seems to be causing some issues.</p>
  
  <p>So I guess you have to loop through the data and map that data to another predefined array for each Area so it can match this structure somehow??</p>
  
  <p>Also open for other Chart plugins, but really liked how Chart.js animates the data. And if I get this working I can probably figgure out an update method for when you change week.</p>
  
  <p>To get the labels i can f.ex do this: </p>
  
  <pre><code>$.ajax({
      ....
      success: function (d) {
            var a = _.groupBy(d.data, function (d) { return d.Product });
            var labels = [];
            $.each(a, function (i, value) {
               labels.push(i);
            });
      }
  });
  </code></pre>