Search code examples
angularjsajaxnvd3.jsangularjs-nvd3-directivesangular-nvd3

Read data from MySQL via AJAX to be sent as data object in the controller of NVD3-Angular


I have found the library nvD3-Angular which looks really good and friendly. I am using it to plot just static data, but I want to be able to read data stored in my DB. Is there a way to set up the data variable with the mentioned data via AJAX using JQuery?? I know there must be a way to fetch this data, nut I have not found it yet.

My code is as follows: In my html:

<div ng-controller="PlotController">
    <nvd3 options="options" data="data">
    </nvd3>
</div>

In the controller:

app.controller('PlotController', function($scope){
        /* Chart options */
        $scope.options = {
            chart: {
                type: 'cumulativeLineChart',
                height: 450,
                margin : {
                    ...
                },
            }
        };
        $scope.initData = [
            {
                key: "Cis ON",
                mean: 250,
                values: [ [ 1083297600000 , -2.974623048543] , ... , [ 1354251600000 , 349.45128876100]]
            },
            {
                key: "Cis OFF",
                mean: -60,
                values: [ [ 1083297600000 , -0.77078283705125] ,..., [ 1085976000000 , -1.8356366650335]]
            },
        ]; 
        //Chart data
        $scope.data = angular.copy($scope.initData);
}); 

As extra info: Server side is coded with Php Laravel 5.1, using mysql as the DB.

Thanks for any guidance.


Solution

  • Refer $http service in angularjs here: https://docs.angularjs.org/api/ng/service/$http

    Sample:

    $http({
      method: 'GET',
      url: 'your api url'
    }).then(function successCallback(response) {
      // this callback will be called asynchronously
      // when the response is available
    }).catch(function errorCallback(response) {
      // called asynchronously if an error occurs
      // or server returns response with an error status.
    });