JSON到jQuery图表

Question

I have a PDO script that echos JSON from SQL table.

I am trying to display the JSON info in a jQuery chart with no success.

I get an error in chrome debugger which refers to the first jQuery code line below (var json).

Function Reference:

    Uncaught SyntaxError: Unexpected identifier
angular.js:11598 ReferenceError: Index is not defined
    at eval (eval at <anonymous> (http://localhost/assets/global/plugins/jquery.min.js:2:2622), <anonymous>:2:2)
    at eval (native)
    at http://localhost/assets/global/plugins/jquery.min.js:2:2622
    at Function.m.extend.globalEval (http://localhost/assets/global/plugins/jquery.min.js:2:2633)
    at m.fn.extend.domManip (http://localhost/assets/global/plugins/jquery.min.js:3:23159)
    at m.fn.extend.append (http://localhost/assets/global/plugins/jquery.min.js:3:20620)
    at null.<anonymous> (http://localhost/assets/global/plugins/jquery.min.js:3:22151)
    at m.access (http://localhost/assets/global/plugins/jquery.min.js:3:3399)
    at m.fn.extend.html (http://localhost/assets/global/plugins/jquery.min.js:3:21736)
    at compile (http://localhost/assets/global/plugins/angularjs/plugins/angular-ui-router.min.js:7:21866) <div ui-view="" class="fade-in-up ng-scope">(anonymous function) @ angular.js:11598$get @ angular.js:8548$ @ angular.js:8219v @ angular.js:7726g @ angular.js:7075(anonymous function) @ angular.js:6954k @ angular-ui-router.min.js:7(anonymous function) @ angular-ui-router.min.js:7$get.l.$broadcast @ angular.js:14707x.transitionTo.x.transition.I.then.x.transition.x.transition @ angular-ui-router.min.js:7(anonymous function) @ angular.js:13175$get.l.$eval @ angular.js:14388$get.l.$digest @ angular.js:14204(anonymous function) @ angular.js:14427e @ angular.js:4902(anonymous function) @ angular.js:5282

PHP:

<?php


$dbh = new PDO("mysql:host=localhost;dbname=test", "root", "");
$statement=$dbh->prepare("SELECT * FROM pdotable");
$statement->execute();
$results=$statement->fetchAll(PDO::FETCH_ASSOC);
$json=json_encode($results, JSON_PRETTY_PRINT);

header('Content-type: application/json');

echo $json;
?>

jQuery:

var json = (function () {
                var json = null;
                $.ajax({
                    'async': false,
                    'global': false,
                    'url': 'pdo/phpinfo.php',
                    'dataType': "json",
                    'success': function (data) {
                        json = data;
                    }
                });
                return json;
            });

        initCharts: function() {

            if (Morris.EventEmitter) {
                // Use Morris.Area instead of Morris.Line
                dashboardMainChart = Morris.Area({
                    element: 'sales_statistics',
                    padding: 0,
                    behaveLikeLine: false,
                    gridEnabled: false,
                    gridLineColor: false,
                    axes: false,
                    fillOpacity: 1,
                    data:json,
                lineColors: ['#399a8c', '#92e9dc'],
                xkey: 'period',
                ykeys: ['sales', 'profit'],
                labels: ['Sales', 'Profit'],
                pointSize: 0,
                lineWidth: 0,
                hideHover: 'auto',
                resize: true
            });

        }
    },

What am I doing wrong?