How to send my MySQL data with PHP code to morris-data.js?

Question

I got a problem how to make morris chart with data from MySQL database. I have made a php code with output like how JSON template can accepted to morris-data.js.

Here's my php code name cobaJson.php:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

<?php
include_once("koneksi.php");

$query = "SELECT * FROM data_graph ORDER BY x ASC";
$result = mysql_query( $query );

while ( $row = mysql_fetch_assoc( $result ) ) 
{  
    $prefix = '';
    echo "[<br />";
    while ( $row = mysql_fetch_assoc( $result ) ) 
    {
        echo $prefix . " {<br />";
        echo '  x: ' . $row['x'] . ',' . "<br />";
        echo '  y: ' . $row['y'] . ',' . "<br />";
        echo '  z: ' . $row['z'] . ',' . "<br />";
        echo '  a: ' . $row['a'] . '' . "<br />";
        echo " }";
        $prefix = ",<br />";
    }
    echo "<br />]";
}
?>

And here's the output :

[ { x: 2012, y: 11, z: 6, a: 9 }, { x: 2014, y: 3, z: 3, a: 1 }, { x: 2015, y: 4, z: 7, a: 9 } ]

And I try to send this php code to my morris-data.js :

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


    Morris.Bar({
        element: 'morris-bar-chart',
        data: json,
        xkey: 'x',
        ykeys: ['y', 'z', 'a'],
        labels: ['Series A', 'Series B', 'Series B'],
        hideHover: 'auto',
        resize: true
    });

});

But it still not work, anyone can you help me?

Answer 1

In you cobaJson.php file, you should create a clean JSON object with json_encode as follows :

$array = array();
while ( $row = mysql_fetch_assoc( $result ) ) 
{
    array_push(
        $array,
        array(
             'x' => $row['x'],
             'y' => $row['y'],
             'z' => $row['z'],
             'a' => $row['a']
        )
    );
}
echo json_encode($array);

Edit:

Since you said your json output from the php is ok, the issue should be located in your js file.

Add error function in your ajax object, just after success as follows:

    $.ajax({
        'async': false,
        'global': false,
        'url': 'cobaJson.php',
        'dataType': "json",
        'success': function (data) {
            json = data;
        }
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          console.log(
            'status:' + XMLHttpRequest.status +
            ', status text: ' + XMLHttpRequest.statusText
          );
          console.log(errorThrown);
        }
    });

and look at your console.

Answer 2

You have Closed the function in a Unexpected Way.

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

Change your last two lines into:

});

Hope It will Help You.