title: How to create chartjs chart with data from database C#
body: <p>I am trying to create a chart.js graph in my .Net Core Web app, with data from the database. I am using ajax to call a method that will pull the data from the database, but I'm unsure how to group the data to display in the graph.</p>
  
  <p>At the moment I have a database that looks like so:</p>
  
  <p><a href="https://i.stack.imgur.com/1757K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1757K.png" alt="Database table"></a></p>
  
  <p>I am looking to show the time along the bottom and count how many jobs success and how m any jobs exception. At the moment my graph is hard coded.</p>
  
  <p><a href="https://i.stack.imgur.com/bYPv4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bYPv4.png" alt="Hard coded graph layout"></a></p>
  
  <pre><code>// Area Chart Example
  var ctx = document.getElementById("canvas")
  var lineChartData = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [{
      label: 'Failed',
      borderColor: "MediumSeaGreen",
      backgroundColor: "MediumSeaGreen",
      fill: false,
      data: [
          30000, 30162, 26263, 18394, 18287, 28682, 31274, 33259, 25849, 
   24159, 32651, 31984, 38451
      ],
      yAxisID: 'y-axis-1',
  }, {
      label: 'Exceptioned',
      borderColor: "Tomato",
      backgroundColor: "Tomato",
      fill: false,
      data: [
          20000, 30162, 26263, 33259, 18287, 28682, 25849, 18394, 25849, 
   24159, 32651, 31984, 38451
      ],
      yAxisID: 'y-axis-2'
  }]
  };
  
  window.myLine = Chart.Line(ctx, {
      data: lineChartData,
      options: {
          responsive: true,
          hoverMode: 'index',
          stacked: false,
          title: {
              display: true,
              text: 'Processes'
          },
          scales: {
              yAxes: [{
                  type: 'linear', 
                  display: true,
                  position: 'left',
                  id: 'y-axis-1',
              }, {
                  type: 'linear',
                  display: true,
                  position: 'right',
                  id: 'y-axis-2',
  
                  // grid line settings
                  gridLines: {
                      drawOnChartArea: false, // only want the grid lines for one axis to show up
                  },
              }],
          }
      }
  });
  </code></pre>