title: Right way to Plot Dynamic Grouped Bar chart.js
body: <p>I have the following data which should be shown in a grouped bar chart using chart.js:</p>
  
  <ul>
  <li>Average delivery days on the left side</li>
  <li>Week names at the bottom</li>
  <li>The route names beside each other per week name</li>
  </ul>
  
  <p>My json data(not all data are here):</p>
  
  <pre><code>    {"data":[{"RouteID":"MK","week_name":"2016 Week 2","Average_Delivery_Days":1},{"RouteID":"TSM","week_name":"2016 Week 2","Average_Delivery_Days":1},{"RouteID":"C","week_name":"2016 Week 3","Average_Delivery_Days":1},{"RouteID":"CAV","week_name":"2016 Week 4","Average_Delivery_Days":2},{"RouteID":"MK","week_name":"2016 Week 4","Average_Delivery_Days":1},{"RouteID":"PQU","week_name":"2016 Week 4","Average_Delivery_Days":1},{"RouteID":"MK","week_name":"2016 Week 5","Average_Delivery_Days":2},{"RouteID":"TSM","week_name":"2016 Week 5","Average_Delivery_Days":2},{"RouteID":"CAV","week_name":"2016 Week 5","Average_Delivery_Days":1},{"RouteID":"C","week_name":"2016 Week 5","Average_Delivery_Days":1},{"RouteID":"PQU","week_name":"2016 Week 5","Average_Delivery_Days":1},{"RouteID":"CAV","week_name":"2016 Week 6","Average_Delivery_Days":2},{"RouteID":"C","week_name":"2016 Week 6","Average_Delivery_Days":2},{"RouteID":"MK","week_name":"2016 Week 6","Average_Delivery_Days":2},{"RouteID":"PQU","week_name":"2016 Week 6","Average_Delivery_Days":1},{"RouteID":"TSM","week_name":"2016 Week 6","Average_Delivery_Days":1},{"RouteID":"C","week_name":"2016 Week 7","Average_Delivery_Days":2},{"RouteID":"CAV","week_name":"2016 Week 7","Average_Delivery_Days":2},{"RouteID":"MK","week_name":"2016 Week 7","Average_Delivery_Days":1},{"RouteID":"PQU","week_name":"2016 Week 7","Average_Delivery_Days":1},{"RouteID":"TSM","week_name":"2016 Week 7","Average_Delivery_Days":1},{"RouteID":"MK","week_name":"2016 Week 8","Average_Delivery_Days":3},{"RouteID":"PQU","week_name":"2016 Week 8","Average_Delivery_Days":2},{"RouteID":"C","week_name":"2016 Week 8","Average_Delivery_Days":2},{"RouteID":"TSM","week_name":"2016 Week 8","Average_Delivery_Days":2},{"RouteID":"CAV","week_name":"2016 Week 8","Average_Delivery_Days":2},{"RouteID":"PQU","week_name":"2016 Week 9","Average_Delivery_Days":3},{"RouteID":"TSM","week_name":"2016 Week 9","Average_Delivery_Days":2},{"RouteID":"C","week_name":"2016 Week 9","Average_Delivery_Days":2},{"RouteID":"CAV","week_name":"2016 Week 9","Average_Delivery_Days":2},{"RouteID":"MK","week_name":"2016 Week 9","Average_Delivery_Days":1},{"RouteID":"MK","week_name":"2016 Week 10","Average_Delivery_Days":2},{"RouteID":"CAV","week_name":"2016 Week 10","Average_Delivery_Days":2},{"RouteID":"PQU","week_name":"2016 Week 10","Average_Delivery_Days":2},{"RouteID":"TSM","week_name":"2016 Week 10","Average_Delivery_Days":2},{"RouteID":"C","week_name":"2016 Week 10","Average_Delivery_Days":1},{"RouteID":"C","week_name":"2016 Week 11","Average_Delivery_Days":3},{"RouteID":"TSM","week_name":"2016 Week 11","Average_Delivery_Days":2},{"RouteID":"PQU","week_name":"2016 Week 11","Average_Delivery_Days":2},{"RouteID":"MK","week_name":"2016 Week 11","Average_Delivery_Days":2},{"RouteID":"CAV","week_name":"2016 Week 11","Average_Delivery_Days":2},{"RouteID":"MK","week_name":"2016 Week 12","Average_Delivery_Days":4},{"RouteID":"C","week_name":"2016 Week 12","Average_Delivery_Days":4},{"RouteID":"CAV","week_name":"2016 Week 12","Average_Delivery_Days":3},{"RouteID":"PQU","week_name":"2016 Week 12","Average_Delivery_Days":3},{"RouteID":"TSM","week_name":"2016 Week 12","Average_Delivery_Days":2},{"RouteID":"MK","week_name":"2016 Week 13","Average_Delivery_Days":3},{"RouteID":"CAV","week_name":"2016 Week 13","Average_Delivery_Days":3},{"RouteID":"TSM","week_name":"2016 Week 13","Average_Delivery_Days":2},{"RouteID":"PQU","week_name":"2016 Week 13","Average_Delivery_Days":2},{"RouteID":"C","week_name":"2016 Week 13","Average_Delivery_Days":2},{"RouteID":"CAV","week_name":"2016 Week 14","Average_Delivery_Days":5},{"RouteID":"MK","week_name":"2016 Week 14","Average_Delivery_Days":4},{"RouteID":"C","week_name":"2016 Week 14","Average_Delivery_Days":4},{"RouteID":"PQU","week_name":"2016 Week 14","Average_Delivery_Days":3},{"RouteID":"TSM","week_name":"2016 Week 14","Average_Delivery_Days":3},{"RouteID":"MK","week_name":"2016 Week 15","Average_Delivery_Days":4},{"RouteID":"PQU","week_name":"2016 Week 15","Average_Delivery_Days":3},{"RouteID":"C","week_name":"2016 Week 15","Average_Delivery_Days":3},{"RouteID":"CAV","week_name":"2016 Week 15","Average_Delivery_Days":2},{"RouteID":"TSM","week_name":"2016 Week 15","Average_Delivery_Days":1},{"RouteID":"C","week_name":"2016 Week 16","Average_Delivery_Days":5},{"RouteID":"TSM","week_name":"2016 Week 16","Average_Delivery_Days":3},{"RouteID":"MK","week_name":"2016 Week 16","Average_Delivery_Days":3},{"RouteID":"PQU","week_name":"2016 Week 16","Average_Delivery_Days":3},{"RouteID":"CAV","week_name":"2016 Week 16","Average_Delivery_Days":3},{"RouteID":"TSM","week_name":"2016 Week 17","Average_Delivery_Days":5},{"RouteID":"MK","week_name":"2016 Week 17","Average_Delivery_Days":4},{"RouteID":"PQU","week_name":"2016 Week 17","Average_Delivery_Days":4},{"RouteID":"C","week_name":"2016 Week 17","Average_Delivery_Days":3},{"RouteID":"CAV","week_name":"2016 Week 17","Average_Delivery_Days":3},{"RouteID":"CAV","week_name":"2016 Week 18","Average_Delivery_Days":4},{"RouteID":"C","week_name":"2016 Week 18","Average_Delivery_Days":3},{"RouteID":"PQU","week_name":"2016 Week 18","Average_Delivery_Days":2},{"RouteID":"MK","week_name":"2016 Week 18","Average_Delivery_Days":2},{"RouteID":"TSM","week_name":"2016 Week 18","Average_Delivery_Days":2},{"RouteID":"CAV","week_name":"2016 Week 19","Average_Delivery_Days":4},{"RouteID":"PQU","week_name":"2016 Week 19","Average_Delivery_Days":3},{"RouteID":"MK","week_name":"2016 Week 19","Average_Delivery_Days":3},{"RouteID":"C","week_name":"2016 Week 19","Average_Delivery_Days":3},{"RouteID":"TSM","week_name":"2016 Week 19","Average_Delivery_Days":2},{"RouteID":"C","week_name":"2016 Week 20","Average_Delivery_Days":4},{"RouteID":"CAV","week_name":"2016 Week 20","Average_Delivery_Days":4},{"RouteID":"TSM","week_name":"2016 Week 20","Average_Delivery_Days":4},{"RouteID":"MK","week_name":"2016 Week 20","Average_Delivery_Days":3},{"RouteID":"PQU","week_name":"2016 Week 20","Average_Delivery_Days":3},{"RouteID":"CAV","week_name":"2016 Week 21","Average_Delivery_Days":4},{"RouteID":"TSM","week_name":"2016 Week 21","Average_Delivery_Days":2},{"RouteID":"MK","week_name":"2016 Week 21","Average_Delivery_Days":2},{"RouteID":"PQU","week_name":"2016 Week 21","Average_Delivery_Days":2},{"RouteID":"C","week_name":"2016 Week 21","Average_Delivery_Days":2},{"RouteID":"CAV","week_name":"2016 Week 22","Average_Delivery_Days":3},{"RouteID":"TSM","week_name":"2016 Week 22","Average_Delivery_Days":3},{"RouteID":"MK","week_name":"2016 Week 22","Average_Delivery_Days":3},{"RouteID":"PQU","week_name":"2016 Week 22","Average_Delivery_Days":2},{"RouteID":"C","week_name":"2016 Week 22","Average_Delivery_Days":2},{"RouteID":"MK","week_name":"2016 Week 23","Average_Delivery_Days":19},{"RouteID":"TSM","week_name":"2016 Week 23","Average_Delivery_Days":4},{"RouteID":"C","week_name":"2016 Week 23","Average_Delivery_Days":4},{"RouteID":"CAV","week_name":"2016 Week 23","Average_Delivery_Days":2},{"RouteID":"PQU","week_name":"2016 Week 23","Average_Delivery_Days":2},{"RouteID":"TSM","week_name":"2016 Week 24","Average_Delivery_Days":2},{"RouteID":"CAV","week_name":"2016 Week 24","Average_Delivery_Days":2},{"RouteID":"C","week_name":"2016 Week 24","Average_Delivery_Days":1},{"RouteID":"MK","week_name":"2016 Week 24","Average_Delivery_Days":1},{"RouteID":"PQU","week_name":"2016 Week 24","Average_Delivery_Days":1},{"RouteID":"C","week_name":"2016 Week 25","Average_Delivery_Days":5},{"RouteID":"CAV","week_name":"2016 Week 25","Average_Delivery_Days":3},{"RouteID":"MK","week_name":"2016 Week 25","Average_Delivery_Days":2},{"RouteID":"TSM","week_name":"2016 Week 25","Average_Delivery_Days":2},{"RouteID":"PQU","week_name":"2016 Week 25","Average_Delivery_Days":1},{"RouteID":"CAV","week_name":"2016 Week 26","Average_Delivery_Days":4},{"RouteID":"PQU","week_name":"2016 Week 26","Average_Delivery_Days":2},{"RouteID":"C","week_name":"2016 Week 26","Average_Delivery_Days":1},{"RouteID":"MK","week_name":"2016 Week 26","Average_Delivery_Days":1},{"RouteID":"TSM","week_name":"2016 Week 26","Average_Delivery_Days":1},{"RouteID":"MK","week_name":"2016 Week 27","Average_Delivery_Days":2},{"RouteID":"TSM","week_name":"2016 Week 27","Average_Delivery_Days":2},{"RouteID":"CAV","week_name":"2016 Week 27","Average_Delivery_Days":2},{"RouteID":"C","week_name":"2016 Week 27","Average_Delivery_Days":1},{"RouteID":"PQU","week_name":"2016 Week 27","Average_Delivery_Days":1},{"RouteID":"C","week_name":"2016 Week 28","Average_Delivery_Days":4},{"RouteID":"TSM","week_name":"2016 Week 28","Average_Delivery_Days":4},{"RouteID":"MK","week_name":"2016 Week 28","Average_Delivery_Days":3},{"RouteID":"CAV","week_name":"2016 Week 28","Average_Delivery_Days":3},{"RouteID":"PQU","week_name":"2016 Week 28","Average_Delivery_Days":2},{"RouteID":"MK","week_name":"2016 Week 29","Average_Delivery_Days":5},{"RouteID":"PQU","week_name":"2016 Week 29","Average_Delivery_Days":3},{"RouteID":"CAV","week_name":"2016 Week 29","Average_Delivery_Days":3},{"RouteID":"TSM","week_name":"2016 Week 29","Average_Delivery_Days":2},{"RouteID":"C","week_name":"2016 Week 29","Average_Delivery_Days":2},{"RouteID":"TSM","week_name":"2016 Week 30","Average_Delivery_Days":2},{"RouteID":"MK","week_name":"2016 Week 30","Average_Delivery_Days":2},{"RouteID":"PQU","week_name":"2016 Week 30","Average_Delivery_Days":2},{"RouteID":"C","week_name":"2016 Week 30","Average_Delivery_Days":1},{"RouteID":"CAV","week_name":"2016 Week 30","Average_Delivery_Days":1},{"RouteID":"CAV","week_name":"2017 Week 48","Average_Delivery_Days":4},{"RouteID":"PQU","week_name":"2017 Week 48","Average_Delivery_Days":3},{"RouteID":"C","week_name":"2017 Week 48","Average_Delivery_Days":3},{"RouteID":"TSM","week_name":"2017 Week 48","Average_Delivery_Days":3},{"RouteID":"PQU","week_name":"2017 Week 49","Average_Delivery_Days":10},{"RouteID":"CAV","week_name":"2017 Week 49","Average_Delivery_Days":4},{"RouteID":"TSM","week_name":"2017 Week 49","Average_Delivery_Days":2},{"RouteID":"MK","week_name":"2017 Week 49","Average_Delivery_Days":1}],"filter_by":"Weekly"}
  </code></pre>
  
  <p>But I just can't get it right since based on my understanding, the route names should be the column names in order to make it right.</p>
  
  <p>Wrong Graph:
  <a href="https://i.stack.imgur.com/LrtTq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LrtTq.png" alt="enter image description here"></a></p>
  
  <p>Right Graph:
  <a href="https://i.stack.imgur.com/KyIt2.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KyIt2.jpg" alt="enter image description here"></a></p>
  
  <p>And my sample query:</p>
  
  <pre><code>SELECT [RouteID], 
  CAST(DATEPART(YEAR,[DeliveryDate]) as varchar) + ' Week ' + CAST(DATEPART(WEEK,[DeliveryDate]) AS varchar) AS week_name,
  AVG(DATEDIFF(day, CONVERT(date, [UnloadDate]), CONVERT(date, [DeliveryDate]))) as Average_Delivery_Days 
  FROM [CARGODB].[dbo].[Cargo_Transactions] 
  WHERE [DeliveryDate] IS NOT NULL AND [DeliveryDate] != 0 
  AND CONVERT(date, [DeliveryDate]) BETWEEN '2016-01-01' AND GETDATE() 
  AND [UnloadDate] IS NOT NULL AND [UnloadDate] != 0 AND [DeliveryDate] &gt; [UnloadDate] 
  AND [Deleted] = 0 and [StageID] = 'D' AND [RouteID] IN ('TSM', 'C', 'MK', 'CAV', 'PQU')
  GROUP BY DATEPART(YEAR,[DeliveryDate]), DATEPART(WEEK,[DeliveryDate]), [RouteID]
  ORDER BY DATEPART(YEAR,[DeliveryDate]), DATEPART(WEEK,[DeliveryDate]), Average_Delivery_Days desc
  </code></pre>
  
  <p><strong>My Chart.js Code:</strong></p>
  
  <pre><code>var date_created = [];
          var average_delivery_days = [];
          var route_name = [];
          var oss_new_customers = [];
  
          for(var i in data.data) {
              date_created.push(data.data[i]['week_name']);
              average_delivery_days.push(data.data[i]['Average_Delivery_Days']);
              route_name.push(data.data[i]['RouteID']);
          }
  
          var chartdata = {
              labels: date_created,
              datasets : [
                  {
                      label: route_name,
                      backgroundColor: 'rgba(52, 152, 219,1.0)',
                      data: average_delivery_days,
                      legend: {
                          onClick: function(e){
                              hidden:true
                          }
                      }
                  }
              ]
          };
  
          ctx = $("#delivery_performance_chart");
          delivery_performance_barGraph = new Chart(ctx, {
              type: 'bar',
              data: chartdata,
              options: {
                  scales: {
                      yAxes: [{
                          ticks: {
                              beginAtZero:true
                          }
                      }]
                  },
                  tooltips: {
                      mode: 'index',
                      footerFontStyle: 'normal'
                  },
                  hover: {
                      mode: 'index',
                      intersect: true
                  },
                  scales: {
                      xAxes: [{
                          display: true,
                          scaleLabel: {
                              show: true
                          }
                      }],
                      yAxes: [{
                          display: true,
                          scaleLabel: {
                              show: true
                          }
                      }]
                  },
                  maintainAspectRatio: false,
                  responsive:true
              }
          });
  </code></pre>
  
  <p>Your help is highly appreciated. Thanks!</p>