Angularjs line chart get data from sql

I have an angularjs line chart in my page. I am using chart.js as my chart. The data that I have at first is fake and I want to get the true data from the database. I have created a query that can get the date and the total number of members on that specific date. The query goes like this:

SELECT distinct a.time, COUNT(b.member_id) AS Members
FROM b
Inner JOIN a ON b.mir_id = a.mir_id 
GROUP BY 
a.time order by a.time

And this query returns data like this

I have a line chart code in my controller that goes like this one:

$scope.member;
    adminService.getMember()
            .then(function(data){           
                $scope.memberList = data.data.member;
                $scope.member = $scope.memberList;
                console.log($scope.memberList);
                //alert($scope.ptypeList);
                //localStorage.ProductType = JSON.stringify(data.data);
                $rootScope.loader = false;
            });


    $scope.percent = 65;
    $scope.anotherPercent = -45;
    $scope.anotherOptions = {
        animate:{
            duration:0,
            enabled:false
        },
        barColor:'#2C3E50',
        scaleColor:false,
        lineWidth:20,
        lineCap:'circle'
    };

    $scope.percent2 = 25;
    $scope.anotherPercent2 = -45;
    $scope.anotherOptions2 = {
        animate:{
            duration:0,
            enabled:false
        },
        barColor:'#2C3E50',
        scaleColor:false,
        lineWidth:20,
        lineCap:'circle'
    };

    $scope.percent3 = 85;
    $scope.anotherPercent3 = -45;
    $scope.anotherOptions3 = {
        animate:{
            duration:0,
            enabled:false
        },
        barColor:'#2C3E50',
        scaleColor:false,
        lineWidth:20,
        lineCap:'circle'
    };
    //--------------
    $scope.colors = ['#45b7cd', '#ff6384', '#ff8e72'];
    $scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
    $scope.data = [
      [65, -59, 80, 81, -56, 55, -40],
      [28, 48, -40, 19, 86, 27, 90]
    ];
    $scope.datasetOverride = [
      {
        label: "Bar chart",
        borderWidth: 1,
        type: 'bar'
      },
      {
        label: "Line chart",
        borderWidth: 3,
        hoverBackgroundColor: "rgba(255,99,132,0.4)",
        hoverBorderColor: "rgba(255,99,132,1)",
        type: 'line'
      }
    ];

       $scope.labels1 = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  $scope.series1 = ['Series A', 'Series B'];


   $scope.onClick = function (points, evt) {
    console.log(points, evt);
  };

  $scope.datasetOverride1 = [{ yAxisID: 'y-axis-1' }];
  $scope.options1 = {
    scales: {
      yAxes: [
        {
          id: 'y-axis-1',
          type: 'linear',
          display: true,
          position: 'left',
          data: $scope.member
        },

      ]
    }
  }

I am quite confused on how can I assign the values I get from the database to the line chart. How can I do that?

Source: AngularJS

from Angular Questions https://angularquestions.com/2017/10/10/angularjs-line-chart-get-data-from-sql/
via @lzomedia #developer #freelance #web #lzomedia.com