title: Is there any solution for displaying data from SQL in Bar Chart without using Cross Tab Query?
body: <p>I have been searching a way to display below data in Chart.js Bar Chart. With Cross Tab query it can be done but my requirement is to display without using CrossTab Query (Pivot or Max Function). I want to yearly compare male and female in chart:</p>
  <p>Data that I want to Display</p>
  <p><img src="https://i.stack.imgur.com/2ZpDh.png" alt="1" /></p>
  <p>Chart I want</p>
  <p><img src="https://i.stack.imgur.com/w39uA.png" alt="2" /></p>
  <p>I have tried following code but it's not working:</p>
  <pre><code>function showYearGenderBarChart() {
      $.ajax({
          url: '/Absentee/getGraphData?option=8',
          type: 'get',
          datatype: 'json',
          traditional: true,
          async: false,
          cache: false,
          contenttype: 'application/json; charset=utf-8',
          success: function (data) {
              let dataPoints = [];
              var colors = [&quot;red&quot;, &quot;blue&quot;, &quot;green&quot;, &quot;yellow&quot;, &quot;orange&quot;, &quot;black&quot;, &quot;grey&quot;, &quot;pink&quot;, &quot;purple&quot;, &quot;magenta&quot;, &quot;maroon&quot;, &quot;navy&quot;];
              $.each(data, function (key, value) {
                  if (value.year == 2020) {
                      dataPoints.push(
                          {
                              label: value.gender,
                              data: [value.absentee],
                              lineTension: 0,
                              fill: false,
                              backgroundColor: colors[key]
                          }
                      );
                  }
                  //if (value.year == 2021) {
                  //    dataPoints.push(
                  //        {
                  //            label: value.gender,
                  //            data: [value.absentee],
                  //            lineTension: 0,
                  //            fill: false,
                  //            backgroundColor: colors[key]
                  //        }
                  //    );
                  //}
              });
              //$.each(data, function (key, value) {
              //    dataPoints.push(
              //        {
              //            label: value.gender,
              //            data: [value.y2020, value.y2021, value.y2022],
              //            lineTension: 0,
              //            fill: false,
              //            backgroundColor: colors[key]
              //        }
              //    );
              //});
              var speedData = {
                  labels: [&quot;2020&quot;],
                  datasets: dataPoints
              };
  
              let ctxL = document.getElementById(&quot;yearGenderBarChart&quot;).getContext('2d');
              let myChart = new Chart(ctxL, {
                  type: 'bar',
                  data: speedData,
                  options: {
                      responsive: true,
                      plugins: {
                          legend: {
                              display: true,
                              position: 'left'
                          }
                      }
                  }
              });
          },
          error: function () {
          }
      });
  }
  </code></pre>