Angular-chart js and connecting to a MySQL Backend

Question

First of all, thanks in advance for any help. I have been struggling for a couple of days trying to figure out how to hook an angular-chart object into a mysql database. I currently have the charts working with static data. I have a generic php file in my project that looks something like this:

// Create the connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check the connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
//echo "Connected successfully";

//the sql to run
$sql = "SELECT * FROM Test2";
//run it
$result = $conn->query($sql);

//check for results
if ($result->num_rows > 0) {
//create an array
$dataarray[] = array();

//loop em
while($row =mysqli_fetch_assoc($result)) {
    $dataarray[] = $row;
}
//make em json
echo json_encode($dataarray);
}
//} else {
//    echo "0 results";
//}

//close out our connection
$conn->close();
?>

This works fine. This table returns a couple of rows with the headers Name and Value. Nothing but test data at this time.

In my html/javascript, I have the following:

<script>
        angular.module("ChartApp", ["chart.js"]).controller("PieCtrl", function ($scope, $http) {
          $http.get('./GetTestData.php').
            success(function(data) {
                $scope.records = data;

            });

          $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
          $scope.data = [300, 500, 100];
        });
    </script>

I am not really sure where to go from here. Any help would be appreciated.

its not a pie chart but you could take idea from here http://plnkr.co/edit/SYgfQTTEC2XD1OA0ZReV?p=preview — Pankaj Parkar, Sep 10 '15 at 22:13
Thanks for the help. Unfortunately, that did not quite do it. That example is using a static data set as well. — Pikuchan, Sep 10 '15 at 22:28

score 0 · Answer 1 · answered Sep 11 '15 at 00:23

Took forever, but I finally figured it out. I had to take the JSON object and convert the values out into separate arrays. Here is the relevant code:

angular.module("ChartApp", ["chart.js"]).controller("PieCtrl", function ($scope, $http) {
 $http.get('./GetTestData.php').
success(function(data) {
    var names = [];

    for(var i = 0; i < data.length; i++) {
        var obj = data[i];

        if(obj.Name != undefined) {
            names.push(obj.Name);
        }
    }

    var values = [];
    for(var i = 0; i < data.length; i++) {
        var obj = data[i];

        if(obj.Name != undefined) {
            values.push(obj.Value);
        }
    }
    //$scope.records = data;
    $scope.labels = names;
    $scope.data = values;
    });

        });
    </script>

score 0 · Answer 2 · edited Nov 05 '15 at 08:22

0

I was getting the follow error with that code:

Uncaught TypeError: Cannot read property 'draw' of undefined

So I had to insert [ and ] at $scope.data to make it works.

$scope.labels = names;
$scope.data = [values];

edited Nov 05 '15 at 08:22

Jazi

6,569
13
60
92

answered Nov 05 '15 at 03:13

Guilherme Teubl

1,136
11
11

this does not answer the question – prasun Nov 05 '15 at 03:17

Angular-chart js and connecting to a MySQL Backend

2 Answers2