title: Show analytics of registered users for last 12 months using chart
body: <p>I'm trying to get all users for the last 12 months from database and show some statistics using chart.For that purpose I'm using chartJS.</p>
  
  <pre><code>$registeredUsersData = $connection-&gt;fetchAll(
      'SELECT
      COUNT(id) AS registered_users,
      CONCAT(MONTHNAME(created_on), " ", YEAR(created_on)) AS created_on
      FROM users 
      WHERE created_on 
      BETWEEN CURDATE() - INTERVAL 12 MONTH AND CURDATE() 
      GROUP BY YEAR(created_on), MONTH(created_on)
      ORDER BY YEAR(created_on) DESC, MONTH(created_on) DESC;
  ');
  </code></pre>
  
  <p>We pass it by symfony controller and render html template.</p>
  
  <pre><code>$registeredUsersCount = array_column($registeredUsersData, 'registered_users');
  $registeredUserMonths = array_column($registeredUsersData, 'created_on');
  
  return $this-&gt;render('dashboard/admin/index.html.twig', [
      'registered_users_count' =&gt; $registeredUsersCount,
      'registered_users_months' =&gt; $registeredUserMonths
  ]);
  </code></pre>
  
  <p>In the template I'm trying to display using a bar diagram that data where year and month should be combined and display on the abscissa(X-axis) and the count respectively on the ordinate(Y-axis).</p>
  
  <pre><code>&lt;div class="chart-container"&gt;
      &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  
  let months = {{ registered_users_months|json_encode|raw }};
  let users = {{ registered_users_count|json_encode|raw }};
  const ctx = document.getElementById('canvas').getContext('2d');
  const myChart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels: months,
          datasets: [{
              label: 'Registered Users Monthly',
              data: users,
              backgroundColor: 'rgba(90, 80, 191, 0.2)',
              borderColor: 'rgba(90, 80, 191, 1)',
              borderWidth: 1
          }]
      },
      options: {
          maintainAspectRatio: false,
          responsive: true,
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero: true
                  },
              }]
          }
      }
  });
  </code></pre>
  
  <p>Data is properly displayed but <strong>not all</strong> "previous" 12 months are displayed.If a month does not have registered users it <strong>must</strong> be displayed as well but <strong>with count of zero.</strong> Unfortunately, the given query does not support that function currently, how could I modify it?</p>